2017-04-06 1 views
0

J'ai implémenté un jquery Bootgrid. Je veux gérer montrer et cacher mon chargeur que j'ai implémenté.jQuery Bootgrid comment vérifier si bootgrid est toujours en train de charger

Le chargeur est affiché et masqué avec $("#ajaxLoader").show(); et $ ("# ajaxLoader"). Hide(); `respectivement.

Et j'ai mon initialisation de Bootgrid mis en œuvre comme suit:

var grid = $('#grid').on("load.rs.jquery.bootgrid", function() { 
    $("#ajaxLoader").show(); 
}).bootgrid({ 
    ajax: true, 
    ajaxSettings: { 
     method: "GET", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     cache: false 
    }, 
    searchSettings: { 
     delay: 500, 
    }, 
    url: myURL, 
    rowCount: [5, 10, 50, 75, 100, 200, -1] 
}).on("loaded.rs.jquery.bootgrid", function (e) { 
    $("#ajaxLoader").hide(); 
}); 

Maintenant, cela fonctionne très bien, mais je veux optimiser de 2 façons:

  1. fonctionnalité de recherche de Bootgrid semble avoir son propre chargeur est-il donc un moyen de ne pas montrer mon chargeur ajax si la recherche se produit?

  2. Mon chargeur s'ouvre et se cache très rapidement sur de courtes requêtes. Y a-t-il un moyen de retarder cela?

Résolution option 2 sera probablement résoudre l'option 1 sur son propre, mais de toute façon voici ce que j'ai essayé en ce qui concerne l'option 2.

J'ai essayé setTimeout(function() { $("#ajaxLoader").show(); }, 1000);, mais il ne se cache à nouveau. J'ai contre résolu cela en utilisant setTimeout(function() { $("#ajaxLoader").hide(); }, 1000) mais ensuite il clignote montrer et cacher inutilement.

Donc, idéalement, j'ai besoin de vérifier si le Bootgrid est encore en cours de chargement avant d'appliquer cette fonction.

Comment puis-je résoudre mon problème de chargement?

Edit:

J'ai aussi essayé de placer une variable loading où sur ma méthode load je dis:

loading = true; 
setTimeout(function() { if (loading) { $("#ajaxLoader").show(); }}, 1000); 

et ce qui suit sur mon événement loaded:

setTimeout(function() { $("#ajaxLoader").hide(); }, loaderDelay); 

Cela m'a toujours donné la même erreur clignotante.

Répondre

0

Je l'ai résolu en utilisant la fonction clearTimeout() comme ceci:

var showLoader; 

var grid = $('#grid').on("load.rs.jquery.bootgrid", function() { 
    showLoader = setTimeout(function() { $("#ajaxLoader").show(); }, 1000); 
}).bootgrid({ 
    ajax: true, 
    ajaxSettings: { 
     method: "GET", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     cache: false 
    }, 
    searchSettings: { 
     clearTimeout(showLoader); 
     delay: 500, 
    }, 
    url: myURL, 
    rowCount: [5, 10, 50, 75, 100, 200, -1] 
}).on("loaded.rs.jquery.bootgrid", function (e) { 
    $("#ajaxLoader").hide(); 
});