I am working on an Phonegap jQuery mobile Android app. The app starts with the default index.html page and in it i am using $.mobile.changePage to load demo.html file. The demo.html gets loaded and displayed correctly but the javascript isn't working in it. I think i am messing up with the 'pageinit' event of jQuery Mobile or i don't know how to use it.
Here is my code :
This happens in index.html :
$.mobile.changePage("demo.html", {
transition: "slideup",
reverse: false,
changeHash: false
});
And the code for demo.html :
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$('#demo-page').live('pageinit', function(){
alert("Welcome");
});
</script>
</head>
<body>
<div data-role="page" id="demo-page" >
<div data-role="header">
<h1>Take a tour</h1>
</div>
<div data-role="content" id="demo-content">
<h2>This is the demo page.</h2>
</div>
</div>
</body>
</html>
So when the demo.html gets displayed, the 'Welcome' alert doesn't gets executed. I have no idea what is happening here.
It is not working because only body part of a second page is loaded.
Put this part:
<script type="text/javascript">
$('#demo-page').live('pageinit', function(){
alert("Welcome");
});
</script>
into the index.html.
Only way this code can be executed from demo.html is if it was loaded as an external link.
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