Bootstrapのmodal.show（）関数に値の引数を渡す方法

Question

私はページにローカルカフェのリストを表示しています。ユーザーが特定のカフェをクリックすると、既に「カフェ名」があらかじめ入力されているモーダルダイアログが表示されます。ページには多くのカフェ名が含まれており、フォームにはクリックした「カフェ名」が含まれている必要があります。

には、以下の

質問に実際の値を渡す方法であるモーダルフォームリンクボタンここ

  <table class="table table-condensed table-striped"> 
     <tbody> 
     <tr> 
      <td>B&Js 
      </td> 
      <td>10690 N De Anza Blvd </td> 
      <td> 
       <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a> 
      </td> 
     </tr> 

     <tr> 
      <td>CoHo Cafe 
      </td> 
      <td>459 Lagunita Dr </td> 
      <td> 
       <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a> 
      </td> 
     </tr> 


     <tr> 
      <td>Hot Spot Espresso and Cafe 
      </td> 
      <td>1631 N Capitol Ave </td> 
      <td> 
       <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a> 
      </td> 
     </tr> 

     </tbody> 
    </table> 

でテキストとして生成されたカフェの名前のリストです "モーダルフォームの "値"属性？

<input type="hidden" name="cafeId" value="104" /> 

フォーム "ショー" イベント "がonlick" イベントによってトリガされ

<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a> 

Answer 1

あなたはこのようにそれを行うことができます：

<a class="btn btn-primary announce" data-toggle="modal" data-id="107" >Announce</a> 

をクリックをバインドして送信するためのjQueryを使用アナウンスデータIDをモーダル#cafeの値として指定します。

$(document).ready(function(){ 
    $(".announce").click(function(){ // Click to only happen on announce links 
    $("#cafeId").val($(this).data('id')); 
    $('#createFormId').modal('show'); 
    }); 
}); 

Answer 2

使用

$(document).ready(function() { 
    $('#createFormId').on('show.bs.modal', function(event) { 
     $("#cafeId").val($(event.relatedTarget).data('id')); 
    }); 
}); 

Answer 3

私はこれをどのようにしたかを共有したいと思います。ここ数日間は、ブートストラップモーダルダイアログにいくつかのパラメータを渡す方法を頭で揺さぶって過ごしました。多くの頭打ちをした後、私はこれをやる簡単な方法を思いついた。ここで

は私のモーダルコードです：

<div class="modal fade" id="editGroupNameModal" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div id="editGroupName" class="modal-header">Enter new name for group </div> 
     <div class="modal-body"> 
      <%= form_tag({ action: 'update_group', port: portnum }) do %> 
      <%= text_field_tag(:gid, "", { type: "hidden" }) %> 
      <div class="input-group input-group-md"> 
      <span class="input-group-addon" style="font-size: 16px; padding: 3;" >Name</span> 
      <%= text_field_tag(:gname, "", { placeholder: "New name goes here", class: "form-control", aria: {describedby: "basic-addon1"}}) %> 
     </div> 
     <div class="modal-footer"> 
      <%= submit_tag("Submit") %> 
     </div> 
     <% end %> 
     </div> 
    </div> 
    </div> 
</div> 

そして、ここでは簡単なJavaScriptのGIDを変更し、入力値をGNAMEすることです：

function editGroupName(id, name) { 
    $('input#gid').val(id); 
    $('input#gname.form-control').val(name); 
    } 

私はちょうどリンクでのonclickイベントを使用しました。

//                    ' is single quote 
//                     ('1', 'admin') 
<a data-toggle="modal" data-target="#editGroupNameModal" onclick="editGroupName(&#39;1&#39;, &#39;admin&#39;); return false;" href="#">edit</a> 

オンクリックが最初に起動し、入力ボックスの値プロパティを変更するので、ダイヤルogがポップアップし、フォームが提出するための値が設定されます。

私はこれがいつか誰かを助けることを願っています。乾杯。