Using jquery-store-locator-plugin v2 with Multiple Forms

0 votes

I'm trying to get version 2 of the jquery-store-locator-plugin to work on a dynamically generated page of location results with little success.

The problem is that I have a form for each location and I'm unsure how to hook up the plugin to the form when its submit button is clicked. Can someone please help me with that?

For now, I'm just running the demo found on:

https://bjornblog.com/storelocator/v2/

In the container, there is a form:

    <div class="bh-sl-container">
  <div id="page-header">
    <h1 class="bh-sl-title">Using Chipotle as an Example</h1>
    <p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality. 
    You can use just the city as the address - ex: Edina, MN.</p>
  </div>

  <div class="bh-sl-form-container">
    <form id="bh-sl-user-location" method="post" action="#">
        <div class="form-input">
          <label for="bh-sl-address">Enter Address or Zip Code:</label>
          <input type="text" id="bh-sl-address" name="bh-sl-address" />
        </div>

        <button id="bh-sl-submit" type="submit">Submit</button>
    </form>
  </div>

  <div id="bh-sl-map-container" class="bh-sl-map-container">
    <div id="bh-sl-map" class="bh-sl-map"></div>
    <div class="bh-sl-loc-list">
      <ul class="list"></ul>
    </div>
  </div>

In the demo, the storeLocator() function is called at the bottom of the page ( whereas I'd like to invoke it on the button click or form submit).

    $(function() {
        $('#bh-sl-map-container').storeLocator();
    });

In my JSP page, I have a loop that inserts a form within a table row:

    <tbody>
       <c:forEach var="product" items="${productList}" varStatus="loop">
            <tr>
               <td class="product_name"><a href="${product.detailsLink}" target="_blank">${product.name}</a></td>
               <td class="thumb"><a href="${product.detailsLink}" target="_blank"><img src="${product.imagePath}" alt="${product.name}" /></a></td>
               <td class="desc">${product.desc}</td>
               <td class="price">${product.price}</td>
               <td class="">
                 ${product.storeName}
                 <div id="frmContainer${loop.index}">
                   <form id="frmMapIt${loop.index}" class="map_it" onsubmit="go($('#frmContainer${loop.index}'), 'frmMapIt${loop.index}', 'bh-sl-address${loop.index}')">
                        <input type="text" id="bh-sl-address${loop.index}" name="bh-sl-address${loop.index}" />

                        <button id="bh-sl-submit${loop.index}" type="submit">Map it!</button>
                   </form>      
                 </div>
               </td>
           </tr>
       </c:forEach>
     </tbody>
   </table>

This is the function that invokes the storeLocator function:

    function go(formContainer, formID, addressID) {     
  $('#bh-sl-map-container').storeLocator({
    'dataType': 'json',
    'dataLocation': 'data/locations.json',
    'slideMap': false,
    'modal': true,
    'formContainer': formContainer,
    'formID': formID,
    'addressID': addressID
  });

}

Thanks!

Rob

Aug 8, 2022 in Web Development by gaurav
• 23,260 points
284 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

How to place images using jQuery masonry plugin to start

You were just missing a css class that adjusts ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,640 points
368 views
0 votes
1 answer

How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

The jQuery fadeIn() method is used to ...READ MORE

answered Jun 29, 2022 in Web Development by rajatha
• 7,640 points
1,032 views
0 votes
0 answers

Using jQuery UI functions with Mithril

I am new to the Mithril JS ...READ MORE

Jul 22, 2022 in Web Development by gaurav
• 23,260 points
249 views
0 votes
1 answer
0 votes
1 answer

How can I create a simple page vertical scroll bar without using jQuery?

Surprisingly, there is not a great, simple ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,640 points
306 views
0 votes
1 answer

How to use JQuery with ReactJS

Yes, we can use jQuery in ReactJs. ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,640 points

edited Dec 15, 2023 by Soumya 13,894 views
0 votes
1 answer

jQuery AJAX submit form

There is a simple input mentioned below ...READ MORE

answered Feb 8, 2022 in Java by Soham
• 9,700 points
1,290 views
0 votes
0 answers

How to reset a form using jQuery with .reset() method

My code : <div id="labels"> <table class="config"> ...READ MORE

May 24, 2022 in Java-Script by Kichu
• 19,050 points
522 views
0 votes
1 answer

How to reset a form using jQuery with .reset() method

<input type="reset"> Syntax for reset(): formObject.reset() Syntax to convert ...READ MORE

answered Jun 16, 2022 in JQuery by rajatha
• 7,640 points
13,340 views
0 votes
0 answers

How can I get form data with JavaScript/jQuery?

Is there a simple, one-line way to ...READ MORE

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
2,200 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP