我想在用户点击我的一个应用程序中的相应按钮时启动一些弹出窗口。我使用
$('#modal').on('show', function () {
$.ajax({ ... });
});
和ajax我要求一些json内容从mysql,我希望注入到模态头,模态体和模态脚。这是我一般使用的html到我的网页,我想刷新和显示时,一个按钮的选择。
<div class="modal hide fade" id="modal">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
问题是,模态出现空或显示以前交付的内容,1秒左右后,ajax带来了更新的好东西等。所以内容的更新在用户眼前可悲地运行。模态api没有提供一个比show更好的选项,所以只有当整个内容由ajax带来并准备交付给最终用户的屏幕时,模态才能显示。
好吧,我试过别的方法了。我运行ajax调用时,一个按钮被点击,并在成功选项的第一个内容的持有,然后我调用手动模态窗口,以显示其更新的好。
$('a[href=#viewProperty]').click(function(e) {
var dataString = "action=viewProperty&propertyId=" + $.cookie('propertyId');
$.ajax({
type : "GET",
dataType : "json",
url : "ajax/property.php",
data : dataString,
success : function(data){
console.log("ajax works");
//$.removeCookie('propertyId');
console.log(data.house_type);
$('#viewProperty h3').empty().html('View Property: ' + data.house_type);
$('#viewProperty').modal('show');
},
error : function(){
console.log("ajax failed");
}
});
return false;
});
和工作正常。最后要做的就是在ajax调用完成之前添加加载器。