Have web pages that need to share data, but can't get the data to move between the pages without a lot of magic? Believe it or not getting data to flow between pages is actually very simple. I create what is called a "Data Layer". With a Data Layer, there is no need for fancy coding, making multiple saves and retrievals from a database, or creating cookies.
A Data Layer is a frame that has no height or width and hosts a page with no visual content. How does this work? Well, let's create a simple example.
We will start with the index.html. This file contains the coding to create the frames.
1 <FRAMESET ROWS="0,*"
2 FRAMEBORDER="0"
3 FRAMESPACING="0"
4 BORDER="0" >
5
6 <FRAME SRC="dataLayer.html"
7 NORESIZE="Yes"
8 SCROLLING="NO"
9 NAME="dataLayer"/>
10
11 <FRAME SRC="main.html"
12 NORESIZE="Yes"
13 SCROLLING="No"
14 MARGINWIDTH="0"
15 MARGINHEIGHT="0"
16 NAME="main"/>
17
18 </FRAMESET>
In the above code two frames are created. The first frame is the Data Layer, and the second frame will display the web page main.html. The frame for the Data Layer is created and populated first to ensure that the data elements are created before they are used. The next file to create in our example is the Data Layer. This page will have no body tag and will display no information. Javascripting will be added to create two global variables. These are the global data elements that will be used throughout the example. 1 <html> 2 <head> 3 <script> 4 <!-- 5 firstName = "Richard"; 6 lastName = "Gorremans"; 7 --> 8 </script> 9 </head> 10 </html> Now that the data values have been created, let's create a page that will utilize them. The file created will be main.html.
1 <html>
2 <head>
3 <title>Sample Data Layer</title>
4 <script>
5 <!--
6 function init()
7 {
8 var dl=eval("parent.dataLayer");
9 document.data_1.iFirstName.value = dl.firstName;
10 document.data_1.iLastName.value = dl.lastName;
11 }
12 function saveData()
13 {
14 parent.dataLayer.firstName = document.data_1.iFirstName.value;
15 parent.dataLayer.lastName = document.data_1.iLastName.value;
16 return true;
17 }
18 -->
19 </script>
20 </head>
21 <body onLoad="init()">
22 <form
23 name="data_1"
24 onSubmit="return saveData()"
25 action="main2.html"
26 target="main">
27 <table
28 width="300"
29 border="1"
30 align="center"
31 bgcolor="silver">
32 <tr>
33 <td>
34 <font face="Arial">
35 First Name
36 </font>
37 </td>
38 <td>
39 <input name="iFirstName"
40 type="text"
41 size="15"
42 maxLength="15">
43 </input>
44 </td>
45 <tr>
46 <tr>
47 <td>
48 <font face="Arial">
49 Last Name
50 </font>
51 </td>
52 <td>
53 <input name="iLastName"
54 type="text"
55 size="25"
56 maxLength="25">
57 </input>
58 </td>
59 <tr>
60 <tr>
61 <td colspan="2">
62 <center>
63 <input name="formSubmit"
64 type="submit"
65 value="Submit">
66 </input>
67 </center>
68 </td>
69 </tr>
70 </table>
71 </form>
72 </body>
73 </html>
The heart of the process for creating a Data Layer starts at line 8 of the above code. On this line you will find the code [ var dl=eval("parent.dataLayer"); ]. This line of code opens the page in the dataLayer frame, evaluates each of the variables, and assigns it to the page making the call. In the Data Layer frame there are two variables (firstName and lastName). The eval() function creates two new variables (dl.firstName and dl.lastName) and assigns them the corresponding values from the Data Layer. On lines 39 and 53, two <input> fields are created for the First Name and Last Name. These are controlled by the <form> on line 22 and are called iFirstName and iLastName. On line 9, the value of iFirstName is dynamically set to the value of dl.firstName, which has been set to the value of firstName in the Data Layer. On line 10, the value of iLastName is dynamically set to the value of dl.lastName, which has been set to the value of lastName in the Data Layer. Since the values of an input field cannot be assigned before the form is created the onLoad event for the <body> (line 21) is used to assign the values obtained from the Data Layer. We now have the first half of the working functionality for a Data Layer - getting data. The second half is storing the information back to the Data Layer when it is changed. To accomplish this the onSubmit event of the <form> will be used. This event is executed before all other events and prevents the action event from executing unless a true is returned. On line 24, the onSubmit event executes the javascript function entitled saveData() (line 12 thru 17). On lines 14 and 15 of the saveData() function the values of the input fields (iFirstName and iLastName) are saved to the variables firstName and lastName in the Data Layer. That completes the process for creating a Data Layer. By using the eval() and saveData() functions in all other pages you will be able to pass data in any direction you want. Click Here To Download Sample Code |
Site Created and Maintained by: Richard Gorremans
SpiritWolfX - Seeker and Giver of Knowledge
