javascript – jqGrid doesn't call 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 blockUI plugin when my AJAX request encounters some error on the server like error 500.

I know blockUI 2.66.0 doesn't work with synchronous AJAX, so I'm using my jqGrid plugin to do your AJAX requests like 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 doesn't work at all. But when I play the blockUI call inside a window.setTimeout like 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 blockUI call 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 the blockUI handles Ajax, the problem that I use it asynchronously as it requires and it doesn't even work without window.setTimeout .

EDIT: According to utluiz's answer, there might be some conflict with my default settings on how I handle AJAX requests, here's the configuration:

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

Answer:

At first I don't see anything wrong with its implementation. On the other hand, the BlockIU plugin has nothing to do with Ajax, so your assumption about the problem seems wrong.

This type of issue could be a conflicting issue of actions on different events. If you have some other event like loadBeforeSend that runs almost at the same time as loadError , due to the error being returned very quickly, this could be nulling 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:

  1. Look for and temporarily inhibit other events that act during Ajax.
  2. Check if loadError is running and only once.
  3. Create a minimal example to reproduce the problem.

As for item 3, you can simplify the 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 had the exact same problem.

Post Views: 4
Scroll to Top