jQuery Mobile Change Page Programmatically method | Tutorial

Learn jQuery Mobile : How to pro-grammatically change page in jQuery Mobile apps.

Hi friends !! I know you have so many questions for use of jQuery.mobile.changePage() like:

  • How to use changepage in jQuery Mobile application/themes?
  • How to change one page to another by pro-grammatically using jQuery.mobile.changePage()?
  • How to send data one page to another in jQuery Mobile apps using code?
  • How to pro-grammatically change page using code?

at the time of developing your jQuery Mobile web application. You have got so many these types of queries and questions which take the time long to develop and complete your application.

So, here I have a complete tutorial of jQuery.mobile.changePage() to gives you a complete guidelines and teach you how can you actually use jQuery change page.  Basically, jQuery.mobile.changePage() use for the change your one page to another page by redirecting pro-grammatically in your mobile application.

Getting started with jQuery.mobile.changePage():

It is a jQuery method which internally used for the transfer data (or we can say it the passing data) between one page to another page pro-grammatically by clicking event or form submitting.

Generally, jQuery mobile application template has a one main page and some several pages loading internally using jQuery and AJAX. So, If you have a couple of pages in your application and want switch between pages, you can do it by using this change page method. Let’s we see below how you can call the arguments and objects between signature of jQuery change page.

$.mobile.changePage(to [,options])

In the above syntax, ‘$.mobile.changePage()’ is a method, ‘to’ is an argument type (String or Object) and ‘options’ is an object. In between the change page method, ‘to’ argument is used for the passing URL of the transfer page which you want to change and ‘options’ object is used for the many different key data (e.g. objects, string or default undefined) which send it using AJAX page request.

Look out more about: Free jQuery Mouseover effects

You can transfer page using parameter ‘Page URL’ directly as argument to putting in it or by ‘options’ object indirectly by putting data as object. Look out the syntaxes below.

By directly using URL parameters:


OR by object:

$.mobile.changePage( “YourTransferPageURL.html”, { data: {param1=“value1”}});

Both are usually same for at all, you can use any of them. Sometime jQuery mobile page can not retrieve the data using object because of just supporting problem. So, I suggest you for URL params than object.

Both are having a set of properties which you can use it. Here is a list of those properties of ‘to’ and ‘options’ arguments.

‘to’ :

Type: String and Object

‘options’ :

Type: Object


  • allowSamePageTransition(default value: false) – Type: Boolean
  • changeHash(default value: true) – Type: Boolean
  • data(default value: undefined) – Type: Object/String
  • dataUrl(default value: undefined) – Type: String
  • pageContainer(default value: $.mobile.pageContainer) – Type: jquery collection
  • reloadPage(default value: false) – Type: Boolean
  • reverse(default value: false) – Type: Boolean
  • role(default value: undefined) – Type: String
  • showLoadMsg(default value: true) – Type: Boolean
  • transition(default value: $.mobile.defaultPageTransition) – Type: String
  • type(default value: “get”) – Type: String

Simple example of jQuery.mobile.changePage():

Here is the official jQuery mobile example links : Simple changePage Example

There is an best jQuery mobile change page example providing by official jquery web site. You can see how actually use change page method with their properties to perform different page transfer things.

You can use it for your jquery mobile apps, templates, themes etc. and make it user friendly. There are so many properties which you can including with your mobile application/template and make it more effective with jQuery.

If you have any query, question or getting errors about the jQuery.mobile.changePage() method during your application development then please comment here for get best solutions. thanks for visiting Amaezing.com. 🙂 Read more about jQuery Plugin Development.

Leave a Reply

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