jQuery 如何在 Bootstrap 中将值参数传递给 modal.show() 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10379624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass values arguments to modal.show() function in Bootstrap
提问by Nambi
I have a page the shows a list of local cafes. When the user clicks on a certain cafe, a modal dialog is shown, that already has the "cafe name" pre-filled. The page contains many cafe names, and the form should contain the "cafe name" that he clicked on.
我有一个页面显示了当地咖啡馆的列表。当用户点击某个咖啡馆时，会显示一个模态对话框，其中已经预先填充了“咖啡馆名称”。该页面包含许多咖啡馆名称，表单应包含他单击的“咖啡馆名称”。
Following is the list of cafe names generated as text with link button
以下是生成为带有链接按钮的文本的咖啡馆名称列表
<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>
Here is the modal form
这是模态形式
<div class="modal hide fade" id="createFormId"">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</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&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>
Question is how to pass actual value into the "value" attribute of the modal form?
问题是如何将实际值传递到模态表单的“值”属性中？
<input type="hidden" name="cafeId" value="104" />
The form "show" event is triggered by "onlick" event
表单“show”事件由“onlick”事件触发
<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
回答by Menztrual
You could do it like this:
你可以这样做：
<a class="btn btn-primary announce" data-toggle="modal" data-id="107" >Announce</a>
Then use jQuery to bind the click and send the Announce data-id as the value in the modals #cafeId:
然后使用jQuery绑定点击并发送Announce data-id作为模态#cafeId中的值：
$(document).ready(function(){
$(".announce").click(function(){ // Click to only happen on announce links
$("#cafeId").val($(this).data('id'));
$('#createFormId').modal('show');
});
});
回答by Ri4a
Use
用
$(document).ready(function() {
$('#createFormId').on('show.bs.modal', function(event) {
$("#cafeId").val($(event.relatedTarget).data('id'));
});
});
回答by detrix42
I want to share how I did this. I spent the last few days rattling my head with how to pass a couple of parameters to the bootstrap modal dialog. After much head bashing, I came up with a rather simple way of doing this.
我想分享我是如何做到这一点的。在过去的几天里，我一直在思考如何将几个参数传递给引导程序模式对话框。经过一番猛烈抨击，我想出了一个相当简单的方法来做到这一点。
Here is my modal code:
这是我的模态代码：
<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>
And here is the simple javascript to change the gid, and gname input values:
这是更改 gid 和 gname 输入值的简单 javascript：
function editGroupName(id, name) {
$('input#gid').val(id);
$('input#gname.form-control').val(name);
}
I just used the onclick event in a link:
我只是在链接中使用了 onclick 事件：
// ' is single quote
// ('1', 'admin')
<a data-toggle="modal" data-target="#editGroupNameModal" onclick="editGroupName('1', 'admin'); return false;" href="#">edit</a>
The onclick fires first, changing the value property of the input boxes, so when the dialog pops up, values are in place for the form to submit.
onclick 首先触发，更改输入框的 value 属性，因此当弹出对话框时，表单提交的值就位。
I hope this helps someone someday. Cheers.
我希望有一天这对某人有所帮助。干杯。
