jqGrid does not call the blockUI method without using window.setTimeOut when ajax request fails

Question

I’m using jqGrid 4.54 in my project and I want to put a message blocking the whole screen with the plugin blockUI when my AJAX request encounters some server error like 500 error.

I know that the blockUI 2.66.0 does not work with synchronous AJAX, so I am using my plugin jqGrid to make your AJAX requests as below:

$.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: ""
    }
});

But doing so the plugin does not work at all. But when I play the call to blockUI within a window.setTimeout as below works perfectly:

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);
}

Does anyone know how to make the call to blockUI be executed without having to use it within a window.setTimeout?

In time, all Javascript native functions such as parseInt, parseFloat, alert, console.log work, which leads me to believe that the problem is like the blockUI handles Ajax, the problem I use it asynchronously as it requires and it doesn’t even work without the window.setTimeout.

EDIT: According to the utluiz response, there may be some conflict with my default settings of how I handle AJAX requests, follow the configuration:

$.ajaxSetup({
    type: "POST",
    dataType : "json",
    cache : false,
    error : function(xhr, statusRequestAjax, error) { $("#msgErros").html(error); },
    beforeSend: function() { $.blockUI(); },
    complete : function() { $.unblockUI(); }
});

Answer 1

At first I see nothing wrong with its implementation. On the other hand, the Blockiu plugin has no relation to Ajax, so your assumption about the problem seems mistaken.

This type of problem can be an action conflict problem at different events. If you have some other event like loadBeforeSend which is executed almost at the same time as the loadError, due to the error being returned very quickly, this may be undoing the display of the message.

Another problem could be some other script making changes to the DOM (HTML structure). This could affect the layers created by Blockui.

Anyway, I suggest the following steps to find the problem:

1. Find and temporarily inhibit other events that operate during Ajax.
2. Check whether the loadError is running and only once.
3. Create a minimal example to reproduce the problem.

As for item 3, you can go on simplifying page code, removing elements until the problem disappears, so you isolate the cause.

Unfortunately, I don’t see how to give a direct solution to the problem, unless someone has already gone through exactly the same problem.

Answer 2

The @utluiz suggestion was correct in the first reply. My default AJAX request configuration was in conflict with the plugin jqGrid. We have a plugin jQuery here of the project, then I deleted the default AJAX settings and encapsulated them in a method.

$.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;
};

Finally the calls stay $("#idElemento").carregaConteudoViaAjax(url, objetoJS);