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（）関数はページの下部で呼び出されます（ボタンのクリックまたはフォームの送信で呼び出すのとは異なります）。私のJSPページで

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

、Iは、テーブルの行の中のフォームを挿入するループを有する：

<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です。すべてのフォームに1つのマップがあります。

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

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