Home arrow JavaScript arrow Page 3 - A Document Moving Store for Active Client Pages
JAVASCRIPT

A Document Moving Store for Active Client Pages


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.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
July 24, 2009
TABLE OF CONTENTS:
  1. · A Document Moving Store for Active Client Pages
  2. · How does the User correct an Error in a Previous Page?
  3. · Explanation of the Script in the Master Page
  4. · The page2Script.js Script

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials