does jquery .post or ui dialog have a "please wait . ." icon option?

when开发者_运维百科 i click on a link, i have a jquery .post call in a javascript function. This calls a controller action which returns a partialresult into a jquery ui dialog.

this process can take a few seconds as the controller calls the model for some calculations, etc . .

anyway, is there anyway to display a "Please wait . ." or animated icon from the time after the link is clicked up until the dialog is displayed ?

---

Grab an ajax load image from ajaxload.info. Put it in a hidden div on your page and then show the div while the Ajax stuff is happening. Hide it again when the ajax call is done.

---

I have implemented this by creating a javascript timeout which then shows a please wait div which is hidden when the jquery returns.

My JS looks like;;

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

This is in my method that does the jQuery postback. Have taken all the non essential code out.

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

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

You can get snazzier by also creating another timeout which hides the please wait div when it's just taking way too long and then display an error div or something.

---

When using the ASP.NET AJAX library I could register a modal async indicator by registering a show method and a hide method with the PageRequestManager.

For example I would place the following code in my master page

<%@ 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" />

And register the following as a startup script:

<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>

---

If you want a global "jquery is doing ajax stuff" handler, jQuery has some global ajax events that you can listen to. They're a good spot to trigger something like what Chris suggests.

edit And if you're looking for a nice way to grey out the screen, I've had success with SimpleModal in the past. Don't forget to pass close:false in your options though, you probably don't want the user closing your Please Wait message :-)