使用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函數的函數：

}

謝謝！

羅布

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