顯示微調當Teble行點擊

Question

我有一個表。當我點擊表格行後，調用ajax請求函數，然後加載多個表。我想在ajax方法運行時顯示微調。這樣我就像下面這樣編寫代碼。

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

當我執行這個點擊函數時，在所有的表格都加載了ajax請求之後，將顯示微調器。即在「ShowSpinnerFuntion（）」方法之前運行ajax方法，儘管我首先調用方法（show spinner）。

我只寫顯示該點擊功能method.Like作爲微調功能：

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

當我執行點擊功能像如上述，即旋轉器被直接示出後。 如何在ajax請求函數之前執行微調函數。我該如何優先考慮這個javascript功能。

Answer 1

只需調用所需的AJAX功能，在你行點擊功能

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

然後定義如下的功能。在開始顯示加載程序和成功或錯誤隱藏加載程序。

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

我希望它的工作

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

     }   
    }); 
} 

，並在每個方法也提這個代碼

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

      }