It’s time to dive into the jQuery Mobile API. In this screencast we will learn how to use the $.mobile.changePage, pageInit, and Swipe events. We will also use regular jQuery with jQuery Mobile to create a list element app that allows you to navigate by swiping on the list item you wish to open. Our entire app will be built using the APIs. You will also learn how to load your JavaScript AFTER the native Ajax of jQuery Mobile loads your page.

Download Source Live Demo


Retweets, +1’s, and Likes are always appreciated

7 responses to “jQuery Mobile Advanced Topics: changePage, pageInit, and Swipe API”

  1. Doug Briggs says:

    Pretty intuitive Anthony!

  2. Trisha says:

    Hi Anthony!
    This is great stuff. Im a beginner at Jquery Mobile.

    Can you please help me understand how dynamic pages work here? (By dynamic pages I mean pages populated by data from a database).

    For example, say we have page1.php, page2.php, page3.php, and script.js. How would you use pageinit and then jquery? Do you have to call pageinit for every that occurs for every file? Like:

    $(‘#page1’).live(‘pageinit’, function() {…blah…});
    $(‘#page2’).live(‘pageinit’, function() {…blah…});
    $(‘#page3’).live(‘pageinit’, function() {…blah…});

    Originally I was using the document.ready and my jquery was not working when switching pages. It only worked after pressing the refresh button.

    Any help would be awesome – much appreciated!

  3. wyvez says:

    Why did you put slideup as a transition and it actually just slides?

  4. Jiri says:

    I have used the download script, but when I click the Item in the list, (for example “pageInit Event”) the corresponding page is not displayed.
    The same happens, when I click the button Live Demo. What is the reason.
    Thank your for the answer.


  5. Simon says:


    Thanks for yours video tutorials,

    I just want to ask you a question, I’m block on it for three days…

    – I have a main page, who jsut have a link on a second page
    – My second page should retrieve data from php page

    When I click on the link on my main page, i arrive on the second page but nothing (data) were load…
    When i refesh the second page everithings is load.

    ajax navigation doesn’t work…

    That’s my code:

    Main page:

    Open dialog

    My second page:

    Page title

    $(document).bind(‘pageinit’, function(){

    $.getJSON(‘js/json.php’, function(data){
    $.each(data.coureurs, function(key, val){
    alert(“Une erreur est survenue”);

    Les coureurs

    Listes des coureurs de la courses

    Thank you in advance

  6. […] work fine until I run them as a native iPhone app using PhoneGap. I’ve recently come across this post which provides an example that does […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get actionable training and tech advice

We'll email you our latest articles up to once per week.