在bootstrap模式中显示ajax调用结果 [英] Showing ajax call result in bootstrap modal
问题描述
我需要在Bootstrap模式中显示多个数据。为此,我所做的是:
I need to show multiple data in a Bootstrap modal. For that what I did was this:
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):
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?
编辑
鉴于答案我已经意识到我错过了一个点,所以成功函数应该是这样的:
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>
你可以看到有模态体内的许多< p>标签。我试过插入一个id,所以它可以是不同的,但它对我不起作用。我该怎么做?
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?
推荐答案
当你显示模态并且你从不显示模态时你绑定了click事件所以点击处理程序永远不会被绑定。
You are binding the click event when the modal gets shown and you never show the modal so the click handler never gets bound.
你可以这样做:
$('.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).
这篇关于在bootstrap模式中显示ajax调用结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!