Creating Dialog Boxes
| The Internet Explorer enables you to create dialog boxes with the showModalDialog and showModelessDialog methods that we'll see in the next chapter. (A modal dialog box won't let the user switch back to the main window while the dialog box is openyou have to deal with it before going back to what you were doingbut a modeless one will.) A dialog box is just an HTML document opened in a window that has a dialog boxlike frame and which enables you to pass information back and forth between the opening window. When you create a new dialog box, you can use the dialogHeight , dialogLeft , dialogTop , and dialogWidth properties to set the dimensions of the box. The most important properties here are the dialogArguments (which enables you to pass data to dialog boxes) and returnValue (which enables you to return data from dialog boxes) properties. Suppose, for example, that you want to let the user set some values using a dialog box. You can use the dialogArguments property to pass initial values to the dialog box's code that can be displayed when the dialog box opens, and the returnValue property enables you to pass data back to the opening window when the user clicks the OK button. Note that both the dialogArguments and returnValue properties can take arrays of values. Tip It's important to realize that you don't need dialog boxes to pass and return data between windowsthe Internet Explorer just provides this dialog box functionality for convenience. For example, as we'll see in the next chapter, if you create a new child window object named window2 , you can access, say, a text field in that child window from code in the parent window as window2.document.form1.text1.value . Here's an example to show how this works. In this case, I'll display a window with two text fields originally holding the values 1 and 2. When the user clicks a button, a dialog box will open , displaying those original data values. If the user changes those values and clicks OK, the dialog box will close and the new values will appear in the main window. Let's write some code to make this work. I'll store the original data values in an array named values , storing them as "value1" and "value2" . Next, I'll open the modal dialog box with the showModalDialog method (which we'll see in the next chapter), creating a new modal dialog box named dialog1 and passing the values array to that dialog box: <HTML> <HEAD> <TITLE>Using Modal Dialogs</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function openDialog() { var values = new Array() if(document.form1.text1.value){ values["value1"] = document.form1.text1.value } if(document.form1.text2.value){ values["value2"] = document.form1.text2.value } var dialog1 = showModalDialog("07-04.html", values, "dialogWidth:350px; dialogHeight:250px") . . . } // --> </SCRIPT> </HEAD> <BODY> <H1>Using Modal Dialogs</H1> <FORM NAME="form1"> <INPUT TYPE="BUTTON" ONCLICK="openDialog()" VALUE="Open the dialog box"> <BR> Enter the first value: <BR> <INPUT TYPE="TEXT" ID="text1" VALUE="1"> <BR> Enter the second value: <BR> <INPUT TYPE="TEXT" ID="text2" VALUE="2"> <BR> </FORM> </BODY> </HTML> Now the dialog box we're opening (which is a separate HTML document, with its own code) has access to the values array using its dialogArguments property (this is a property of the dialog box's window object). For example, you can access the data I've stored using the name "value1" as window.dialogArguments["value1"] in the dialog box's code. That means I can recover the two data items from the dialogArguments property and display them in text boxes in the dialog box when that dialog box opens. To do that, I'll use a JavaScript function I'll call initialize , which runs as soon as the dialog box is loaded. (This function is connected to the dialog's ONLOAD event attribute.) Here's what that looks like in the dialog box's code: <HTML> <HEAD> <TITLE>Modal Dialog Box</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function initialize() { if (window.dialogArguments) { if (window.dialogArguments["value1"]) { document.form1.text1.value = window.dialogArguments["value1"] } if (window.dialogArguments["value2"]) { document.form1.text2.value = window.dialogArguments["value2"] } } } // --> </SCRIPT> </HEAD> <BODY ONLOAD="initialize()"> <H1>Modal Dialog Box</H1> <FORM NAME="form1"> Enter the new first value: <BR> <INPUT TYPE="TEXT" NAME="text1"> <BR> Enter the new second value: <BR> <INPUT TYPE="TEXT" NAME="text2"> <BR> <INPUT TYPE="BUTTON" ONCLICK="handleOK()" VALUE=" OK "> <INPUT TYPE="BUTTON" ONCLICK="handleCancel()" VALUE="Cancel"> </FORM> </BODY> </HTML> You can see the results so far in Figure 7.3, where I've clicked the "Open the dialog box" button to open the dialog box and display the initial data, as copied from the main window. Figure 7.3. Displaying initial data in a dialog box. When the user clicks the OK button in the dialog box, all I have to do is to load the data that the user entered into the dialog box's text fields into an array and assign that array to the returnValue property of the dialog box windowwhen I do, the code in the main window will get access to that data. Here's how that looks in the dialog box's code (note also that if the user clicks the Cancel button I've added to the dialog box, I don't assign any value to the returnValue property): (Listing 07-04.html on the web site)<HTML> <HEAD> <TITLE>Modal Dialog Box</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function handleOK() { var returnValues = new Array() if (document.form1.text1.value) { returnValues["value1"] = document.form1.text1.value } if (document.form1.text2.value) { returnValues["value2"] = document.form1.text2.value } window.returnValue = returnValues window.close() } function handleCancel() { window.returnValue = "" window.close() } function initialize() { if (window.dialogArguments) { if (window.dialogArguments["value1"]) { document.form1.text1.value = window.dialogArguments["value1"] } if (window.dialogArguments["value2"]) { document.form1.text2.value = window.dialogArguments["value2"] } } } // --> </SCRIPT> </HEAD> <BODY ONLOAD="initialize()"> <H1>Modal Dialog Box</H1> <FORM NAME="form1"> Enter the new first value: <BR> <INPUT TYPE="TEXT" NAME="text1"> <BR> Enter the new second value: <BR> <INPUT TYPE="TEXT" NAME="text2"> <BR> <INPUT TYPE="BUTTON" ONCLICK="handleOK()" VALUE=" OK "> <INPUT TYPE="BUTTON" ONCLICK="handleCancel()" VALUE="Cancel"> </FORM> </BODY> </HTML> Finally, in the main window's code, I can access the returned values I've named "value1" and "value2" simply as dialog1["value1"] and dialog1["value1"] (where dialog1 is the dialog box we created with showModalDialog ). In this case, I'll display the new values the user entered in the dialog box in the main window's text fields like this in the main window's code: (Listing 07-03.html on the web site) <HTML> <HEAD> <TITLE>Using Modal Dialogs</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function openDialog() { var values = new Array() if(document.form1.text1.value){ values["value1"] = document.form1.text1.value } if(document.form1.text2.value){ values["value2"] = document.form1.text2.value } var dialog1 = showModalDialog("07-04.html", values, "dialogWidth:350px; dialogHeight:250px") if (dialog1) { if (dialog1["value1"]) { document.form1.text1.value = dialog1["value1"] } if (dialog1["value2"]) { document.form1.text2.value = dialog1["value2"] } } } // --> </SCRIPT> </HEAD> <BODY> <H1>Using Modal Dialogs</H1> <FORM NAME="form1"> <INPUT TYPE="BUTTON" ONCLICK="openDialog()" VALUE="Open the dialog box"> <BR> Enter the first value: <BR> <INPUT TYPE="TEXT" ID="text1" VALUE="1"> <BR> Enter the second value: <BR> <INPUT TYPE="TEXT" ID="text2" VALUE="2"> <BR> </FORM> </BODY> </HTML> Let's see this in action. After the dialog box opens (see Figure 7.3), I'll enter 3 and 4 in the dialog box's text fields and then close the dialog box. Those new values will then appear in the main window, as you see in Figure 7.4. And that's all it takesnow we're passing and returning data between windows and dialog boxes. Figure 7.4. Retrieving values from a dialog box. |
