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

Question

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.

Gajotres · Accepted Answer · 2013-02-02 22:58:48Z

5

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.

answered Feb 2, 2013 at 22:58

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jigargm Over a year ago

Okay great! the alert worked but first the alert worked and then the demo.html got loaded. Any solution.

Gajotres Over a year ago

Change pageinit to an other page event, take a look at my other article on this thematic: stackoverflow.com/questions/14468659/…

Gajotres Over a year ago

Last page event executed is a pageshow, you should probably use that one.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related