如何使用ajaxStart和ajaxStop顯示/隱藏帶進度條的div？

在編程方面，我很新，所以也許這是在公園裏散步的時間。我想創建一個帶進度條的.gif圖像的div，其中只有在按下按鈕時纔會顯示div，例如將某些設置保存到數據庫。如何使用ajaxStart和ajaxStop顯示/隱藏帶進度條的div？

此函數將在GUI中隨處使用，並且每次對數據庫進行查詢時都會使用此函數。我使用jQuery UI進行編碼，我建議使用ajaxStart（）和ajaxStop（），但不能完全弄清楚如何正確使用它。下面的代碼只是我寫的一些代碼，我認爲我會以某種方式在正確的軌道上，但很可能不會。

----- -----腳本

$(document).ready(function(){ 
     $("#progressContainer").ajaxStart(function(){ 
     $(this).html("<img src='ajax-progressbar.gif' />"); 
     }); 
     $(".clickForProgressBar").click(function(){ 
     $("#progressContainer").load(""); 
     }); 
    });

----- ----- HTML

<button class="clickForProgressBar">Click here</button> 
<div id="progressContainer"></div>

如果有人可以嘗試和給我一些提示如何繼續我將永遠感激。如果你完全可以理解我的意思開始;）

來源

2012-12-21 annie

在點擊按鈕之前，HTML中是否存在'＃progressContainer'？你的問題和代碼暗示你也需要創建'div'。 –

另外，你的按鈕類的命名與JS中的類名不同。 –

是的，存在這個名字的div。忘記了這一點，與按鈕相同。現在糾正了。謝謝 – annie

這裏是一個方法來做到這一點的大綱。

首先，由於這是一個應用程序範圍的策略，因此創建一個Ajax包裝器並將該包裝器用於所有調用。

接下來，在封裝器中，在向服務器發出實際調用之前顯示圖像。

最後，當呼叫返回（出於任何原因）時，請在繼續之前隱藏圖像。

要記住的一個問題是你想如何處理圖像容器。例如，如果它將位於div標籤中（如上所述），則可能需要傳遞div標籤的id作爲調用的一部分，以確保不同的div標籤或展示位置仍然有效。或者，您可以使用在內容上彈出並顯示圖像的模式窗口。這樣可以節省你不必使用div標籤，也不會對頁面的佈局做任何假設，儘管它可能更突出（這可能是一件好事，取決於你在做什麼）。

來源

2012-12-21 13:38:35 RonaldBarzell

如何使用ajaxStart和ajaxStop顯示/隱藏帶進度條的div？

回答

相關問題