Example of JQuery UI Dialog With Dynamically Loading an URL with an IFRAME

The jQuery UI dialog is easy to get started with but has a few areas that causes new users some trouble. One of the most commonly asked questions on the jquery-ui list is “how to load iframe (other webpage) in dialog?” In this article I’ll explain how to load Dynamically URL with an IFRAME in Query UI Dialog.

Demo

Demo

First, we create link to page which we want to open into dialog.

<a id="pop" href="http://www.ashishblog.com" title="Ashish Blog" >AshishBlog</a>

Now, we create dialog on link’s click event and get link href and title to diaplay in dialog.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Dialog Demo - Ashish's Blog</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $('a#pop').live('click', function (e) {
                e.preventDefault();
                var page = $(this).attr("href")
                var pagetitle = $(this).attr("title")
                var $dialog = $('<div></div>')
                .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
                .dialog({
                    autoOpen: false,
                    modal: true,
                    height: 625,
                    width: 500,
                    title: pagetitle
                });
                $dialog.dialog('open');
            });
        });
    </script>
    </head>
    <body>
     <a id="pop" href="http://www.ashishblog.com" title="Ashish Blog">AshishBlog</a>
    </body>
    </html> 

Thanks.

17 responses to “Example of JQuery UI Dialog With Dynamically Loading an URL with an IFRAME”

  1. straight up jedi. Is there a way to include buttons with functionality within the dialog.. seems to kick a function not found error.

  2. I was doing something like this, the issue I am getting is (and I also found on your demo page) is:

    If any link is clicked in the pop-up page, it opens the resulting page within pop-up itself. What I am looking for is to have the links in the pop-up page (i.e. in iFrame dialog) to open in the main window? any idea?

  3. sorry, my bad
    somehow I was thinking target=_parent won’t work , then it suddenly clicked me that iframe is added to the main page’s body, so it should work! and it did :)

  4. question , how do i get it to load into a div automatically , instead of using an click or href?
    basicly i want to stick 3 divs on the screen , and when the page comes up , the urls have automatically been loaded

  5. thank you for this grate example, but there are something missing; where is the callback delegate function,

    by the way , an error returns from the script after the fnuction raised ” Invalid calling object”

  6. Dialog is not opening with dynamic url in salesforce.
    My page==>
    ///////////

    $(document).ready(function () {
    $(‘a#pop’).live(‘click’, function (e) {
    alert(e);
    e.preventDefault();
    var page = $(this).attr(“href”)
    var pagetitle = $(this).attr(“title”)
    var $dialog = $(”)
    .html(”)
    .dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    draggable: false,
    height: 625,
    width: 550,
    title: pagetitle
    });
    $dialog.dialog(‘open’);
    });
    });

    AshishBlog

  7. Dialog is not opening with dynamic url in salesforce.
    My page==>
    /////////// –

    $(document).ready(function () {
    $(‘a#pop’).live(‘click’, function (e) {
    alert(e);
    e.preventDefault();
    var page = $(this).attr(“href”)
    var pagetitle = $(this).attr(“title”)
    var $dialog = $(”)
    .html(”)
    .dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    draggable: false,
    height: 625,
    width: 550,
    title: pagetitle
    });
    $dialog.dialog(‘open’);
    });
    });

    AshishBlog

Leave a Reply