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

Question

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 ?

Answer 1

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.

Answer 2

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.

Answer 3

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>

Answer 4

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