How do I display a jquery dialog box before the entire page is loaded?

javascript jquery jquery-ui progress-bar

12,171

You'll need to run that piece of code immediately after your <body> tag, something like:

<html>
  <head>
  </head>
  <body>
    <div id="please-wait"></div>
    <script type="text/javascript">
      // Use your favourite dialog plugin here.
      $("#please-wait").dialog();
    </script>
    ....
  </body>
</html>

Note I omitted the traditional $(function (){}) because you need this to be loaded as soon as the page is shown, not after the whole DOM is loaded.

I've done this before and works great, even if the page has not finished loading yet.

EDIT: you'll have to be certain the jQuery dialog plugin you're using is loading before your entire DOM loads. Usually this is not the case, you it won't work. In that case, you'll need to use a g'old plain JavaScript solution, such as Lightbox 1 or Lightbox 2.

12,171

Author by

Oleg Barshay

Founder of Barshay Software, Inc., a tiny ISV in Seattle, WA.

Updated on June 26, 2022

Comments

Oleg Barshay almost 2 years
On my site a number of operations can take a long time to complete.

When I know a page will take a while to load, I would like to display a progress indicator while the page is loading.

Ideally I would like to say something along the lines of:
```
$("#dialog").show("progress.php");
```
and have that overlay on top of the page that is being loaded (disappearing after the operation is completed).

Coding the progress bar and displaying progress is not an issue, the issue is getting a progress indicator to pop up WHILE the page is being loaded. I have been trying to use JQuery's dialogs for this but they only appear after the page is already loaded.

This has to be a common problem but I am not familiar enough with JavaScript to know the best way to do this.

Here's simple example to illustrate the problem. The code below fails to display the dialog box before the 20 second pause is up. I have tried in Chrome and Firefox. In fact I don't even see the "Please Wait..." text.

Here's the code I am using:
```
<html>
  <head>
      <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>

  </head>
  <body>
    <div id="please-wait">My Dialog</div>
    <script type="text/javascript">
      $("#please-wait").dialog();
    </script>
    <?php
    flush();
    echo "Waiting...";
    sleep(20);
    ?>
  </body>
</html>
```
Josh Stodola about 15 years

+1 Good answer. Beat me to it :) Note: the jQuery script will have to be loaded before this code executes (obviously)
tmsppc about 15 years

That's right, good point Josh. Once the jquery.js file is cached locally, it will be just a matter of milliseconds though :)
Oleg Barshay about 15 years

Well it seems that it should work but when I try it locally (Chrome and Firefox through Apache), the dialog box fails to pop up before the page loads. I will post sample code in my original question above.
tmsppc about 15 years

I've just updated my answer. See the last paragraph; that might give you the final answer you're looking for.
Oleg Barshay about 15 years

Your edit implies that it takes longer than 20 seconds for me to fetch and process the JQuery script? Even if I set the sleep to be 100 seconds, the dialog still fails to display.
tmsppc about 15 years

No, my edit says that your jQuery dialog plugin probably won't load until the whole page loads. Also, take into consideration you might not be sending nothing to the browser in your example: buffering might be happening server-side, so won't get anything with your example.
tmsppc about 15 years

My answer will work for an extensive HTML markup when it's sent to the browser (not being retained by the server caching mechanism), or external files being loaded, or any additional JS processing
Oleg Barshay about 15 years

I must be missing something, there may be a server-side buffering issue but I have tried inlining all of the javascript and disabling any buffering in the server configuration together with calls to flush(). Still the dialog only appears after the sleep() is over.
Oleg Barshay about 15 years

Interestingly, after inlining the javascript, the dialog does appear when the script is loading in IE and Firefox just not in Chrome. I wonder if the issue is browser-related. I will accept your answer and work on getting this thing working in a more deterministic manner.