CODEWITHSUNDEEP
javascriptjqueryeventsmobilejquery-mobile
Mild Fuzz
Mild Fuzz

Reputation: 30661

No pagechange event firing

In jQuery mobile, I am trying to detect a successful page change to a specific page. I have the following code, inline on the page I want to load. 

<script>
     $(document).bind( "pagebeforechange", function( e, data ) {
            alert("pagebeforechange");   
        });

        $(document).bind( "pagechange", function( e, data ) {
            alert("pagechange");   
        });
        $(document).bind( "pagechangefailed", function( e, data ) {
            alert("pagechangefailed");   
        });
       $(document).live( "pagebeforechange", function( e, data ) {
            alert("pagebeforechange live");   
        });

        $(document).live( "pagechange", function( e, data ) {
            alert("pagechange live");   
        });
        $(document).live( "pagechangefailed", function( e, data ) {
            alert("pagechangefailed live");   
        });
</script>

I get the the appropriate alerts when loading the page directly, or refreshing, but not when navigating from another area in the Jquery Mobile app.

Page is called by the the "Your Car" Tab in the footer

<div  id="footer" data-role="footer" data-position="fixed"> 
    <div data-role="navbar">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">Features</a></li>
            <li><a href="about.html">Your Car</a></li>
            <li><a href="index.html">Contact</a></li>
        </ul>
    </div>
</div>

Upvotes: 1

Views: 5939

Answers (3)

Julian A.
Julian A.

Reputation: 11450

Luke's thinking is in the right direction: clearly the problem you had has to do with where in the code the binding is occurring. This is proved by shanabus.

However, in your case, you should be doing the binding when jQuery mobile's mobileinit event is fired, not pageInit, as Luke is suggesting.

Example (fires on all page change events):

<script type="text/javascript">
    $(document).bind('mobileinit', function() {
        $(document).on('pagechange', function () {
            window.alert('page changed!');
        });
    });
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>

As illustrated in the code above, be mindful that handlers triggered by mobileinit must be included before the jQuery mobile <script> tag.

Upvotes: 0

shanabus
shanabus

Reputation: 13115

Would it work to place your code in the pageshow event? It may if you are trying to detect the page or location. Something like this maybe:

<script type="text/javascript">

$('[data-role=page]').live('pageshow', function (event, ui) {
   hash = location.hash;
   page = hash.susbtr(1);

   if (page.indexOf('about.html') >= 0) { 
      alert('you made it!'); 
   }
});

</script>

UPDATE

After testing this scenario a bit more and rereading your question, I think I was able to reproduce the results.

This works as you described and only fires alerts when loading the page directly or refreshing the page:

<body>

<div data-role="page">
    <!-- page stuff -->
</div> 

<script type="text/javascript"> ..bind events... </script>
</body>

However, when I move the javascript directly inside the page, it works as expected and fires all of the bound events, no matter how the page was reached:

<body>

<div data-role="page">

    <script type="text/javascript"> ..bind events... </script>

    <!-- page stuff -->
</div> 

</body>

Upvotes: 2

Luke
Luke

Reputation: 8407

Where are you binding to this events?

Have you read following in the Docs http://code.jquery.com/mobile/latest/demos/docs/api/events.html:

Important: Use pageInit(), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

Upvotes: 0

Related Questions