jQuery 使用自定义数据 ID 加载模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22394696/
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
Load modal with custom data-id
提问by user3396984
I have an issue with one of my website.
我的网站之一有问题。
I have some list links like this:
我有一些这样的列表链接：
<ul>
<li><a data-toggle="modal" data-target="#myModal" data-id="10">Room 10</a>
<li><a data-toggle="modal" data-target="#myModal" data-id="20">Room 20</a>
</ul>
On my #myModal, I want the form appears to edit info. So I passed the data-id, which is the id into my database.
在我的#myModal，我希望表单显示为编辑信息。所以我将data-id, 这是我的数据库中的 id 。
HTML is the following:
HTML如下：
<div class="modal modal-open" id="myModal">
<form class="modal-form form-horizontal">
<div class="modal-header">
<h3>Room #xx</h3>
</div>
<div class="modal-body"> <input name="roomNumber" type="text" value="xx">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
My question, is how can I load the rooms infos from my db into the #myModalwindow ?
我的问题是如何将我的数据库中的房间信息加载到#myModal窗口中？
Step by Step:
一步步：
- I click on the Edit room link.
- The modal loads infos from the db.
- I can change info.
- I save the form.
- The modal close.
- 我点击编辑房间链接。
- 模态从数据库加载信息。
- 我可以更改信息。
- 我保存表格。
- 模态关闭。
Thanks a lot.
非常感谢。
回答by isherwood
Assuming an element in your modal with the ID roomNumber, such as:
假设模态中的元素带有 ID roomNumber，例如：
<p>Your room number is: <span id="roomNumber"></span>.</p>
you'd do something like this to populate it:
你会做这样的事情来填充它：
var myRoomNumber;
$('#rooms li a').click(function() {
myRoomNumber = $(this).attr('data-id');
});
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.roomNumber').text(myRoomNumber);
});
http://jsfiddle.net/isherwood/Yafb5
http://jsfiddle.net/isherwood/Yafb5
There's probably a way to simplify this by grabbing the click target inside the show function and getting the id there, but it's escaping me at the moment.
可能有一种方法可以通过在 show 函数中抓取点击目标并在那里获取 id 来简化这一点，但目前它正在逃避我。
Update: Found it:
更新：找到了：
$('#myModal').on('show.bs.modal', function (e) {
var myRoomNumber = $(e.relatedTarget).attr('data-id');
$(this).find('.roomNumber').text(myRoomNumber);
});
回答by obysky
$( ".button").on("click", function(event){
/* if you want to use the same modal, you must unbind() actions because bootstrap
remember olders actions on Modal element */
$( "#MyModal" ).unbind();
var btn = $(this);
var id = $(this).data("id"); /* "data-id" attribute in html */
$.ajax({
type: 'POST',
url: content_direct_delivery_in_html,
data: { id: id },
success: function(html) {
$('#MyModal').modal().on('shown.bs.modal', function (e) {
$("#MyModal_body").html(html);
});
}
Your Html like this :
你的 HTML 是这样的：
<button class="btn btn-success btn-sm button" data-id="<?php echo $BDD['id']; ?>" data-toggle="modal" data-target="#MyModal">
click me
</button>
回答by satish
I had the same problem i.e. getting data-id of clicked element for MODAL.
我有同样的问题，即获取 MODAL 的点击元素的数据 ID。
And This worked for me
这对我有用
$('#MyModal').modal().on('shown.bs.modal', function (e) {
var myDataId= $(e.relatedTarget).attr('data-id');
});
Hope this helps.
希望这可以帮助。
