The jQuery UI Dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.
Let us see how to load content dynamically inside this Dialog
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load Page Dynamically inside a jQuery UI Dialog</title>
<link rel="Stylesheet" type="text/css" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
" />
<script type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js">
</script>
<script type="text/javascript">
$(function () {
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('Sample.htm');
},
height: 400,
width: 400,
title: 'Dynamically Loaded Page'
});
});
</script>
</head>
<body>
</body>
</html>
As you can see, we are creating a div element on the fly and specifying a callback for the open event, which loads the content of the page ‘Sample.htm’ dynamically.
Update: As commented by AdvanCode, opening and closing the dialog multiple times will not remove the dialog from the page. If you want to implement the close event, use this code in the dialog options (untested code):
close: function(e, i) { $(this).close(); }
That’s all! The output, when the page loads, is as shown below:
Tweet
About The Author
12 comments:
That will work, but if the dialog is closed and re-opened, the Sample.htm file will be fetched from the server again and again.
Wrapping the $.load function in an empty test would fix that:
if ($(this).is(':empty')) {
$(this).load('Sample.htm');
}
Nice post! I've always been partial to the following approach:
$("").load("foo.php",function() {
$(this).dialog(opts);
});
OBVIOUSLY i would never load anyhing in to a bloody B tag, but I can't type a div or span tag into this blogger comment box :'(
wow, blogger comments suck. there's supposed to be a tag in the selector there like
$("<div>")
alternatively you can create an iframe and open it instead of a DIV.
Example of this: http://clarkupdike.blogspot.com/2009/03/basic-example-of-jquerys-uidialog.html
I find it a better idea for keeping forms stateless, since jqueryUI forms are hard to reset
Nice tip Bryan!
Thanks ajpiano and potato for your comments. I usually avoid iframes, but for those who use, that post could be useful
Problem is that the dialog is never removed from the page, so if you open & close it 10 times you'll see 10 new DIVs in DOM (hidden with 'display:none').
Implement 'close' event to remove itself.
Yes that's a good point. I have added some extra code to the original post. Unfortunately, I have not been able to test it out.
The code to remove the dialog should be $(this).remove() and not $(this).close()
Here's working code that is tested :
http://stackoverflow.com/questions/1608249/how-to-load-a-page-with-jquery-ui-dialog/4988832#4988832
Hello All,
How can I call this dialog on button click instead of page load?
Thanks in advance.
Tosin
Hello,
My query is:
How can we pass queryString from page URL ?
Please help me to solve this query.
Thanks and Regard,
Yuvraj
hi
If I want to load only some text in the dialog box rather than whole html page, then what will I do for this?
Could you please advice us how to shown my blogspot post into a modal with jquery or javascript or clean css?
Post a Comment