DevCurry: Load a Page Dynamically inside the jQuery UI Dialog

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:

12 comments:

Bryan BuchsJune 24, 2010 at 9:36 AM
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');
}
UnknownJune 24, 2010 at 11:33 AM
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 :'(
UnknownJune 24, 2010 at 11:34 AM
wow, blogger comments suck. there's supposed to be a tag in the selector there like

$("<div>")
AnonymousJune 24, 2010 at 1:57 PM
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
Suprotim AgarwalJune 25, 2010 at 3:29 AM
Nice tip Bryan!

Thanks ajpiano and potato for your comments. I usually avoid iframes, but for those who use, that post could be useful
AdvanCodeJune 30, 2010 at 6:25 AM
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.
Suprotim AgarwalJune 30, 2010 at 6:45 AM
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.
AnonymousFebruary 13, 2011 at 8:35 PM
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
olutosinMay 24, 2012 at 8:48 AM
Hello All,
How can I call this dialog on button click instead of page load?

Thanks in advance.
Tosin
Yuvraj DhamdhereJuly 11, 2013 at 2:09 AM
Hello,
My query is:
How can we pass queryString from page URL ?
Please help me to solve this query.

Thanks and Regard,
Yuvraj
Qaiser ShahMay 27, 2014 at 2:21 AM
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?
UnknownNovember 10, 2014 at 10:15 PM
Could you please advice us how to shown my blogspot post into a modal with jquery or javascript or clean css?