Opening Web Page Dialog Boxes with Other Dialog Boxes

Passing Values

If you have worked with other dialog boxes such as in win32 (or in studios) you might have come across the idea that when you open a dialog box, you can pass values to it as you are opening it. Here the situation is different. When you open a dialog box, it is empty. You do not only have to pass values, you pass the content of the window, including script (code) and values for script variables. We have seen this.

Changing and Adding Content in Another Box

Next we shall talk about changing the values of JavaScript variables in another dialog box, changing the values of HTML elements in another box, and changing table cell contents in another box. These are the ways you can change content. To add content you can add a table row in a table that is in the other dialog box. We shall also talk about this.

In the methods I will show you, when you change or add content in another window, the effects take place immediately.

We shall start by seeing how you can do this with the immediate child and the immediate parent.

Changing and Adding Content to the Immediate Child Box

Recall that when creating (opening) a box, a reference is returned. We always assigned the reference to an identifier. In

myWindow = window.open();

myWindow is the reference returned. This reference represents the new window, and it is needed to access any component in the window.

Setting and Reading the Child JavaScript Variable

Assume that in the immediate child window you have the following JavaScript Code:

<script type="text/javascript">

var firstName;

//the rest of the JavaScript code …

</script>

In the JavaScript Code of the parent window, you can set this variable, giving the value “John” as follows:

myWindow.firstName = "John";

So, in the JavaScript Code in the parent, you use the reference to the child window; this is followed by the variable in the child window. The value is assigned with the equal sign.

You read the value of the variable from the parent window in a similar way. The following code in the JavaScript of the parent window will read the value of the variable in the child window and assign it to the variable, name, in the parent window.

var name = myWindow.firstName;

Again, we need the reference to the child window, and the variable in the child window, to achieve this.