Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript not working in second html file in Phonegap & jQuery Mobile

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.

like image 362
jigargm Avatar asked Feb 26 '26 20:02

jigargm


1 Answers

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.

like image 77
Gajotres Avatar answered Mar 02 '26 00:03

Gajotres