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
438 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,680 points
574 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,680 points
1,455 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
372 views
0 votes
1 answer
0 votes
1 answer

How do you select multiple elements with jQuery?

To select multiple elements with jQuery, you ...READ MORE

answered Nov 13 in Web Development by kavya
71 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,710 points
1,726 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,040 points
745 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,680 points
15,800 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,454 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