jquerymobile.jp

jQuery Mobile Advanced Topics: changePage, pageInit, and Swipe API

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 thoughts on “jQuery Mobile Advanced Topics: changePage, pageInit, and Swipe API

  1. 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:

    script.js:
    $(‘#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!
    Thanks!!!

  2. 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.

    Jiri

  3. Hey,

    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){
    $(”+val.first+”).appendTo(‘#list-coureurs’);
    });
    })
    .success(function(){
    $(“#list-coureurs”).listview(“refresh”);
    })
    .error(function(){
    alert(“Une erreur est survenue”);
    })
    });

    Les coureurs

    Listes des coureurs de la courses

    Thank you in advance

Leave a Reply

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