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



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

11 Responses to "Load a Page Dynamically inside the jQuery UI Dialog"
  1. Bryan Buchs said...
    June 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');
    }

  2. ajpiano said...
    June 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 :'(

  3. ajpiano said...
    June 24, 2010 at 11:34 AM

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

    $("<div>")

  4. potato said...
    June 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

  5. Suprotim Agarwal said...
    June 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

  6. AdvanCode said...
    June 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.

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

  8. Anonymous said...
    February 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

  9. tosin said...
    May 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

  10. Yuvraj Dhamdhere said...
    July 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

  11. Qaser Shah said...
    May 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?

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions