For my latest project here at Windward, I needed to learn how to create a dialog using javascript. It turns out that this isn't exactly a trivial step in javascript, and so if you're new to javascript like I am, then it takes a bit of effort to figure out what you have to do here. Here's what I've worked out so far.
First, there are some canned dialogs that you can launch in javascript - alert, confirm, and prompt. These are simple dialogs that display a message, ask for a yes/no, or ask for a text input. That's all they do though, and they only display plain text data, so they're pretty lame. If you want a more useful dialog, like a file browser or some kind of input form, these just won't do.
What you can do though is use the window.open method to load up your dialog. You create an html file, let's call it dialog.html, and then you call window.open('dialog.html') from the window you want to open the dialog from.
Now window objects have an opener property that points to the window that called window.open. So lets say our main page is index.html, and we click a button, and call window.open('dialog.html'). index.html is the opener of dialog.html, so by using the the opener property in dialog's javascript, you can get to properties and methods in index.html.
So using opener, there are at least two ways of passing data to the opener of the dialog. Let's say your dialog is a file browser. You can have the dialog set the value of a text box in the opener to the selected file. This is the first way of passing data to the opener - find the appropriate controls in the opener, and set their values.
The second way of passing data to the opener is to call one of the opener's method. So again, let's say your dialog is a file browser. You can call opener.loadFile(fileName), for instance. You're passing file name from your dialog into the opener's loadFile method. Now the opener can do whatever it wants with that.
I'm thinking that in general, it will be a bit cleaner to call one of the opener window's methods, because then all you have to do in your dialog is stuff a data object and pass it to the method. You don't have to know about any of the opener's controls.
Anyway, here's some example code to demonstrate this. Mean time, I'll have to figure out how to make this a modal dialog.
This page is windowtest.html. It's just a text box and a button, and the button opens the dialog window, browse.html. browse.html will calls the loadFile method via the opener property.
<html>
<body>
<script type="text/javascript">
function btnBrowse_Click()
{
var browseWin = window.open('browse.html');
}
function loadFile(fileName)
{
if (fileName == null)
{
alert("fileName null");
return;
}
var txtFile = document.getElementById("txtFile");
if (txtFile != null)
txtFile.value = fileName;
else
alert("txtFile null");
}
</script>
<input type="text" id="txtFile" />
<input type="button" id="btnBrowse" value="browse..." onclick="btnBrowse_Click()" />
</body>
</html>
This is the browser.html page. It doesn't have any controls or text. When it loads, it calls opener.loadFile("file.txt"). This is just a toy example, but of course, you can imagine having callLoadFile being called when an file in a list is clicked, and then passing that file's url to opener.loadFile.
<html>
<body onload="callLoadFile();">
<script type="text/javascript" >
function callLoadFile() {
if (opener.loadFile != null)
opener.loadFile("file.txt");
else
alert("opener.loadFile null");
}
</script>
</body>
<html>
Comments