Question

i have an index.html file that holds:

document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady(){
var deviceuid = device.uuid; // gets the phoneid
alert('index');
checkUser(deviceuid); // this is some function i made
}

from here if everything works OK i will load another page called page1.html that has some text and a link:

<a href="page2.html">Page 2</a>

the page2.html has some other text and a link that goes back to the homepage:

 <a href="index.html">Go to Index</a>

What happens is that when i start the application i can see the alert and the other script running, but when i click on the link to go back to the index.html the page goes blank and no alert is shown

any ideas ? do i have to run some other code that refreshes the page?

edit:

i could use: <a href="#" onClick="document.location = 'index.html';" >Go To Index</a>

but it doesn’t seem to work on the mobile device only in browser

Answer 1

You are describing standard browser behavior.But jQuery mobile performs page loading default per AJAX, see http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html.

This means that the first page (“index.html”) is loaded and onDeviceReady is executed. When you click the link to the second page (“page2.html”) this page is loaded per AJAX, is inserted into the DOM of the first page and is displayed.

When you click on the link to the first page, no loading occurs because both pages are in the DOM and the first page is displayed again without triggering onDeviceReady – this only happens on the first load.

You can turn off AJAX loading when you add to every link rel="external".

However, you should use AJAX loading and its advantages. Read http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html – it explains in detail when a script is executed. I think you should put your code in the pagechange- or pageshow-event, see http://jquerymobile.com/demos/1.0.1/docs/api/events.html.