Finding Values and More with Web Page Dialog Boxes
In this conclusion to a five-part series, we'll wrap up our discussion of what you can do with web page dialog boxes. Among other things, we include some tips you'll need to keep in mind when you include web page dialog boxes in your commercial projects.
Finding Values and More with Web Page Dialog Boxes - Developing the String (Page 3 of 4 )
To develop the string for a dialog box, first write out the complete HTML code for the dialog box. Next, with the back slash, escape all the signs such as <, >, (, and { that need to be escaped. Finally, put quotes around the string and assign it to a variable (boxStr1).
The following is an example of a string for the first dialog box:
+ "<button type="button" onclick="openAnotherBox()">Open Another Box</button> <br /> <br />"
+ "<button type="button">Done</button>"
+ "</body>"
+ "</html>";
If you have three dialog boxes, you need three strings like this in the main window. You need one string for each dialog box. You normally do not need more than three dialog boxes in addition to the main window. Of course, the dialog boxes can have different HTML content.
If you look at the above box string you will notice that it has two functions in the JavaScript. There are also two text input controls and two buttons in the BODY element. I will talk about the two functions. You need at least these two functions in each of your dialog boxes.
I start with the first one:
function sendRefBack()
{
return window.opener.sendRefBack();
}
This function is in every dialog box except the last. It simple calls the same function that is in the immediate parents box. The aim is to ultimately get the reference of the main window at the calling window (function). This function, as we saw above, in the main window, determines the reference of the main window and returns it.
The other function that should be in every dialog box except the last is:
This function is called when you click the button to open a new dialog box. This function first calls the sendRefBack() function in the JavaScript of its own window. We already know that the sendRefBack() function will call the same function in the previous window. The openAnotherBox() in the calling window ultimately receives the reference to the main window and assigns it to the mainPageRef variable. The next line uses this reference to get the string for the next (child) dialog box; it assigns the string to the contentStr variable. The line after that opens a new box and assigns the resulting reference to the myRef variable. The last line uses the contentStr string, which has the content of the newly opened dialog box and writes the content to the opened box.
So the above two functions or any two functions with similar effects should be in every dialog box, except the main window and the last box. The main window should, however, have the first function modified.
I carried out a very simple project, which had a main window and three dialog boxes. The main window is as shown above; the first dialog box is also as shown above. The string for the second dialog box is shown below:
+ "<button type="button" onclick="openAnotherBox()">Open Another Box</button> <br /> <br />"
+ "<button type="button">Done</button>"
+ "</body>"
+ "</html>";
This dialog box has one input text control and two buttons. Note that the two functions that I mentioned before are there. This window, like the previous one, can open another window. The string for the window it opens, which is the last in the chain, is as follows:
boxStr3 = "<html>"
+ "<head>"
+ "<title>"
+ "Third Dialog Box"
+ "</title>"
+ "<style type="text/css">"
+ "body {background-color:silver}"
+ "</style>"
+ "<body>"
+ "This is some confirmation text. If you agree click OK, else click Cancel<br /><br />"
HTML 
Opening Web Page Dialog Boxes with Other Dialog Boxes
