Menu
I have a index.html file with following syntax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<a href="occassion.html">
<img class="frametoicon" src="img/occasion.png" />
</a>
</body>
</html>
then I have occassion.html page which has body onload function as follows
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Occassion</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
function loaded() {
alert("hii");
}
</script>
</head>
<body onLoad="loaded()">
</body>
</html>
but onload function is not firing up....if I try to refresh the page (occassion.html) then onload function gets fired up... why it is not working when navigated from index.html?
If I remove the jQuery files, then it works as expected....what I am missing to add?
This is also not working
$(document).ready(function () {
loaded();
});
Edit
I added
<script>
$(document).bind("pagechange", function (event, data) {
console.log(data);
var toPage = data.toPage[0].id;
alert(toPage);
if (toPage == "page2")
alert("hello");
});
</script>
and put the following in occassion.html
<div data-role="page" id="page2">
hello
</div>
To my surprise not even the alert(hello) is firing but also hello is also not displayed and alert(topage) is coming empty..
How is it? what's missing
430
jQuery Mobile uses AJAX to pull pages into the DOM, that's how it can transition between pages. When jQuery Mobile does this, there is a good chance it's doing it after the window.load event fires, so that event will generally not fire unless you refresh the page (then window.load will fire again). It seems possible that a user could click a link and have it load before the window.load event fires, but I wouldn't expect that to be the norm.
The fix is to use jQuery Mobile specific events, in this case you're probably looking for pageload/pagecreate/pageinit, see documentation about them here: http://jquerymobile.com/demos/1.2.0/docs/api/events.html
Here is a quick example of how this could work (this code would be located centrally and included in each document):
$(document).on("pageinit", "#occasions", loaded);
Note that #occasions would be the data-role="page" element in the occasions page.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
