Teble Row单击时显示微调器

问题描述

我有一张桌子。当我单击表行时，之后调用ajax请求函数，然后加载多个表。我想在ajax方法运行时显示微调器。所以我编写如下代码。

I have an a table. When i clicked the table rows , after that ajax request functions are called and then more than one tables load. I want to show spinner while ajax methods run. So that i write code like as below.

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

当我执行此click函数时，在所有表加载ajax请求后显示spinner。即ajax方法在ShowSpinnerFuntion（）方法之前运行，尽管我首先调用method（show spinner）。

When i execute this click function, spinner is shown after all tables are load with ajax requests. Namely ajax methods run before "ShowSpinnerFuntion()" method although i call method (show spinner) first.

我在这个点击函数方法中只写show spinner函数。例如：

I write only show spinner function in this click function method.Like as:

$(".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函数。

When i execute click function like as above, after that spinner is shown directly. How can i execute spinner function before ajax request functions. How can i give priority to this javascript functions.

推荐答案

我希望它能正常工作

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

       }
    });
}

并在每种方法中都提及此代码

and also mention this code in every method

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

           }

这篇关于Teble Row单击时显示微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！