Skip to main content

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

Posted on January 10, 2012 by Anthony James Founder/CEOAnthony James Founder/CEO

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

5 Comments

Image of Doug Briggs
Doug Briggs
8 years ago

Pretty intuitive Anthony!

Image of Trisha
Trisha
8 years ago

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!!!

Image of wyvez
wyvez
8 years ago

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

Image of Jiri
Jiri
8 years ago

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

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
8 years ago

I just tested the source, what browser are you using this on?

Reply
Image of Simon
Simon
8 years ago

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 *