geeky

jQueryUI dialog as loading screen (replace blockUI)

Dodo

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 &amp;&amp; '' != waiting.message ? waiting.message : 'Please wait...');
	$("#loadingScreen").dialog('option', 'title', waiting.title &amp;&amp; '' != 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.

18 thoughts on “jQueryUI dialog as loading screen (replace blockUI)”

  1. Why does this not always work? I am using it with document ready but only the right combination of a syncronous ajax call and some intermediary DOM manipulation before calling my asyncronous ajax routine makes it work as expected. It’s like the browser doesn’t have enough time to actually render while the ajax calls are going on and so by the time the code is done running, it’s time for the box to close. The user may see a flash of the dialog but not before a long pause where my unorderd list shows before it gets tabbed.

    Reply

  2. Simply show the loading screen by calling
    1 waitingDialog({});

    or with custom title & message
    1 waitingDialog({title: “Hi”, message: “I’m loading…”});

    Call
    1 closeWaitingDialog();

    Where are them at?

    Reply

  3. Hi there!!

    I’ve looking for a tutorial of this kind. My intention was just this one:
    provide my project’s pages a “preloading page”. I am trying to figure out how to modify your tutorial in order to close the message when the page completely loads.

    How can i do it?

    I have done from step 1 to step 3, but i do not know where to introduce “closeWaitingDialog();”.

    So my question is symple: Where can I put “closeWaitingDialog();” in order to close waiting dialog when my page loads completely?

    Thanks in advance.

    Reply

    1. hmm loading screen is meant to be used with ajax calls. are you using ajax calls? you call load before your ajax call and call closeWaiting in the callback function of your ajax call.

      Reply

      1. To be honest, i’m not very used to using ajax/jquery… Perhaps i can’t use it for my intentions… I do ajax call between and , and the closeWaiting() at the bottom of the html. I’ve tried to test the example in a html test-aimed page, but it doesn’t work :S.

        I wish i knew where to place these two calls, because for me (that im not an expert in terms of Javascript) is one of the hardest thing to learn..

        Thanks!

        Reply

  7. Hello there.
    Thank you for your post.
    Inspiring just when i wanted something like this 🙂
    May I add another thing to your example?
    Not always we want the title to appear in the dialog (we just need the spinning thingy and some text).
    For that, it is enough if you add to your css:

    .loadingScreenWindow .ui-dialog-titlebar {
    display: none;
    }

    And a question:
    Any luck or solutions to simulate .blockUI on a certain div?

    Reply

  10. However, one more minor problem, everything works except that the css to hide the close “x” on the loading screen has no effect. The “x” is still there. Any ideas why this might be?

    Reply

Leave a comment