Question

我知道还有其他帖子。但没有答案。

情况，我有一个ajax命令。这需要时间，因为我有一些事情要做。

我想在执行ajax之间加载一个加载。

我想使用jquery BlockUI，因为它简单而美观。

但是我不知道为什么视觉效果在ajax加载整个数据之前不起作用（比如“成功”开始时）。

我尝试多种方式，但没有工作。

这是我的最后一段代码：

来自http://www.codeproject.com/Articles/382390/An-Example-to-Use-jQuery-Global-AJAX-Event-Handler

的功能

var AjaxGlobalHandler = {
Initiate: function(options) {
    $.ajaxSetup({ cache: false });

    // Ajax events fire in following order
    $(document).ajaxStart(function() {
        $.blockUI({
            message: options.AjaxWait.AjaxWaitMessage,
            css: options.AjaxWait.AjaxWaitMessageCss
        });
    }).ajaxSend(function(e, xhr, opts) {
    }).ajaxError(function(e, xhr, opts) {
        if (options.SessionOut.StatusCode == xhr.status) {
            document.location.replace(options.SessionOut.RedirectUrl);
            return;
        }

        $.colorbox({ html: options.AjaxErrorMessage });
    }).ajaxSuccess(function(e, xhr, opts) {
    }).ajaxComplete(function(e, xhr, opts) {
    }).ajaxStop(function() {
        $.unblockUI();
    });
}
};

致电准备

        var options = {
            AjaxWait: {
                AjaxWaitMessage: '<h1 class="ui-overlay-loading-content"><img class="ui-overlay-loading-image" src="_inc/img/loading3circle1.gif" />Chargement des données ...</h1>',

                AjaxWaitMessageCss: { backgroundColor: '#ffffff' }
            },
            AjaxErrorMessage: "<h6>Erreur!/h6>"         
        };

        AjaxGlobalHandler.Initiate(options);

致电执行

$.ajax({
                type: "POST",
                url: location.href.split('/').pop() + "?action=" + actionName + "&recherche=" + recherche,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    FillDataGridOnSuccess(response, gridId, dataTypeName);
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert("xhr.status : " + xhr.status);
                    alert("thrownError : " + thrownError);
                }
            });

我也尝试

var ajaxSettings = function(options) {
    return $.extend(
        {
            beforeSubmit: function() {
            //beforeSend: function() {                
                $.blockUI({ overlayCSS: { backgroundColor: '#ffffff' },
                    message: '<h1 class="ui-overlay-loading-content"><img class="ui-overlay-loading-image" src="_inc/img/loading3circle1.gif" />Chargement des données ...</h1>'
                });
            },
            complete: function() {
                $.unblockUI();
            }
        },
        options
    );
};

我做的每个测试都以一个似乎只出现在ajaxSuccess上的加载结束。

我知道官方的blockUI网站http://jquery.malsup.com/block/#demos上有样本他们在那里工作，但我不能靠自己。有谁知道为什么？

坦克你

BlockUI Ajax加载错误的时刻

0 个答案: