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

Question

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

Navigation

#1 by (3 votes)
#2 by (2 votes)

4

I'm using jqGrid 4.54 in my project and I want to put a message blocking the whole screen with the blockUI in> when my AJAX request encounters an error on the server as error 500.

I know that 2.66.0 does not work with synchronous AJAX, so I'm using my jqGrid plugin > 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 inside a window.setTimeout as below it 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 run without having to use it inside a window.setTimeout ?

In time, all native JavaScript functions like parseInt , parseFloat , alert , console.log work, which leads me to believe that the problem is how blockUI handles Ajax, problem that uses it asynchronously as it requires and does not even work without window.setTimeout .

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

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

javascript jquery jqgrid jquery-blockui

asked by anonymous 29.01.2014 / 14:02

2 answers

2

The @utluiz's suggestion was correct in the first response. My default setting for AJAX requests was conflicting with the jqGrid plugin. We have a jQuery plugin here from the project, so 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 are $("#idElemento").carregaConteudoViaAjax(url, objetoJS);

30.01.2014 / 16:57

Array always receiving the same value [Loop in two arrays simultaneously] Reload after update

score 3 · Accepted Answer

At first I see nothing wrong with your implementation. On the other hand, the BlockIU plugin is unrelated to Ajax, so your guess about the problem seems wrong.

This type of problem can be a conflict of actions problem in different events. If you have some other event such as loadBeforeSend that runs almost at the same time that loadError , because the error is returned very quickly, this may be nullifying the message display.

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:

Search for and temporarily inhibit other events that work during Ajax.

Verify that loadError is running and only once.

Create a minimal example to reproduce the problem.

As for item 3, you can simplify the code of the page, removing elements until the problem disappears, so you isolate the cause.

Unfortunately, I do not see how to give a straight answer to the problem, unless someone has had exactly the same problem.