1. 首頁
  2. 問答
  3. 如何防止用戶在等待Ajax響應時的交互

如何防止用戶在等待Ajax響應時的交互

2010-02-02 47 views
7

這種情況就像：我正在使用Jquery實現一些Ajax功能。例如：當用戶點擊「獲取數據」按鈕時，Jquery將調用.ajax函數從服務器獲取一些數據。這個過程可能需要一些時間，所以我添加了.ajaxSend和.ajaxComplete函數來爲等待過程顯示一些動畫（實際上是一個帶有z-index：999的div中的「加載數據」gif，成爲其他div的頂部。 ）。 在等待過程中（'加載數據'），我想阻止用戶點擊其他按鈕（例如：我有其他標籤，小'加載數據'gif下的按鈕）。 我實現這一點的方法是：如何防止用戶在等待Ajax響應時的交互

$("body").ajaxSend(function() 
    { 
     $(this).append('<div id="loading">Data Loading<\/div>'); 
     $("div#error").remove(); 
     $(this).children().not('#loading').css({'opacity':0.22}); 
    }); 
    $("body").ajaxComplete(function() 
    { 
     $("div#loading").remove(); 
     $(this).children().not('#loading').css({'opacity':1}); 
    });

不過，我不認爲改變不透明度是最好的方式。除非將不透明度設置爲0，否則用戶仍然可以單擊其他按鈕/選項卡。我不知道如何在這個過程中完全避免任何用戶交互？謝謝！！

來源

2010-02-02 WilliamLou

回答

5

使用重疊。

http://jqueryui.com/demos/dialog/#modal

來源

2010-02-02 19:31:41

+0

實際上，我也使用JqueryUI。是的，我只是嘗試了對話框的模式選項。很容易達到我想要的效果。但是，有沒有辦法刪除對話框右上角的交叉（關閉按鈕）？ – WilliamLou 2010-02-02 19:56:33

+0

看到這個http://stackoverflow.com/questions/896777/remove-close-button-on-jqueryui-dialog – 2010-02-02 20:02:25

+0

謝謝。我選擇這個作爲我的答案，因爲我已經使用JqueryUI，這樣我就不必爲blockUI效果導入另一個插件 – WilliamLou 2010-02-02 23:05:33

5

設爲可見一個div的z-index高於一切。 onsucess，隱藏它。

對於IE6，考慮的選擇輸入

來源

2010-02-02 19:31:40 Alfabravo

+0

我希望我可以upvote（但我在接下來的幾個小時內），特別是IE6的警告並形成元素。 – Sampson 2010-02-02 19:34:27

6

我用的jQuery UI座在過去良好的成功的知名度。使用Ajax效果很好：

http://malsup.com/jquery/block/

可以使用插件像這樣，而不是handcoding類似的解決方案......

來源

2010-02-02 19:31:46

+0

好吧，這個插件很適合這個目的，但我不想在這個階段導入太多的插件。不管怎麼說，還是要謝謝你。如果我找不到更簡單的解決方案，我可能會在稍後轉向BlockUI。 – WilliamLou 2010-02-02 20:00:11

0

我在Ben Nadel's ajax pipeline上使用了一個變體。實際上，他將jQuery $ .ajax調用與可記錄傳出ajax請求的對象進行了包裝。

當ajax請求熄滅時，您將記錄請求名稱。如果有更多請求嘗試使用相同的名稱出去，則不執行它（可選地向用戶提供消息）。

來源

2010-02-02 19:41:24 womp

0

我試圖得到一個類似問題的答案，我最終在這裏。我知道這是一個古老的問題，但我想要解決的問題是，您希望阻止交互的元素之上的疊加層可以通過瀏覽器檢查器輕鬆刪除。

在我看來，處理這個問題的最好方法是爲整個頁面設置一個全局布爾變量，並在ajax沒有運行時（至少是敏感操作）只在頁面上執行動作，或者只是關閉ajax的異步調用，因爲事實上在這種情況下，你似乎並不需要它（儘管我知道有些人會因爲這樣說而把我釘死）。

來源

2015-03-02 04:47:49 user2755140

相關問題

 相關問題