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 in Web Development by gaurav
• 18,960 points
19 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 in Web Development by rajatha
• 7,440 points
26 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 in Web Development by rajatha
• 7,440 points
63 views
0 votes
0 answers

Using jQuery UI functions with Mithril

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

Jul 22 in Web Development by gaurav
• 18,960 points
21 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 in Web Development by rajatha
• 7,440 points
65 views
0 votes
1 answer

How to use JQuery with ReactJS

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

answered Jun 22 in Web Development by rajatha
• 7,440 points
68 views
0 votes
1 answer

jQuery AJAX submit form

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

answered Feb 8 in Java by Soham
• 9,150 points
372 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 in Java-Script by Kichu
• 19,040 points
92 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 in JQuery by rajatha
• 7,440 points
385 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 in Web Development by gaurav
• 18,960 points
122 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP