Welcome to the fourth part of a twelve-part series that explains how to create Active Client Pages. In this part of the series, I explain the meaning of a moving store and how you come up with one.
A Document Moving Store for Active Client Pages - Explanation of the Script in the Master Page (Page 3 of 4 )
Let us look at the master page script in detail. Everything in the first page comes from the server. The first code segment is the store; an array is created. The first element of the array has the value "oneA." The next element has the value "twoA."
The next code segment is the content of the second page in string form. The entities have been escaped. These are the page elements, removed from the string.
<html>
<head>
</head>
<body>
This is the second page.<br />
<button type="button" onclick="showStoreValues()">Show Store Values</button>
<button type="button" onclick="loadThirdPage()">Load Third Page</button>
<table id="S2" style="display:none">
<tr><td></td></tr>
<tr><td></td></tr>
</table>
<script src="page2Script.js"></script>
</body>
</html>
It has the HTML element. It has a HEAD element, which is empty. It has a BODY element. The first thing in the BODY element is text, which indicates that you are on the second page. Next you have a line break element.
After that you have two buttons. When clicked, the first one will display the values of the store in the second page. The second button, when clicked, loads the third page. Each of these two buttons calls a function that is in the external script below.
So the external script must be loaded before the buttons can become effective. I assume that before the user decides to click any of the buttons, the external script would have been loaded. If you think that by the time the user decides to click the buttons, the external script would not have been loaded, then put the functions for the button in a script in the HEAD element of the second page.
In the present case, while the user is still reading the page, the external script is being downloaded. The page has been designed so that it is rendered as it arrives at the browser. By the time the user decides to click any of the buttons, the script would have been downloaded. This is a feature of the ACP Script Approach in a simple format.
Next is the store of the second page. This store is an HTML table element. It has two rows of one cell each. It mimics the one dimensional array store in the master page. The value of its display property is "none," so it is not displayed and it does not occupy space.
You can put the store as the first thing in the second page. I did it like this just to show you that the user has to read the page before he takes an action that will make use of the store (here, the store is rendered later than the buttons). The cell contents will be filled with values from the array in the store in the master page, by script in the previous (master) page.
After the code for the store of the second page, we have the external JavaScript tag. This tag downloads the script to be used by the second page (and to be used by the buttons of the second page as well). While the user is still reading the second page that has just been loaded, the script is being downloaded.
Let us continue to look at what is in the script of the master page. You have the openWrite() function just below the variable for the string of the page content of the second page. This function loads the second page. I will only explain the extra statement(s) in the openWrite() function. In your project, you can change the name of the function to something like loadSecondpage().
The extra statement in the function is a for-loop. This loop copies the values of the store array in the master page, to the store table in the loaded second page. There is one line in the for-loop. It uses DOM features to do this.
That is it for the second page's content. Let us now look at what is in the external script of the second page.
JavaScript 
/ 2 
HTML5 Boilerplate: Working with jQuery and Modernizr
