twitter-bootstrap 在引导模式中显示 ajax 调用结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24289575/
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
Showing ajax call result in bootstrap modal
提问by Limon
I need to show multiple data in a Bootstrap modal. For that what I did was this:
我需要在 Bootstrap 模式中显示多个数据。为此，我所做的是：
js file:
js文件：
$('#seeProfile').on('show', function() {
$('.see-user').on('click', function(e) {
e.preventDefault();
var id = $(this).data('id');
$.ajax({
url: 'getUser',
type: 'POST',
data: {id: id},
success: function(html){
$('#seeProfile .modal-body .p').html('test');
},
error: function(){
alert("error");
}
});
});
});
view snippet (modal):
视图片段（模态）：
<div id="seeProfile" class="modal hide fade" tabindex="-1" data-replace="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3>Perfil de Usuario</h3>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn">Close</button>
</div>
This is not working. Modal is not showing up, but when inspecting this no errors appear. What am I doing wrong?
这是行不通的。模态没有出现，但在检查时没有出现错误。我究竟做错了什么？
EDIT
编辑
Given the answers I have realized I missed a dot, so success function should be like:
鉴于我已经意识到我错过了一个点的答案，所以成功函数应该是这样的：
$('#seeProfile .modal-body p').html("test");
Now That modal is working I need to know how to "insert" data into this new modal organization:
现在那个模态正在工作，我需要知道如何将数据“插入”到这个新的模态组织中：
<div id="seeProfile" class="modal hide fade" tabindex="-1" data-replace="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3>Perfil de Usuario</h3>
</div>
<div class="modal-body">
<div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible="1">
<div class="row-fluid">
<div class="span6">
<h5>Usuario</h5>
<p><input type="text" class="span12 m-wrap" id="username" readonly></p>
<h5>Nombre</h5>
<p><input type="text" id="name" class="span12 m-wrap" value="" readonly></p>
</div>
<div class="span6">
<h5>Email</h5>
<p><input type="text" class="span12 m-wrap" readonly></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn">Close</button>
</div>
as you can see there are many "< p >" tags inside modal-body. I have tried inserting an id to it so it can be distinct but it's not working for me. How can I do this?
如您所见，modal-body 中有许多“< p >”标签。我试过向它插入一个 id 以便它可以是不同的，但它对我不起作用。我怎样才能做到这一点？
回答by A1rPun
You are binding the click event when the modal gets shown and you never show the modal so the click handler never gets bound.
当模态显示时您正在绑定单击事件，并且您永远不会显示模态，因此单击处理程序永远不会被绑定。
You can do something like this:
你可以这样做：
$('.see-user').on('click', function(e) {
e.preventDefault();
var id = $(this).data('id');
$.ajax({
url: 'getUser',
type: 'POST',
data: {id: id},
success: function(html){
$('#seeProfile .modal-body p').html('test');
$('#seeProfile').modal('show');
},
error: function(){
alert("error");
}
});
});
If you do want to add the click handler when the modal gets shown, you need to use the appropriate handlers. You can find them here(below Events).
如果您确实想在显示模态时添加单击处理程序，则需要使用适当的处理程序。你可以在这里找到它们（在事件下面）。
回答by BENARD Patrick
You should replace
你应该更换
$('#seeProfile .modal-body .p').html('test');
By
经过
$('#seeProfile .modal-body p').html('test');
Because you're are looking for a class called 'p'if you insert a dot before. For a html tag <p></p>you just have to write 'p' in the selector.
因为您正在寻找一个名为'p'if 您之前插入点的类。对于 html 标签，<p></p>您只需要p在选择器中写入 ' '。
And complete with the "$('#seeProfile').modal('show');" to show the modal.
并用“ $('#seeProfile').modal('show');”完成显示模态。
回答by Vladd
Try this:
试试这个：
$('#seeProfile .modal-body p').html('test');
Note that i removed . (dot) you had before p.
请注意，我删除了 . （点）你之前有过。
回答by Yogeshwar
Tried using class name.
尝试使用类名。
$(document).on("click", ".getAndUploadButClass", function() {
alert("Before laoding the image making ajax call to load the images ");
$('#picturemyModal').modal('show');
});
回答by Vanojx1
Try this (work for me):
试试这个（对我来说有效）：
This will show the modal:
这将显示模态：
$('Your button').on('click',function(e){
e.preventDefault();
$('your modal').modal('show');
});
Then this will bind the modal show event:
然后这将绑定模态显示事件：
( you can use show.bs.modal or shown.bs.modal the only differences are the timing of the event launch)
（您可以使用 show.bs.modal 或 shown.bs.modal 唯一的区别是事件启动的时间）
$('your modal').on('show.bs.modal', function(e) {
e.preventDefault();
//ajax call here!!
});
