I'm going back and forth between two html pages - in my example Page1 and Page 2. When I move back from page 2 to page 1, I want to trigger a rebuild-my-html type function - similar to the way that 'onload' is triggered. Onload, of course, is only triggered when the app has been restarted/reloaded.
I'm not sure if I need to do something before I move to page 2 (an event triggered by the user), or if there is a basic function I can keep for Page 1.
I'm sure this is basic, but I just cannot find it! I have been searching the web for DOM events related to onload.
Basic App Structure
- Start on Page 1.
The onload function executes
function initLoad()
It is triggered by
document.addEventListener('readystatechange', function()
(In real app I Use a javascript onload function to layout some html dynamically)
(In real app, user makes a choices to indicate detail they want to see layed out on Page 2)
- User Event button click, moves app to Page 2
On Page 2 an onload function runs
function init()(In real app, user also initIates some other events)
User event returns app to Page 1 - I'm using
history.go(-1);because that is the only way I know to do that
Upon returning to Page 1, I WANT APP to Return to Run a rebuild refresh type function
Throughout the use of the app, I WANT the APP to epeatedly go back and forth from Page 1 to Page 2, triggering a refresh functions on both web pages
(in my real app user is testing themselves on memorization skills. They go back and forth between Page 1 and 2. Page 1 will display information in new ways each time to indicate things that the user has demonstrated knowledge on, in Page 2)
Example Code
Page 1 Code STACKexamplePage1Refresh.html
<!DOCTYPE html>
<html>
<body onunload="OnUnload()">
</script>
<script src="STACKExampleRebuild.js"></script>
<h1> Page 1 </h1>
<p id = changeMe>Want html info like this to be changed upon return from Page 2 and execution of rebuildExamplePage1 function</p>
<button onclick="callAnothePage()">Go to Page 2</button>
<script>
</script>
<script>
function initLoad() {
alert("Page 1 is loaded");
console.log ("Page 1 is loaded");
}
function OnUnload() { // this does not seem to happen
alert("Page 1 is UNloaded");
}
document.addEventListener('readystatechange', function() {
// http://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
if (document.readyState === "complete") {
initLoad();
}// end if
}); // end function
window.onload = function() { // this is just another way of testing initLoad - it runs too
alert("*Page 1 is REloaded*");
}
function callAnothePage()
{
window.location = "STACKexamplePage2Refresh.html"; //
}
</script>
</body>
</html>
Page 2 Code STACKexamplePage2Refresh.html
<!DOCTYPE html>
<html>
<body onload="init()">
<script src="STACKExampleRebuild.js"></script>
<h1> Page 2 </h1>
<button onclick="historyBack()">Return To Learn Page</button>
<script>
function init() {
alert("init function executed , Page 2 is loaded");
console.log ("init function executed , Page 2 is loaded");
}
function historyBack() {
history.go(-1);
rebuildExamplePage1(); // this function is in STACKExampleRebuild.js
//navigator.app.backHistory(); // tried this too .... 1.15.17
}
</script>
</body>
</html>
Sample Code: Java Script STACKExampleRebuild.js
function rebuildExamplePage1(){
alert("rebuildExamplePage1 function execute .... function that will allow for Page 1 rebuild executed");
console.log ("rebuildExamplePage1 function execute .... function that will allow for Page 1 rebuild executed");
/*
var changePage1Info = "This info changed while on page 2";
document.getElementById("changeMe").innerHTML = changePage1Info;
*/
}
When I run the rebuildExamplePage1 function, and try to run the commented out part - changing the html id 'changeMe' - which is back on Page 1 -
I get the typical error that "null is not an object " in reference to the changeMe object
I think that is because the javascript function can't access the html on page 1, while it's on page 2 . Though I was hoping that putting the commands after the history command might work.
What I really want is some kind of function that is triggered whenever a user returns to an html page - a refresh/reentry type function
I bet there is some special kind of function, that I have not been able to find, that will execute upon a return to html - like onload does when I first load the page.
A few things I've tried that don't work
The function onUnload for page 1, definitely does not execute at any time - I don't think this makes sense for this example anyway
I found various examples that use persistant data, to pass things to other pages, but they always seem to be pages that have not yet been loaded. I already use persistent data in my onload type functions - but they only happen the first time the page is loaded, not upon return
I need to be able to go back and forth from Page 1 to Page 2
I will have the same problem the second time I return to Page 2. In my real app I bring up different detail info on Page 2 each time
