thecrumb

developer | thinker | tinkerer

Simple Loading Dialog w/jQuery UI


In my current project I am displaying large PDF forms to the user. Depending on the size of the form - it can take a moment or two for the PDF to load.

Instead of the user looking at a blank screen I created a small dialog using jQuery UI.

Now instead of seeing this:

Blank Screen

You see a nice modal dialog with an animation...

jQuery UI Dialog

I wanted the dialog to display when the user clicked on the link to the PDF.

First I added an 'opener' class to my links:

:::html PDF File

Getting a basic dialog box with jQuery is easy...

:::javascript $(document).ready(function() { var $dialog = $('

') .html('Please be patient while the PDF file loads. This may take a moment depending on the size of the PDF and the speed of your network connection.') .dialog({ autoOpen: false, Title: 'Loading PDF File...' }); $('.opener').click(function() { $dialog.dialog('open'); }); });

Simple Dialog

To spruce things up I added a small PDF icon and 'spinner' graphic from AjaxLoad.

Note: the spinner _isn't _tied to the load time but gives the impression to the user 'something' is happening.

:::javascript $(document).ready(function() { .html('PDF IconPlease be patient while the PDF file loads. This may take a moment depending on the size of the PDF and the speed of your network connection.

')

Fancy Dialog

The final touch was making the dialog 'modal' and fading the background. This was done by adding a simple 'modal' attribute:

:::javascript $(document).ready(function() { .dialog({ autoOpen: false, Title: 'Loading PDF File...', modal: true });

With a bit of CSS to style to UI element:

:::csss .ui-widget-overlay { background: black; filter: alpha(opacity = 50); left: 0; opacity: 0.5; position: absolute; top: 0; }

This gives me the faded background...

jQuery Dialog

Now when the user clicks on a PDF link the dialog pops up and stays there until the PDF is loaded.

Quick tip:  to prevent your link from actually firing you can modify the script by adding a 'r_eturn false_;' which will prevent the defaulk link action from occuring which is useful while you test:

:::javascript $('.opener').click(function() { $dialog.dialog('open'); return false; });


Sorting It Out (more readable code) Quick ValidateThis Gotcha

More like this...