jQuery的.post或ui對話框有一個「請稍候...」。圖標選項？

當我點擊一個鏈接，我有一個JavaScript函數中的jQuery .post調用。這會調用一個控制器動作，它返回一個部分結果到一個jQuery UI對話框中。jQuery的.post或ui對話框有一個「請稍候...」。圖標選項？

此過程可能需要幾秒鐘，因爲控制器調用模型進行一些計算等。。

無論如何，有無論如何顯示一個「請稍等......」。或點擊鏈接後的動畫圖標，直到顯示對話框？

來源

2009-11-30 leora

從ajaxload.info獲取ajax加載圖片。將它放在頁面上的隱藏div中，然後在發生Ajax事件時顯示div。 ajax調用完成後再次隱藏。

來源

2009-11-30 02:38:12

是的，我正要添加對http：//www.ajaxload的評論。信息/好的！ – 2009-11-30 02:40:50

你不想要的一件事是讓用戶（總是）看到對話框，因爲它發送了錯誤的信息。最好的是設置一個超時時間，例如2秒後顯示。 – griegs 2009-11-30 02:42:58

您如何將此圖像顯示在屏幕中間？我在屏幕上有一個很大的html表格，所以在頂部或底部顯示它看起來很奇怪。。 – leora 2009-11-30 02:43:55

我已經實現了這一點，通過創建一個JavaScript超時，然後顯示一個請等待div，當jquery返回時隱藏。

我的JS看起來像; ;;

function ClearTimeoutError(timeoutId) { 
    clearTimeout(timeoutId); 
    if ($('.timeout').is(':visible')) { $('.timeout').fadeOut(100); }; 
}

這是在我的方法，jQuery的回發。已經把所有非必要的代碼拿出來了。

var timeoutId = setTimeout(function() { $('.timeout').center(); $('.timeout').fadeIn(250); }, 2000); 

    $.ajax({ 
     type: "POST", 
     . 
     . 
     . 
     success: function(msg) { 
      ClearTimeoutError(timeoutId);

可以通過同時創建另一個超時，它可以隱藏請稍候格時，它只是採取的方式太長，則顯示錯誤的div或東西得到snazzier。

來源

2009-11-30 02:37:02 griegs

當使用ASP.NET AJAX庫時，我可以通過向PageRequestManager註冊show方法和hide方法來註冊模態異步指示器。

比如我下面的代碼放置在我的母版頁

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" 
    TagPrefix="cc1" %> 
... 
<style> 
.modalBackground { 
    background-color: #efefef; 
    filter: alpha(opacity=70); 
    MozOpacity: 0.7; 
    opacity: 0.7; 
} 
.updateProgress div { 
    border-width: 1px; 
    border-style: solid;  
    background-color: #ffffff; 
    position: relative; 
    top: 30%; 
    text-align: center; 
    padding: 5px 5px 5px 5px; 
} 
</style> 
... 
<asp:Panel ID="pnlUpdateProgress" runat="server" 
    CssClass="updateProgress" 
    style="display: none; height: 0;"> 
<div> 
    <asp:Image ID="commentViewThrobber" runat="server" 
      ImageAlign="AbsMiddle" 
      AlternateText="Please Wait..." 
      ImageUrl="~/images/throbber-slow.gif" 
      EnableViewState="false" /> 
    Please wait... 
</div> 
</asp:Panel> 
<cc1:ModalPopupExtender ID="ModalProgress" runat="server" 
    TargetControlID="pnlUpdateProgress" 
    BackgroundCssClass="modalBackground" 
    PopupControlID="pnlUpdateProgress" />

並註冊下面的啓動腳本：

<script language='JavaScript' type='text/javascript'> 

var ModalProgress ='<%= ModalProgress.ClientID %>' 
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);  

function beginReq(sender, args) { 
// shows the Popup  
$find(ModalProgress).show();   
} 

function endReq(sender, args) { 
// hides the Popup  
$find(ModalProgress).hide(); 
} 

</script>

來源

2009-11-30 03:22:13 havana59er

它看起來像是從標籤中定位MVC，所以webform的東西在這裏不適用。 – 2009-11-30 04:23:34

如果你想有一個全球性的「jQuery是做AJAX的東西「處理程序，jQuery有一些global ajax events，你可以聽。他們是觸發諸如Chris暗示的東西的好地方。

編輯如果您正在尋找一種很好的灰屏方式，我在過去曾成功使用SimpleModal。不要忘記在你的選項中通過close：false，但你可能不希望用戶關閉你的Please Wait消息:-)

來源

2009-11-30 03:34:27

jQuery的.post或ui對話框有一個「請稍候...」。圖標選項？

回答

相關問題