Friday, March 27, 2009

A Basic Example of JQuery's UI.Dialog Dynamically Loading an URL with an IFRAME

Given the momentum that JQuery has had lately with .Net, I wanted to try out loading a form into a "lightbox" as an alternative to writing a webpart for SharePoint. So a first step is just to get the "lightbox" approach working. I used the JQuery UI Build Your Download page to build a barebones download for version 1.7.1. This download gives a nice bundle with demo pages--however I didn't see any pages with an example of dynamically loading an URL using an IFRAME. Searching the web turned up lots of stuff, but between different versions of the toolkit, options for using other plugins, and different approaches--I didn't quite find a nice simple example. So here goes.

Upon unpacking the download archive, you'll get a folder structure. I put my sample html files along side the html files in \development-bundle\demos\dialog, so if you're following along, that's where you should put the samples below.

In this first sample, the IFRAME is placed inside a DIV. In the second sample, the IFRAME is dynamically generated into the DIV--so it doesn't have to appear in the DIV content intially. In either case, there is some boilerplate css and jquery files that are loaded (they are pretty small in size compared to some other javascript libraries fortunately). Both samples also show the $(document).ready() function used to specify settings for the dialog. Then a links onclick method invokes the showDialog method. When the IFRAME is statically part of the div tag, it's src attribute is simply set in shoeDialog using JQuery's attr method.
<!DOCTYPE html><html><head>

<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>

<script type="text/javascript">
function showDialog(){
$("#divId").dialog("open");
$("#modalIframeId").attr("src","http://www.google.com");
return false;
}

$(document).ready(function() {
$("#divId").dialog({
autoOpen: false,
modal: true,
height: 500,
width: 500
});
});
</script>
</head>
<body >

<a href="" onclick="return showDialog()">Show the Dialog</a>

<div id="divId" title="Dialog Title">
<iframe id="modalIframeId" width="100%" height="100%"
marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
title="Dialog Title">Your browser does not suppr</iframe>
</div>

</body>
</html>


For the second sample, just a few lines are different--removing the IFRAME from the DIV, and instead creating it in the showDialog method.

<!DOCTYPE html><html><head>

<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>

<script type="text/javascript">
function showDialog(){
$("#divId").html('<iframe id="modalIframeId" width="100%" height="100%"
marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" />').dialog("open");
$("#modalIframeId").attr("src","http://www.google.com");
return false;
}

$(document).ready(function() {
$("#divId").dialog({
autoOpen: false,
modal: true,
height: 500,
width: 500
});
});
</script>
</head>
<body >

<a href="" onclick="return showDialog()">Show the Dialog</a>

<div id="divId" title="Dialog Title" />

</body>
</html>

In either case, you can specify attributes on the IFRAME to control standard IFRAME features, and you can also use different options for the ui.dialog, described here (the JQuery documentation is quite good). Currently, the samples only use scrolling when required.

12 comments:

Anonymous said...

Hi what if the dialog is being brought up from a button in a frame? The iframe will stay behind and inside that frame. How could we we bring it up front like normal windows dialog? thanks

ytuty said...

If the javascript is in the iframe, it can call functions in the calling page using 'parent',
i.e.

parent.myfunc();

Willy Jansen said...

hi

what if I want to get iframe contain html source from other file?

thanks

Clark Updike said...

Hi Willy-

Have you tried setting the src attribute to a local file URI like file:///c:/mytestfile.html?

Anonymous said...

Any ideas why an iFrame source from the same environment would break out of the modal box while an external source does not? I'm trying to use an iFrame to show flash content because it's using SWFAddress to navigate to the appropriate page. When I reference this content that lives in my own development environment it behaves differently than when I directly reference a coworker's development environment.
The URL within my own environment breaks free of the modal dialog and takes the entire browser window.

Anonymous said...

How do you close the dialog from inside the Iframe?

Anonymous said...

to close the dialog from the iframe, $(parent.document).find('.ui-dialog');
window.parent.$('#dialogIDname').dialog('close');

Steve Trefethen said...

Great example, very helpful got my code up and running quickly.

Falak said...

Any idea on how to use this as properties window dialog?

Falak

Photobooth Manila said...

It works like a charm! I tried the second method.

John Crockford said...

It works. Thank you!

I'd like to open more than one dialog window on a page but it is not working for me. What I did was repeat the script but in each instance change the name of the #divId and #modalIframeId to #divId_a and #modalIframeId_a, #divId_b and #modalIframeId_b, etc. It seems like it should work but it just shows the results of the last javascript (dialog window) on the page.

Obviously I know very little (nothing) about javascript!

John Crockford said...

I have the answer for my previous post on the stack overflow website. I was not able to correctly name each function. If you are having the same trouble I was, you can find the answer here...

http://stackoverflow.com/questions/27001704/conflicting-jquery-dialog-scripts/27002152#27002152