asked on

Make dialog open when document opens

I'm trying to get a jQuery dialog to run on the document load event.

I have this code:

<script>
      $( "#dialog" ).dialog({
                        width: 500
                  });
      $( "#opener" ).click(function(event) {
       event.preventDefault();
       $( "#dialog" ).dialog( "open" );
      });
      </script>

and this:

<div id="dialog" title="Welcome">Welcome to backflowtestreport.com, you are now ready to complete your first form!</div>

right after the <body> tag

I removed the autoOpen: false, from the $("#dialog) definition thinking it would case it to show on load.

Instead it shows like in the attachment. I want it to show in a dialog OVER the page content, not like it is.

How can I fix this?

Thanks

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Richard Korts

ASKER

That did it, I don't understand why.

It's better if I know why.

In another place, where it is linked to an a href being clicked, and autoOpen being off, it works perfectly. That code is like this:

<script>
$( "#dialog" ).dialog({
autoOpen: false,
      <? if ($type == "wide") { ?>
width: 500
      <? } else { ?>
      width: 300
      <? } ?>
});
$( "#opener" ).click(function(event) {
event.preventDefault();
$( "#dialog" ).dialog( "open" );
});
</script>

and

<div id="dialog" title="What's New"><? print $wn['content']; ?></div>

and

<a href="#dialog" id="opener"><b>What's New</b></a>

Thanks,

Richard

Chris Stanyon

Hey Richard,

The idea of wrapping code inside a Dom.Ready block is to defer execution until the page has fully loaded. If you don't do this, then your code will fire immediately and try to open the dialog before it's available and it will fail.

The reason it works with a click, is because by the time you click the link, the page has fully loaded, so the html for the Dialog has fully loaded.

Chris Stanyon

Technically, you should also wrap you click event in the DomReady:

$( "#opener" ).click(function(event) {

Otherwise what could happen, is that code will try and run before the #opener element has loaded. If this happens, then the code can't bind to anything and your click event won't work