当Ajax失败时，JQGRID不会在没有Settimeout的情况下调用Blockui

Question

我正在使用JQGrid 4.54 在我的项目中，我想在有服务器错误时放置一条消息，以阻止UI。

我知道Blockui 2.66.0 不使用同步AJAX，因此我使用的是这样的JQGrid：

$.extend($.jgrid.ajaxOptions, { async: true });
$.extend($.jgrid.defaults, {
    mtype: "POST",
    altRows: true,
    datatype: "json",
    loadonce: true,
    height: "auto",
    width: 1100,
    rowNum: 10,
    rowList: [10, 20, 30, 40, 50],
    viewrecords: true,
    pager: "#paginacao",
    sortorder: "asc",
    shrinkToFit: false,
    headertitles: true,
    loadui: "disable",
    rownumbers: true,
    emptyrecords: "<strong>Não houve resultado para o seu filtro.<strong>",
    autoencode: true,
    caption: "Resultados encontrados",
    deselectAfterSort: true,
    gridview: true,
    idPrefix: "id",
    rowTotal: 4000,
    sortable: true,
    toppager: true,
    loadError: function(xhr, status, error) {
        $.blockUI({
            message: '<p style="font-weight: bolder; color: white;">Erro ao tentar gerar relat&oacute;rio, por favor, tente novamente.<br /><br /><a onclick="$.unblockUI();">Fechar</a></p>',
            timeout: 5000,
            onOverlayClick: $.unblockUI
        });
    },
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: true,
        id: 0,
        cell: ""
    }
});

但是，这种方式插件根本不起作用。当我获取blockui并将其包装在窗口中时。setTimeout确实可以如下：

loadError: function(xhr, status, error) {
    window.setTimeout("$.blockUI({ message: '<p style="font-weight: bolder; color: white;">Erro ao tentar gerar relat&oacute;rio, por favor, tente novamente.<br /><br /><a onclick="$.unblockUI();">Fechar</a></p>', timeout: 5000, onOverlayClick: $.unblockUI});", 10);
}

有人知道如何在没有window的情况下进行此操作吗？

Answer 1

是的，我之前也面临着同样的事情。据我所知，JavaScript代码是异步的。当您的Ajax呼叫发射时，默认情况下Ajax也异步。

基本上，发生的事情是您的JavaScript代码在Ajax调用完成并获得结果之前继续运行。因此，您必须使使用网格负载功能为同步。

尝试一些这样的事情：$.extend($.jgrid.ajaxOptions, { async: false });
（目标是使您的网格负载ajax应该同步。）

让我知道它是否有效。

Answer 2

我们的ajax请求默认设置与 jqgrid 插件冲突。由于我们已经开发了 jQuery 插件，因此我们决定将这些设置设置为方法内的$.ajax对象，如下所示。

。

$.fn.carregaConteudoViaAjax = function(url, dados, idElemento) {
    if (typeof idElemento === "undefined") {
        idElemento = "#" + this.attr("id");
    }
    $.ajax({
        url : url,
        data : dados,
        success : function(result, statusRequestAjax, xhr) { $(idElemento).html(result.mensagem); },
        type: "POST",
        dataType : "json",
        cache : false,
        error : function(xhr, statusRequestAjax, error) { $("#msgErros").html(error); },
        beforeSend: function() { $.blockUI(); },
        complete : function() { $.unblockUI(); }
    });
    return this;
};

，然后我们将其称为这样的方法： $("#idElemento").carregaConteudoViaAjax(url, objetoJS);