Ajax加載程序映像不起作用

Question

我想顯示ajax加載器圖像。在我的rails應用程序中，我在一個頁面中有三種不同的形式。所有這些頁面都被ajaxified了，它們都擊中了相同的控制器動作。該圖像在頁面中以所有形式顯示。

我的js文件：$（“＃loading-password”）。hide（）; $（“＃loading-address”）。hide（）; $（“＃loading”）。hide（）;

    $(document).bind("ajaxSend", function(){

      $("#loading").show();
      $("#loading-password").hide();
      $("#loading-address").hide();

      }).bind("ajaxComplete", function(){
       $("#loading").fadeOut("slow");

});


     $(document).bind("ajaxSend", function(){

       $("#loading-password").show();
       $("#loading-address").hide();
       $("#loading").hide();


     }).bind("ajaxComplete", function(){
       $("#loading-password").fadeOut("slow");


});



   $(document).bind("ajaxSend", function(){
    $("#loading-address").show();
    $("#loading-password").hide();
    $("#loading").hide();

    }).bind("ajaxComplete", function(){
     $("#loading-address").fadeOut("slow");

   });

我有三種形式的三種不同的div。我不知道這里出了什么問題。

請幫助大家。

Answer 1

使用ajaxsend您可以將這些函數綁定到每個AJAX調用，如jQuery文檔中所述 ：

每當將要發送Ajax請求時，jQuery都會觸發ajaxSend事件。 此時，將執行已向.ajaxSend（）方法注冊的所有處理程序。

基本上，每個ajaxsend事件都綁定3個函數。 為了實現您的想法，我建議以下幾點：

$(document).bind("ajaxSend", function(){
    $("#loading").hide();
    $("#loading-password").hide();
    $("#loading-address").hide();

  if ( settings.data === "first_form_data" ) {
    $("#loading").show();

  } else if (settings.data === "second_form_data"){

    $("#loading-password").show();

  } else if( settings.data === "third_form_data"){

    $("#loading-address").show();
  }
});

$(document).bind("ajaxComplete", function(){
  if ( settings.data === "first_form_data" ) {
    $("#loading").fadeOut("slow");

  } else if (settings.data === "second_form_data"){

    $("#loading-password").fadeOut("slow");

  } else if( settings.data === "third_form_data"){

    $("#loading-address").fadeOut("slow");
  }
});

基本上，我將單個函數綁定到事件並檢查數據以了解已提交的表單。 ajaxComplete也是ajaxComplete 。

在ajaxSend文檔頁面中，他們使用URL來發現哪個呼叫正在發送數據，但就您而言，只要我理解，它們將無法正常工作，因為它們都使用相同的路由。 查看settings對象以獲取更多信息以發現正確的表單。

Answer 2

好的，然后我解決了問題。

   $(document).ready(function(){
$("#loading-password").hide();
$("#loading-address").hide();
$("#loading").hide();

});



$('#main-info').submit( function() {
$(this).children(".main-div").children("#loading").show();
});
$('#edit-password').submit( function() {
$(this).children(".main-div").children("#loading-password").show();
});
$('#edit-address').submit( function() {
$(this).children(".main-div").children("#loading-address").show();
});

這里我已經完全刪除了ajax事件並選擇了表單提交事件。現在當我提交將分別觸發ajax加載器圖像的表單時，請記住在每個表單下都有div類main-div和我的ajax loader div在這個div內，現在開始搖擺。