Reputation: 207
I'm building a few webpages in my webapplication which use a webservice. While communicating with the webservice, which can take more than a few seconds, I want to display a loading screen. Something like the jquery dialog, where the background is disabled and a loading image appears in the middel of the webpage.
Is this possible and how can I do this?
Upvotes: 0
Views: 2770
Reputation: 73132
Take a look at the jqModal jQuery plugin - i use this extensively, for example when performing a single-sign-on with Facebook, i show a pretty "Connecting with Facebook" dialog (background is blanked out). very easy to use, and very extensible.
It's basically a hidden div on the page (absolute positioning), which gets shown and centered (and of course other cool effects, such as fading).
So you have full customization of this div - put an image, put an iframe, put a user control.
And it fully supports AJAX - so you can call your WS on load of this modal dialog to load the contents in.
Of course you could roll your own (old school popup, or overlayed image with appropriate z-index), but no point in re-inventing the wheel - especially when there are bucketloads of great solutions available.
Upvotes: 2
Reputation: 49195
I use blockUI plugin for such requirement. Its pretty simple and straight forward to use. For example:
$.blockUI({ message: '<h2>Loading</h2>' });
// call to the web service
And in success and failure callbacks of ajax request, include call to unblock
$.unblockUI();
Upvotes: 2