how to show a modal Loading ... while a ajax request $.get/$.post is running ?

Question

I have a web application in asp.net, mvc and sometimes my ajax request might take more than 1 second.

So I need to show a big div over the entire page (Loading...) while this request is working and to hide it when it's finished.

Does anybody know how to do this ?

Answer 1

For jQuery AJAX, check out the API documentation: http://api.jquery.com/category/ajax/

Fo blocking the screen check out this plugin: http://malsup.com/jquery/block/#

The demo page for this site ( http://malsup.com/jquery/block/#demos ) will give you an idea of how to use it.

Answer 2

Also, checkout the Dialog plugin from the JQuery UI library. This will allow you to display a dialog, containing whatever 'Please wait' message that you want, and also blocks the rest of the page, to ensure that the user can't interact with it. The dialog can the be removed when the AJAX operation completes.

You can even make this generic, by binding to the .ajaxStart and .ajaxStop events to automatically show/hide the dialog for all AJAX operations.

Answer 3

I'm using jQuery throbber plugin: http://plugins.jquery.com/taxonomy/term/379

it's pretty simple and easy to integrate. Can be running manually and can be attached for ajax events automatically.