“Please Wait” message using jQuery or AJAX?

I am creating an enterprise web template to be used for development of all our web applications. Many of our existing applications take a while to load because of the amount of data and geographic distance of the data source, so users frequently click the same buttons and links twice.

I plan to add a Please Wait message to come up when the page is posting back. I figured there are two obvious ways to do this:

1. AJAX Tools

Using the AJAX UpdatePanel and progress loader, I can easily show a message on each postback with very little, if any, additional code.

My concern with the AJAX method is that, because this is very generic template, I would have to wrap the whole page in an update panel. From experience with the ASP.NET 3.5 AjaxToolKit, the update panel affects postbacks and JavaScript code in funky ways. Also, I think UpdatePanels are heavy and increase the amount of time needed to load the session or application.

2. jQuery

Using jQuery, I can bind a method that shows the message to each $(':submit').click() {} event. The page would automatically hide the message by reloading at the end of the post back.

I don't have major concerns with the jQuery method. It would require extra coding to work correctly with field validators. Not using the UpdatePanel also means the whole page is reloaded on every postback, which might not be the best method. It would also have to be delayed a few seconds before the 'Please Wait' message appears so that it doesn't appear for very small events that do not need such a message.

Which is the better way to show a Please Wait or Loading message? I am concerned with speed and reliability, but if there are other measures of success that you feel are noteworthy, feel free to say so.

回答1:

Definitely #2. Adding an UpdatePanel is a whole can of worms, and if you're not using them already on a given page, adds a lot of overhead.

The code involved in using jQuery to do this is trivial. There's a nice little plugin called blockui that can be used to render an effect and disable all controls on an area. It's not too hard to do this without the plugin either, but why reinvent?

回答2:

With the UpdatePanel, there is an UpdatePanelProgress control to display to the user a progress status message. With JQuery, you can display an element with the please wait message on button click, and attach a generic handler to the ajaxComplete, this callback fires when the AJAX request completes and then you can hide it.

HTH.

回答3:

If you're using jquery, just use ajaxStart / ajaxStop.