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=".2.0/jquery.mobile-1.2.0.min.css" />
<script src=".8.2.min.js"></script>
<script src=".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="">
<head>
<title>Occassion</title>
<link rel="stylesheet" href=".2.0/jquery.mobile-1.2.0.min.css" />
<script src=".8.2.min.js"></script>
<script src=".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 ing empty..
How is it? what's missing
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./mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery./jquery-1.8.2.min.js"></script>
<script src="http://code.jquery./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/1999/xhtml">
<head>
<title>Occassion</title>
<link rel="stylesheet" href="http://code.jquery./mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery./jquery-1.8.2.min.js"></script>
<script src="http://code.jquery./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 ing empty..
How is it? what's missing
Share Improve this question edited Feb 7, 2013 at 8:34 user1853803 asked Feb 6, 2013 at 17:02 user1853803user1853803 6593 gold badges8 silver badges27 bronze badges 4-
1
why are you using
onLoadinstead of$(document).ready? – Vadim Commented Feb 6, 2013 at 17:05 - 1 Not an answer, but the correct spelling is occasion.... – KingCronus Commented Feb 6, 2013 at 17:05
-
3
You are using jQuery - don't use
onloadbut rely on a$(function(){ .. })block inside your script. – moonwave99 Commented Feb 6, 2013 at 17:05 - If you're still using inline JavaScript while you have jQuery at your disposal, you really need to re-consider your whole approach. – Sparky Commented Feb 6, 2013 at 17:07
2 Answers
Reset to default 9jQuery 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./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.
EDIT
Actually, since you use jquery mobile, probably you are looking the problem in a different place.
So, going to jquery mobile api we see that we kinda need pagechange or pageload event.