CODEWITHSUNDEEP
jqueryjquery-mobile
TarasB
TarasB

Reputation: 2428

jQuery Mobile: pagecreate event does not fire when navigating from page to page

playing with 2 simple pages and jQuery Mobile.

Trying to execute some js on each load of the page. For example show alert(1) for first page, and alert(2) for second one. When loading a page in a browser for a first time (or refreshing F5) it behaves as expected. However when I navigate from page 'one' to page 'two' using link - alert(2) does not show up.

The way how I want to execute some js on each load is as explained here - http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html - using pagecreate.

I found some similar questions here, but they do not answer what I need. My question is - what should I change to make it working?

My files here:

one.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>1</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
    <script>
    $('#divTestEvent1').live('pagecreate',function(event){
        alert(1);
    });
    </script>
</head> 
<body> 
    <!-- Start of first page -->
    <div data-role="page" id="divTestEvent1">
            <ul data-role="listview">
                <li><a href="one.html">1</a></li>
                <li><a href="two.html">2</a></li>
            </ul>
    </div><!-- /page -->
</body>
</html>

two.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>2</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
    <script>
    $('#divTestEvent2').live('pagecreate',function(event){
        alert(2);
    });
    </script>
</head> 
<body> 
    <!-- Start of first page -->
    <div data-role="page" id="divTestEvent2">
            <ul data-role="listview">
                <li><a href="one.html">1</a></li>
                <li><a href="two.html">2</a></li>
            </ul>
    </div><!-- /page -->
</body>
</html>

Upvotes: 1

Views: 9162

Answers (3)

rkeet
rkeet

Reputation: 3468

You should be able to do this automatically with just a single .live('pageinit') as shown below. 

$('[data-bind="pageinit"]').live('pageinit', function (event) {
    alert( $('[data-role="page"]').attr('id') );
});

This will bind a page automatically when using attribute data-bind='pageinit'. The alert should be showing you the ID of the page , where the must contain a data-role="page".

EDIT 1 March 2013

Seeing the other questions being voted up with code that will undoubtedly require the repetition of code I thought to update my answer with: Enter the above code before the initialization of jQuery Mobile. Every page will be bound on the first time it's loaded (so on the pageinit event. You'd have a setup something like this in your header:

    <script src="Scripts/latestJQuery.js" type="text/javascript"></script>
    <script src="Scripts/jQueryMobileDefaults.js" type="text/javascript"></script>
    <script src="Scripts/latestJQueryMobile.js" type="text/javascript"></script>

With my code above being included in the defaults page. This would make it fire also on the page first page being loaded the very first time it gets executed. This setup would give you a much cleaner setup than a repetition of code using a different numeric identifier for each separate page.

The event to which this can be used upon can also simply be altered. For all the events check the jQueryMobile documentation, but for example: pageinit gets fired on the initialization of the page, therefore only the first time it's loaded, pageshow would be fired every single time the page is loaded.

Upvotes: 3

GerjanOnline
GerjanOnline

Reputation: 1881

It is because the script in the head of two.html is ignored by jQuery Mobile. Please put this in both pages: (or create a JS file and include in both). 

<script>
$('#divTestEvent1').live('pageinit',function(event){
    alert(1);
});
$('#divTestEvent2').live('pageinit',function(event){
    alert(2);
});
</script>

PS: Please use pageInit instead of pagecreate See: http://jquerymobile.com/demos/1.0/docs/api/events.html

Another option is stick with your current code but enforce a refresh so the script in page 2 is executed, you can do this by setting:

<ul data-role="listview">
    <li><a href="one.html" data-ajax="false">1</a></li>
    <li><a href="two.html" data-ajax="false">2</a></li>
</ul>

Upvotes: 1

Challe
Challe

Reputation: 896

pagecreate is used for when the page is loaded. When you then switch between pages, it uses AJAX. To detect these changes, use pageshow:

$('#divTestEvent1').live('pageshow',function(event){
    alert(1);
});

Upvotes: 1

Related Questions