将 jquery-store-locator-plugin (v2) 与多种表单一起使用

Question

我正在尝试让 jquery-store-locator-plugin 的第 2 版在动态生成的位置结果页面上工作，但收效甚微。

问题是我每个位置都有一个表单，我不确定如何在单击提交按钮时将插件连接到表单。有人可以帮我吗？

目前，我只是运行在以下位置找到的演示：

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

在容器中，有一个表格：

    <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>

在演示中，storeLocator() 函数在页面底部被调用（而我想在按钮单击或表单提交时调用它）。

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

在我的 JSP 页面中，我有一个在表格行中插入表单的循环：

    <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>

这是调用 storeLocator 函数的函数：

    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
  });

}

谢谢！

罗伯

Answer 1

遗憾的是，没有人回答我的问题，所以我开始自己回答。

做了一些工作，但最终我得到了它。这就是我所做的。

这是 HTML。所有表格都有一张地图：

<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>

这是我的 JS。诀窍是在调用地图插件之前重置地图容器，因为 storeLocator() 函数极大地改变了 HTML：

    $(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();
        });
    });