ansaurus

Question

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

Answer 1

+8 A:

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.

Seb 2009-03-26 22:33:37

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

Josh Stodola 2009-03-26 22:35:05

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

Seb 2009-03-26 22:42:01

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.

Oleg Barshay 2009-03-26 22:46:40

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

Seb 2009-03-26 22:51:21

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.

Oleg Barshay 2009-03-26 22:54:23

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.

Seb 2009-03-26 23:41:18

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

Seb 2009-03-26 23:43:15

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 2009-03-26 23:55:35

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.

Oleg Barshay 2009-03-26 23:59:12

Answer 2

A:

Hi gyus,

If I just want to have the dialog closed when the page's finished loading - instead of a fixed delay. How would you do that?

thanks G

2010-03-29 12:22:01

ansaurus

tags:

views:

answers:

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

related questions