I'm having a few issues initializing events on my JQuery Mobile site and I just want to see if I'm going about it the right way. Here is what my code kinda looks like:
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
<link rel="stylesheet" href="jquery.mobile-1.3.0-beta.1.css" />
<script src="jquery-1.9.0.js"></script>
<script src="jquery.mobile-1.3.0-beta.1.js"></script>
<script text/javascript>
function myFunction()
{
//do some code
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content" data-theme="f">
<p><a href="#next-page" data-role="button" data-transition="fade">2nd page</a></p>
</div>
</div>
<div data-role="page" id="next-page">
<div data-role="header">
<h1>2nd page</h1>
</div>
<div data-role="content" data-theme="f">
<script text/javascript>
$("#next-page").on("pageinit", function() {
myFunction();
});
</script>
</div>
</div>
</body>
</html>
For some reason, when I load the 2nd page, I just get the AJAX loading icon and it does not stop loading.
The other thing is, I don't want myFunction() to be called until the 2nd page is loaded which is why I have the script inside the 2nd page.
Any help is much appreciated :)
Javascript is key sensitive, if you are calling function myfuncion() then same function must exist.
In your case your function has a large F in its name: myFunction(), because called function myfuncion() don't exist browser will report an error and jQuery Mobile will stop the execution.
On the other hand this code:
$("#next-page").on("pageinit", function() {
});
is ok if you want to execute this function during the second page initialization. Jzst a little advice, change it to this:
$(document).on("pageinit", "#next-page",function() {
});
EDIT :
To solve your problem replace your pageinit event with pageshow event. jQuery Mobile has a problem with dealing with other "graphic" frameworks (maps, carousels) they will usually work only in pageshow event.
$(document).on("pageshow", "#next-page",function() {
});