结合使用jquery-store-locator-plugin（v2）和多种形式

Question

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

Answer 1

Sadly, no one responded to my question, so I set out to answer it myself.

Took some doing, but I got it working eventually. Here's what I did.

This is the HTML. There is one map for all the forms:

<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 id="" class="formContainer">
     <form id="form1" method="post" action="#">
         <div class="form-input">
           <label for="address1">Enter Address or Zip Code:</label>
           <input type="text" id="address1" name="address1" />  <!-- bh-sl-address -->
         </div>

         <button class="formSubmit" id="submit1" type="button">Submit</button>
     </form>
   </div>

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

         <button class="formSubmit" id="submit2" type="button">Submit</button>
     </form>
   </div>
   <div id="mapContainer" 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>
 </div>

Here is my JS. The trick is to reset the map container before invoking the map plugin, as the storeLocator() function changes the HTML dramatically:

    $(function() {
        var mapContainer = $('#mapContainer').get(0).outerHTML;
        $('button.formSubmit').one( 'click', function(evt) {
             //change button type for future clicks
             $(this).attr('type', 'submit');
             //stop form from submitting
             $(evt.target.form).on('submit', function(evt) { evt.preventDefault(); });
             //reinit the map container
             $('div.bh-sl-overlay').replaceWith(mapContainer);
             //invoke the plugin
             $('#mapContainer').storeLocator({
               'slideMap':      false,
               'modal':         true,
               'formContainer': 'formContainer',
               'formID':        evt.target.form.id,
               'addressID':     $(evt.target.form).find("input[id^='address']").attr('id')
             })
             .submit();
        });
    });