Question

当用户点击我的应用程序中的相应按钮时，我想启动一些弹出窗口。我用

$('#modal').on('show', function () {
    $.ajax({  ...  });
});

并使用ajax我要求mysql中的一些json内容，我希望将其注入modal-header，modal-body和modal-footer。这是我一般在我的网页中使用的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会带来更新的好东西，等等。所以内容的更新在用户面前悲伤地运行。 Modal api没有比'show'更好的选项，因此只有当整个内容由ajax提供并准备好传送到最终用户的屏幕时才能显示模态。

Answer 1

好的，我试过了不同的东西。我点击一个按钮时运行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调用完成之前添加一个加载器。

来自mysql的Bootstrap模态窗口+ ajax

1 个答案: