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 ?

score 2 · Accepted Answer · answered Nov 30 '09 at 02:38

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.

answered Nov 30 '09 at 02:38

Chris Williams

11,647
15
60
97

The one thing you don't want is for the user to (always) see the dialog because that sends the wrong message. Best is to set a timeout to show after say 2 seconds. – griegs Nov 30 '09 at 02:42
how do you have this image show up in the middle of the screen. i have a big html table on the screen so showing it at the top or bottom looks strange . . – leora Nov 30 '09 at 02:43
1

There is a Center plugin you can use which I use in my timeout dialog. It's on the main jQuery site. – griegs Nov 30 '09 at 02:44
Take a look at this other question I answered with sample code: http://stackoverflow.com/questions/1802734/html-php-progress-bar/1804944#1804944 – Chris Williams Nov 30 '09 at 02:59
griegs - do you know if any of the center plugins gray out the background ?? – leora Nov 30 '09 at 03:11

score 1 · Answer 2 · answered Nov 30 '09 at 02:37

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.

score 0 · Answer 3 · answered Nov 30 '09 at 03:22

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>

It looks like they are targeting MVC from the tags, so the webform stuff isn't applicable here. — Jace Rhea, Nov 30 '09 at 04:23

score 0 · Answer 4 · edited May 23 '17 at 12:30

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

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

4 Answers4