So you've decided to use javascript to do everything now and you are discovering the dark side of things. That your process takes awhile and it creates a choppy user experience on the UI end. You want the user to know something is happening but your javascript will run whatever it wants in whatever order it wants. This makes making a modal popup difficult unless you have just the right code.

 For starters let me just say I tried the off the shelf solutions and found them to be either too heavy or worthless. So I wrote my own few lines of code that deal with the issue. You will need jQuery for this to work:

 First make a hidden div in your html you want to popup to show to the user something is happening. Mine looks like this:

<div id="loading" class="hide"><img src="/content/images/animation.gif" alt="Loading Image" border="0" /><br />Data is Loading...</div>

You can obviously replace the image to whatever you want. If you are ambition you can use javascript to dynamically load the content. The css to get this div to appear in the center looks like this:

Again you can change what you want here but this gets it to appear in the center of the screen. Now for the good part, the javascript that makes the magic happen:

The ajaxstart and stop functions were built for purposes like this. It makes sure to fire off the script before the process starts and after. You can drop this code snippet right into your long running function and it should work like a charm. Just make sure to load jQuery first or else you will get errors.