4

Estou usando jqGrid 4.54 no meu projeto e eu quero colocar uma mensagem bloqueando a tela toda com o plugin blockUI quando a minha requisição AJAX encontra algum erro no servidor como erro 500.

Eu sei que o blockUI 2.66.0 não funciona com AJAX síncrono, então estou usando meu plugin jqGrid para fazer suas requisições AJAX como abaixo:

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

Mas fazendo desse jeito o plugin não funciona de maneira alguma. Porém quando eu jogo a chamada ao blockUI dentro de um window.setTimeout como abaixo funciona perfeitamente:

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

Alguém sabe como fazer a chamada ao blockUI ser executada sem ter que usá-la dentro de um window.setTimeout?

Em tempo, todas funções nativas do JavaScript como parseInt, parseFloat, alert, console.log funcionam, o que me leva a crer que o problema é como o blockUI lida com o Ajax, o problema que utilizo ele de forma assíncrona como ele exige e nem assim funciona sem o window.setTimeout.

EDIÇÃO: De acordo com a resposta do utluiz, pode haver algum conflito com as minhas configurações padrão de como eu manipulo requisições AJAX, segue a configuração:

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

2 Respostas 2

3

A princípio não vejo nada de errado com sua implementação. Por outro lado, o plugin BlockIU não tem relação com Ajax, então sua suposição sobre o problema parece equivocada.

Esse tipo de problema pode ser um problema de conflito de ações em eventos diferentes. Se você tiver algum outro evento como loadBeforeSend que é executado quase ao mesmo tempo em que o loadError, devido ao erro ser retornado muito rapidamente, isso pode estar anulando a exibição da mensagem.

Outro problema poderia ser algum outro script realizando alterações no DOM (estrutura do HTML). Isso poderia afetar as camadas criadas pelo BlockUI.

Enfim, sugiro os seguintes passos para encontrar o problema:

  1. Procurar e inibir temporariamente outros eventos que atuem durante o Ajax.
  2. Verificar se o loadError está sendo executado e somente uma vez.
  3. Criar um exemplo mínimo para reproduzir o problema.

Quanto ao item 3, você pode ir simplificando o código da página, removendo elementos até que o problema desapareça, assim você isola a causa.

Infelizmente, não vejo como dar uma solução direta para o problema, a não ser que alguém já tenha passado exatamente pelo mesmo problema.

14
  • 1
    Já tinha pensado nessa parte de ir retirando partes do sistema para isolar o problema, mas isso vai ser simplesmente um inferno pra fazer, pois não adianta salvar o HTML porque não executará a requisição ajax que eu preciso pra isolar o problema. Quanto ao blockUI ter problemas com AJAX não é uma suposição, é uma certeza. Copiei e colei uma chamada AJAX via jQuery que estava configurada para ser síncrona e o plugin não funcionava, até mesmo porque AJAX síncrono já bloqueia a tela por si só, pois nada pode rodar antes do fim do dele. Commented 29/01/2014 às 15:32
  • Alguns links sobre o assunto: stackoverflow.com/questions/6009223/… e stackoverflow.com/questions/2875074/… Commented 29/01/2014 às 15:33
  • @Philippe Mais uma uma vez: o problema não está relacionado ao Ajax. Ambos os posts falam sobre a questão do browser ficar bloqueado durante um Ajax síncrono. Isso não diz respeito ao BlockUI, na verdade, nada funcionaria nessa situação. O problema nesses casos é que o desenvolvedor não leva em conta a sequência de eventos correta. É possível usar um BlockUI durante um Ajax síncrono se o Ajax for executado *após a tela estar completamente bloqueada.
    – utluiz
    Commented 29/01/2014 às 15:56
  • Fiz um exemplo que pode ser visto aqui com BlockUI tanto durante quanto depois do Ajax. Se mudar o async para false funciona do mesmo jeito, só que há um breve "travamento" visual devido ao bloqueio do navegador.
    – utluiz
    Commented 29/01/2014 às 15:56
  • 2
    você estava correto, a minha configuração de ajax estava conflitante com o plugin jqGrid. Nós temos um plugin jQuery aqui do projeto, então encapsulei as configurações em um método. Vou postar como resposta, mas marcarei a sua como resposta, pois a sua nos levou à resposta correta. Commented 30/01/2014 às 15:48
2

A sugestão do @utluiz estava correta na primeira resposta. A minha configuração padrão de requisições AJAX estava conflitante com o plugin jqGrid. Nós temos um plugin jQuery aqui do projeto, então apaguei as configurações AJAX padrão e encapsulei-as em um método.

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

Por fim as chamadas ficam $("#idElemento").carregaConteudoViaAjax(url, objetoJS);

4
  • Philippe, não vejo problemas com essa implementação, embora, particularmente, eu não criasse um plugin jQuery para isso. Quanto faço um sistema, geralmente eu crio um objeto para representá-lo, com os respectivos métodos e variáveis. Por exemplo: var MeuSistema = { ... }.
    – utluiz
    Commented 30/01/2014 às 16:03
  • 1
    Nunca vi essa abordagem, estudei um pouco como os plugins jQuery functionam e fiz semelhante, existem algumas regras que eu não sigo, tipo criar um método e jogar o código nele ao invés de já jogar no seu método diretamente, até porque não entendo o motivo direito de fazerem assim. Commented 30/01/2014 às 16:06
  • Javascript é cheio de detalhes sobre as melhores práticas. Por exemplo, existem várias abordagens para simular Orientação a Objetos e a forma que eu citei é só um exemplo. Mais especificamente, eu uso uma abordagem igual ao item #2 deste artigo.
    – utluiz
    Commented 30/01/2014 às 16:41
  • 1
    Legal o artigo, vou olhar melhor como utilizar sua abordagem, só fiquei meio confuso em como representar objetos do DOM, você ali cria os seus objetos, mas como referenciar e manipular um input tão facilmente como um $("#id) e extender a variável $ pra dar os seus métodos a tudo? Commented 30/01/2014 às 16:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .