Loading...

You've probably seen PowerSchool's "loading..." popup window. It's not a progress bar, but it at least gives some feedback to the user that something is happening...

You can use this loading dialog in your own custom javascript-powered customizations with just a few lines of code. You don't need to include any special javascript files or create any complex functions. The functionality is already built-in to your PowerSchool install.

Opening the loading... popup

To open the loading dialog, simply call the loadingDialog() function.

loadingDialog();

This will open the loading dialog...but be warned...it will also make it so that your user can not do anything else on your PowerSchool site until you close the dialog box...and there's no way for the user to close the loading dialog...

Closing the loading... popup

You have to close the loading dialog before your user will be able to use the site again. Doing so is just another simple javascript function call.

closeLoading();

Calling this function will immediately close the loading dialog and return control to your user.

Putting it all together

Why would you need to do this?

Well...in our implementation of PowerSchool, we often use AJAX to load data asynchronously. These ajax calls can sometimes take a while to complete. While the script is doing its work it's often helpful to display the "loading..." dialog so the user knows that something is going on.

Here's an example that on page load does an ajax call for some data, but first it fires off the loading dialog and then closes the loading dialog once the ajax data has been received.