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:

image






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

12 comments:

Bryan Buchs said...

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');
}

Unknown said...

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 :'(

Unknown said...

wow, blogger comments suck. there's supposed to be a tag in the selector there like

$("<div>")

Anonymous said...

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 Agarwal said...

Nice tip Bryan!

Thanks ajpiano and potato for your comments. I usually avoid iframes, but for those who use, that post could be useful

AdvanCode said...

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 Agarwal said...

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.

Anonymous said...

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

olutosin said...

Hello All,
How can I call this dialog on button click instead of page load?

Thanks in advance.
Tosin

Yuvraj Dhamdhere said...

Hello,
My query is:
How can we pass queryString from page URL ?
Please help me to solve this query.

Thanks and Regard,
Yuvraj

Qaiser Shah said...

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?

Unknown said...

Could you please advice us how to shown my blogspot post into a modal with jquery or javascript or clean css?