Home arrow JavaScript arrow Page 2 - 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 - How does the User correct an Error in a Previous Page?
(Page 2 of 4 )

To correct an error in a previous page, the user has to use the Back button of the browser toolbar. After making the correction, do not click the Forward button to get to your latest page, as the change will not be reflected. Click the buttons on the pages that gave rise to the next pages.

You have to repeat any inputs you made along the line, as you are coming to your latest page. In this way the changes will be reflected. Once you load a new page, the previous page goes into the history object.

Any changes you make in the moving store can only be reflected in a loaded new page.

The Document Phase of my approach should be used for a short session with a maximum of about five pages. Well, this is my opinion. If you want a longer session, then you should use the Window Phase of my approach. In this phase there is more flexibility and the store remains in the master page, and so can be larger. In that phase you do not have to worry about the transportation time (from page to page) of the store.

Moving Store Example

In this simple example, the store (to be moved) in the master page is a JavaScript array of two elements. The second page has two buttons. The first button in the second page will display the contents of the moved store in the second page. The second button will load the third page.

The second page has an external JavaScript tag at its button that is used by the two buttons. All the third page does is show text to indicate that you are at the third page. The store in the second page is an HTML table element whose value of the display property is "none." For simplicity I did not move the store into the third page. The Script Approach to Active Client Pages is already a feature of the example (as I will explain).

The code for the master page is:

 

<html>

<head>

</head>

<body>

This is the First page.<br />

<button type="button" id="B1" onclick="openWrite()">Load Second Page</button>

<script type="text/JavaScript">

 

var arrayStore = new Array(2);

arrayStore[0] = "oneA";

arrayStore[1] = "twoA";

 

var page2Doc = "<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>";

 

function openWrite()

{

var pageTwo = document.open();

pageTwo.write(page2Doc);

pageTwo.close();

 

//copy(move) the store

for (i=0;i<2;i++)

{

pageTwo.getElementById('S2').rows[i].cells[0].innerHTML = arrayStore[i];

}

}

</script>

</body>

</html>

 

The document has the HTML element, the HEAD element and the BODY element. The HEAD element is empty for this example. The BODY element has a sentence indicating that you are at the first page. Next you have a line break element. After this you have a button that would cause the second page to load when clicked. This button calls a function that is in JavaScript below it. After the button in the BODY element, you have more JavaScript.

This JavaScript has the store. The store is an array with two elements. The script creates a second page with an empty store (HTML Table), loads the second page and copies the content of the store from the master page to the empty store in the second page.

The script has been put at the bottom of the BODY element so that it will be rendered last. Remember that in ACP you design your page so that the browser will render it as it arrives at the browser. You can still put the script (with the store) in the HEAD element of the master page if you have a good reason for doing so.


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