Changing The Page From Javascript

Use the $.mobile.changePage method which allows you to transition to another page as if the user clicked a link. 


	//Load an external page
	$.mobile.changePage("some_external_page.html");
	
	//Transition to an internal page in the same document
	$.mobile.changePage($("#ThePageId"));

 

changePage Properties

 

transition

transition name (default: "slide")

reverse

true/ false (default: false)

type

"get"/" post" (default: "get")

HTTP method to use to load the external page

data

object or string

Data to be sent when POST is defined

allowSamePageTransition

true/ false (default: false)

Allow transition to the same page as the active one (transition to itself)

changeHash

true/ false (default: true)

Should the new page be in the history

data-url

string

The URL to be attached in the location

pageContainer

jQuery DOM object

The container where to attach the new page

reloadPage

true/ false (default: false)

To force the reload of the page, even if its cached on the DOM

showLoadMsg

true/ false (default: true)

Determines whether the page loading message should be visible after some milliseconds or not

role

page/dialog (default defined by data-role)

The role to be applied to the new page

For example


$.mobile.changePage($("#page2"), {
	transition: "slide",
	reverse: true
});

Example


$(document).bind('mobileinit', function() {
	//Initialization

});

	//----- SLIDE TO CHANGE PAGE -----
	$(document).live("swipeleft", function () {
		$.mobile.changePage("#Page1", {
			transition: "slide",
			reverse: false
		});
		
	});
	
	$(document).live("swiperight", function () {
		$.mobile.changePage("#Page0", {
			transition: "slide",
			reverse: true
		});
	});

 

Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

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