显示微调当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(); 

      }