Passing Objects back to the Caller
Let's study the dialog box definition from the previous page's example. Here is the callee:
<HTML>
<HEAD>
<TITLE>callee.html</TITLE>
<SCRIPT>
function getInfoAndUpdate() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update();
}
function cancel() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = "Yellow";
callerWindowObj.update();
}
</SCRIPT>
</HEAD>
<BODY>
Enter your favorite color:<INPUT ID=oEnterColor><BR><BR>
<INPUT VALUE="Apply" TYPE=button
onclick="getInfoAndUpdate();">
<INPUT VALUE="Ok" TYPE=button
onclick="getInfoAndUpdate();window.close();">
<INPUT VALUE="Cancel" TYPE=button
onclick="cancel();window.close();">
</BODY>
</HTML>
We have one input field for the user's favorite color, oEnterColor, and three buttons: Apply, Ok, and Cancel. When either the Apply or the Ok buttons are clicked, the function getInfoAndUpdate() is called:
function getInfoAndUpdate() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update();
}
We first assign dialogArguments to a local variable, callerWindowObj. Now we have the caller window object in callerWindowObj. We assign the caller's static variable, sColor, by setting it to the user's input:
callerWindowObj.sColor = oEnterColor.value;
And then we call the caller's update function:
callerWindowObj.update();
Notice that the function update() is defined in another file, caller.html. It's the window object that passes all caller's functions to the callee. To remind you, the update() function is defined as follows:
function update() {
oColor.innerText = sColor;
}
When the Cancel button is clicked, a similar scenario is taking place, except that the value passed back is "Yellow" instead of the user's input:
function cancel() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = "Yellow";
callerWindowObj.update();
}
  
Next: A Final Word
| 
