Mvc3 Ajax.ActionLink and delaying LoadingElementId from showing

Question

I have a progress div that contains absolute positions at the top of the webpage.

When I click on Ajax.ActionLink, sometimes I see that it flickers at the top when the request / response ends instantly.

How to add a delay so that the progress banner does not appear for 500 ms?

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 deal with it yourself.

Instead of specifying AjaxOptions.LoadingElementId you can handle the display / hide of your load item by specifying functions for the OnBegin (show it) and OnComplete (hide) events.

For more information about AjaxOptions see http://msdn.microsoft.com/en-us/library/dd460351.aspx .

There are several ways to create a delay - see How to wait 5 seconds using jQuery?

And here is an example that does this with jQuery - delays the display of gj gifs using jQuery