Question

I have a progress div which absolute positions across the top of the web page.

When I click on a Ajax.ActionLink, sometimes I see it flicker at the top when the request/response is just short of instant.

How can I add a delay so that the progress banner does not show for 500ms?

thank you

Here is the working code

var showProgress = false;
function AjaxBegin()
{
    showProgress = true;
    setTimeout("if (showProgress) { $('#progress').show(); }", 800);

}
function AjaxComplete()
{
    showProgress = false;
    $("#progress").hide();
}
function AjaxFailure(ajaxContext)
{
    var response = ajaxContext.responseText;
    alert("Error Code [" + ajaxContext.ErrorCode + "] " + response);
}

AjaxOptions

InsertionMode = InsertionMode.Replace;
OnFailure = "AjaxFailure";
OnBegin = "AjaxBegin";
OnComplete = "AjaxComplete";
HttpMethod = "GET";

Answer 1

You will need to handle this yourself.

Rather than specifying a AjaxOptions.LoadingElementId you can handle the showing/hiding of your loading element by specifying functions for the OnBegin (show it) and OnComplete (hide it) events.

See http://msdn.microsoft.com/en-us/library/dd460351.aspx for more details on AjaxOptions.

There are a few ways of creating the delay – see How to wait 5 seconds with jQuery?

And here’s an example that does it with jQuery – delay the showing of a ajax loading gif using jQuery