I like being able to manually control my loading screen with my ajax calls. Previously I was using the blockUI jQuery plugin. It’s a great plugin. You may turn an overlay on your entire screen or just a layer on or off by simply calling
$(selector).block();
and
$(selector).unblock();
Since at work they are hosting the jQueryUI package, I thought it’s a good idea to use as a few external plugins as possible. So I worked on using the jQueryUI dialog widget as the blockUI plugin. My goal is to replace the $(selector).block() and $(selector).unblock() conveniences. I think I got pretty close.
Click for a jQueryUI dialog as loading screen demonstration.
Step 1:
Create a layer in my html to be used as the loading screen.
<div id="loadingScreen"></div>
Step 2:
Style the loading screen with a nice loading icon. Want more customized loading icons? Check out the ajax loading icons site.
#loadingScreen {
background: url(../images/loading.gif) no-repeat 5px 8px;
padding-left: 25px;
}
Step 3:
Create a js file so I can include on all of the pages where I need the loading screen.
$(document).ready(function() {
// create the loading window and set autoOpen to false
$("#loadingScreen").dialog({
autoOpen: false, // set this to false so we can manually open it
dialogClass: "loadingScreenWindow",
closeOnEscape: false,
draggable: false,
width: 460,
minHeight: 50,
modal: true,
buttons: {},
resizable: false,
open: function() {
// scrollbar fix for IE
$('body').css('overflow','hidden');
},
close: function() {
// reset overflow
$('body').css('overflow','auto');
}
}); // end of dialog
});
function waitingDialog(waiting) { // I choose to allow my loading screen dialog to be customizable, you don't have to
$("#loadingScreen").html(waiting.message && '' != waiting.message ? waiting.message : 'Please wait...');
$("#loadingScreen").dialog('option', 'title', waiting.title && '' != waiting.title ? waiting.title : 'Loading');
$("#loadingScreen").dialog('open');
}
function closeWaitingDialog() {
$("#loadingScreen").dialog('close');
}
Step 4:
It’s kind of annoying I think that the dialog widget doesn’t give you a ‘closable’ option. Because I don’t want my loading screen to be closable, the only way I could figure out to get rid of the little ‘X’ on the upper right corner of the title bar is to give your dialog a css class and then hide the ‘X’ using the css below:
/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
Simply show the loading screen by calling
waitingDialog({});
or with custom title & message
waitingDialog({title: "Hi", message: "I'm loading..."});
Call
closeWaitingDialog();
to hide the loading screen.
Click for a jQueryUI dialog as loading screen demonstration.
Ajax Call
Someone asked for an example of how to utilize the loading screen in an ajax call.
waitingDialog({});
$.ajax({
url: "testAjax.php",
success: function(data){
$('#data').html(data);
closeWaitingDialog();
}
});
Click for a jQueryUI dialog as loading screen demonstration with AJAX call.
Like this:
Like Loading...
