Afficher Spinner lorsque Teble Row Cliquez sur

Question

J'ai une table. Lorsque j'ai cliqué sur les lignes de la table, après que les fonctions de requête ajax sont appelées, plusieurs tables se chargent. Je veux montrer spinner pendant que les méthodes ajax s'exécutent. Alors que j'écris du code comme ci-dessous. Lorsque j'exécute cette fonction de clic, spinner est affiché après que toutes les tables sont chargées avec des requêtes ajax. A savoir les méthodes ajax s'exécutent avant la méthode "ShowSpinnerFuntion()" bien que j'appelle méthode (show spinner) en premier.

-je écrire que montrer la fonction spinner dans cette fonction, cliquez method.Like comme:

$(".table-row").click(function (evt) { 
    ShowSpinnerFuntion(); 
    var $cell = $(evt.target).closest('td'), msg; 
    var id = $cell.attr("id"); 
    //CallAjaxMethodForTable1(id); 
    //CallAjaxMethodForTable2(id); 
    //CallAjaxMethodForTable3(id); 
    //CallAjaxMethodForTable4(id); 
}); 

Quand j'exécute la fonction de clic comme comme ci-dessus, après spinner est affiché directement. Comment puis-je exécuter la fonction spinner avant les fonctions de requête ajax. Comment puis-je donner la priorité à ces fonctions javascript.

Answer 1

Il suffit d'appeler les fonctions requises ajax dans votre ligne clic fonction

$(".table-row").click(function (evt) { 
    var $cell = $(evt.target).closest('td'), msg; 
    var id = $cell.attr("id"); 
    CallAjaxMethodForTable1(id); 
    CallAjaxMethodForTable2(id); 
    CallAjaxMethodForTable3(id); 
    CallAjaxMethodForTable4(id); 
}); 

Définissez ensuite les fonctions ci-dessous. Au début, montrez le chargeur et, en cas de succès ou d'erreur, cachez le chargeur.

function CallAjaxMethodForTable1(){ 
$('.loaderImage').show(); 
$.ajax({ 
     type: "POST", 
     url: "/some_url", 
     data: { id: id },       
     success: function(data){     
      $('.loaderImage').hide(); 
     }, 
     error: function (response) { 
      $(".loaderImage").hide(); 

     }   
    }); 
} 

Answer 2

J'espère que ce travail est

$(".table-row").click(function (evt) { 
$('.loaderImage').show(); 
    var $cell = $(evt.target).closest('td'), msg; 
    var id = $cell.attr("id"); 
    CallAjaxMethodForTable1(id); 
    CallAjaxMethodForTable2(id); 
    CallAjaxMethodForTable3(id); 
    CallAjaxMethodForTable4(id); 
}); 



function CallAjaxMethodForTable4(){ 
$.ajax({ 
     type: "POST", 
     url: "/some_url", 
     data: { id: id },       
     success: function(data){     
      $('.loaderImage').hide(); 
     }, 
     error: function (response) { 
      $(".loaderImage").hide(); 

     }   
    }); 
} 

et mentionne également ce code dans chaque méthode

error: function (response) { 
       $(".loaderImage").hide(); 

      }