当ajax失败时,jqGrid不会在没有setTimeout的情况下调用blockUI

时间:2014-01-23 20:54:23

标签: javascript jquery jqgrid

我在项目中使用jqGrid 4.54 ,我想在服务器出错时发出阻止用户界面的消息。

我知道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并将其包装在window.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.setTimeout的情况下使其工作?

2 个答案:

答案 0 :(得分:0)

是的,我之前也面对同样的问题。据我所知,javascript代码是异步的。当你的ajax调用被触发时,默认情况下ajax也是异步的。

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

尝试这样的事情:$.extend($.jgrid.ajaxOptions, { async: false });
(目标是使你的网格加载ajax应该是同步的。)

让我知道它是否有效。

答案 1 :(得分:0)

我们的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);