29

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

リンクボタン付きのテキストとして生成されたカフェ名のリストは次のとおりです

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

これがモーダルフォームです

<div class="modal hide fade" id="createFormId"">
<div class="modal-header">
    <a href="#" class="close" data-dismiss="modal">&times;</a>
    <h3>Create Announcement</h3>
</div>
<div class="modal-body">
    <form class="form-horizontal" method="POST" commandName="announceBean" action="/announce" >
        <input type="hidden" name="cafeId" value="104" />
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="cafeName">Where I am Coding</label>
                <div class="controls">
                    <input id="cafeName" name="cafeName" class="input-xlarge disabled" type="text" readonly="readonly" type="text" value="B&amp;Js"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="date">Date</label>
                <div class="controls">
                    <input type="text" class="input-xlarge" id="date" name="date" />
                    <p class="help-block"></p>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <input type="submit" class="btn btn-primary" value="create" />
                    <input type="button" class="btn" value="Cancel" onclick="closeDialog ();" />
                </div>
            </div>
        </fieldset>
    </form>
</div>

問題は、実際の値をモーダルフォームの「value」属性に渡す方法です。

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

フォームの「show」イベントは「onlick」イベントによってトリガーされます

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

4 に答える 4

50

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

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

次に、jQueryを使用してクリックをバインドし、モーダル#cafeIdの値としてアナウンスデータIDを送信します。

$(document).ready(function(){
   $(".announce").click(function(){ // Click to only happen on announce links
     $("#cafeId").val($(this).data('id'));
     $('#createFormId').modal('show');
   });
});
于 2012-04-30T07:19:13.643 に答える
17

使用する

$(document).ready(function() {
    $('#createFormId').on('show.bs.modal', function(event) {
        $("#cafeId").val($(event.relatedTarget).data('id'));
    });
});
于 2014-08-18T17:44:43.760 に答える
1

私がこれをどのように行ったかを共有したいと思います。ここ数日、ブートストラップモーダルダイアログにいくつかのパラメーターを渡す方法について頭を悩ませました。多くの頭をバッシングした後、私はこれを行うためのかなり簡単な方法を思いついた。

これが私のモーダルコードです：

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

そして、gidとgnameの入力値を変更するための簡単なJavaScriptは次のとおりです。

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

リンクでonclickイベントを使用しました。

//                                                                              &#39; 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>

onclickが最初に起動し、入力ボックスのvalueプロパティが変更されるため、ダイアログがポップアップすると、フォームが送信する値が設定されます。

これがいつか誰かに役立つことを願っています。乾杯。

于 2016-06-19T10:30:37.557 に答える
1

これが私のモーダルと呼んでいる方法です

<a data-toggle="modal" data-id="190" data-target="#modal-popup">Open</a>

これが私がモーダルで価値を得る方法です

$('#modal-popup').on('show.bs.modal', function(e) {
    console.log($(e.relatedTarget).data('id')); // 190 will be printed
});
于 2021-02-26T09:40:05.417 に答える