1頁上的多個Ajax加載指標

我有一個頁面，有2個可以通過Ajax（jQuery）提交的獨立表單。對於這些表單中的每一個，我想向用戶顯示一個加載指示符。我發現了一段很好的代碼，可以很容易地顯示這些圖標，但只有在有一個表單時才能使用。1頁上的多個Ajax加載指標

$('.ajaxloader').hide().ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).hide(); 
});

ajaxloader是一個將加載圖像顯示爲CSS背景圖像的類。要使用它，我只需要添加如下內容：<span class="ajaxLoader">Busy ...</span>

當我測試這與我的頁面（有2個表單），並提交其中一個，然後兩個加載指標出現（這是非常明顯的）。現在我的問題是，如何顯示需要顯示的指標？我正在考慮給span標籤一個id屬性，但是我不知道如何繼續。我希望這是儘可能通用的，所以我不必硬編碼和重複代碼很多。

謝謝！

來源

2012-07-17 EsTeGe

具有u選中此??? http://apeatling.wordpress.com/2006/01/18/multiple-ajax-loaders/ – Nirmal 2012-07-17 10:03:32

您可以將「顯示加載指示器」回調附加到Ajax查詢本身，而不是像您當前的解決方案那樣執行「全部」操作。

像這樣的事情在你的$.ajax()電話：

$.ajax("/form1/target", { 
    beforeSend: function() { 
     $(".ajax-loader-1").show(); 
    }, 
    complete: function() { 
     $(".ajax-loader-1").hide(); 
    } 
});

（和一個類似你的第二個形式，只要被定義Ajax調用爲）

來源

2012-07-17 10:17:36

這可能是最簡單的方法。謝謝。 – EsTeGe 2012-07-18 13:00:50

您是否曾想過在提交表單並隱藏其他表單時啓動它？

$('.yourSubmitButton').click(function() { 
    $(this).parent().find('.ajaxLoader').show(); 
}); 

$('.ajaxloader').hide().ajaxStop(function() { 
    $(this).hide(); 
});

所以加載器會顯示，剛剛提交的形式（我假設你正在做一個按鈕或鏈接提交？）然後Ajax請求停止時都被再次隱藏在裏面。

來源

2012-07-17 10:16:28

單擊提交按鈕時顯示加載指示器並不能保證Ajax請求已經真正開始，所以它不會有意義才能顯示指標。（也許某些客戶端驗證阻止了表單的提交。） – 2012-07-17 10:25:15

好點，做得好=） – 2012-07-17 10:30:02

1頁上的多個Ajax加載指標

回答

相關問題