Javascript 在引导模式中显示ajax调用结果
我需要在引导模式中显示多个数据。为此,我所做的是: js文件:Javascript 在引导模式中显示ajax调用结果,javascript,jquery,ajax,twitter-bootstrap,bootstrap-modal,Javascript,Jquery,Ajax,Twitter Bootstrap,Bootstrap Modal,我需要在引导模式中显示多个数据。为此,我所做的是: 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},
$('#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");
}
});
});
});
查看代码段(模式):
现在modal正在工作,我需要知道如何将数据“插入”到这个新的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">
<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>
乌萨里奥总统
乌萨里奥
名义
电子邮件
接近
如您所见,模态体中有许多“”标记。我已经尝试过向它插入一个id,以便它可以被区分,但它对我不起作用。我该怎么做?试试这个(为我工作):
这将显示模式:
$('Your button').on('click',function(e){
e.preventDefault();
$('your modal').modal('show');
});
然后,这将绑定模式显示事件:
(您可以使用show.bs.modal或show.bs.modal
唯一的区别是活动启动的时间)
当显示模态时,您正在绑定click事件,并且您从未显示模态,因此click处理程序从未被绑定 您可以这样做:
$('.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");
}
});
});
如果确实希望在显示模式时添加单击处理程序,则需要使用适当的处理程序。(在事件下方)。您应该替换
$('#seeProfile .modal-body .p').html('test');
借
因为您正在寻找一个名为'p'
的类,如果您在前面插入一个点。对于html标记
,只需在选择器中写入“p
”
并用“$('#seeProfile').modal('show');
”来完成,以显示模式。尝试以下操作:
$('#seeProfile .modal-body p').html('test');
请注意,我删除了。(点)你在p 尝试使用类名
$(document).on("click", ".getAndUploadButClass", function() {
alert("Before laoding the image making ajax call to load the images ");
$('#picturemyModal').modal('show');
});
$('#seeProfile .modal-body .p').html('test');
$('#seeProfile .modal-body p').html('test');
$('#seeProfile .modal-body p').html('test');
$(document).on("click", ".getAndUploadButClass", function() {
alert("Before laoding the image making ajax call to load the images ");
$('#picturemyModal').modal('show');
});