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
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
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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.
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.
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
$( "#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
jQuery
jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.
19K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER
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