Tuesday, March 8, 2011

Showing a Loading image spinner while a JQuery UI Dialog is loading

If you are using JQuery UI extensively in your project and using its cool widgets like Jquery dialog popup etc. then this post will be helpful for you.
If you are rendering some heavy HTML data in JQuery dialog, then there might be some delay in loading of that dialog. It would be nice if some cool (Ajax loading) spinner image  is displayed to user until it is rendered. Now this thing can be done in many ways but simplest of them all is the one described below:

Say, you are loading the dialog on the div element 'popUpDiv'