Question

我正在尝试使用jquery-store-locator-plugin的第2版来处理动态生成的位置结果页面，但收效甚微。

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

目前，我刚刚运行了以下的演示：

在容器中，有一个表单：

    <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。诀窍是在调用map插件之前重置map容器，因为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();
        });
    });

使用带有多个表单的jquery-store-locator-plugin（v2）

1 个答案: