Jquery mobile change page

Question

I have two column layout for a webpage from the site, http://jquerymobile.com/demos/1.0.1/

Now they have provided provisions to changePage using <a href="#xxx" data-role="button">Sample</a>

But my question is how to programmatically change page using code.

$.mobile.changePage("#xxx"); isn't working for me

score 51 · Accepted Answer · edited May 23 '17 at 10:29

51

Here is a real simple example for you: http://jsfiddle.net/shanabus/YjsPD/

$.mobile.changePage("#page2");

Documentation: http://api.jquerymobile.com/jQuery.mobile.changePage/

Other examples:

//transition to the "about us" page with a slideup transition
$.mobile.changePage( "about/us.html", { transition: "slideup"} );

//transition to the "search results" page, using data from a form with an ID of "search""   
$.mobile.changePage( "searchresults.php", {
    type: "post",
    data: $("form#search").serialize()
});

//transition to the "confirm" page with a "pop" transition without tracking it in history   
$.mobile.changePage( "../alerts/confirm.html", {
    transition: "pop",
    reverse: false,
    changeHash: false
});

UPDATE

As Chase Roberts points out in the comments below, this changePage method was deprecated in version 1.4. Here is the documentation for the new pagecontainer change event.

Example:

$.mobile.pageContainer.pagecontainer("change", "#page", { options });

This was also addressed on this SO question: How to change page in jQuery mobile (1.4 beta)?

edited May 23 '17 at 10:29

Community

1
1

answered Mar 16 '12 at 15:51

shanabus

12,989
6
52
78

Thanks @shanabus this answer is working when the simple page are used.But i'm using a left sidebar which is a menu, the right pane is the content pane.Based on the changes in the side pane, content page must be loaded.since i want to have dynamic contents i'm in need of page transition programatically. – siva Mar 16 '12 at 19:36
If you look at how the Docs page is doing it, its reloading the entire page, not just the content pane. – shanabus Mar 16 '12 at 20:45
Thanks @shanabus is there any way to reload the content pane alone ? – siva Mar 17 '12 at 05:36
Yes, using the jquery `.load()` function such as `$("#content-pane").load('pageurl.php');` – shanabus Mar 18 '12 at 01:35
It looks like you found another solid answer on this post: http://stackoverflow.com/questions/9749720/jquery-mobile-splitview-change. Did my solution answer your original question? – shanabus Mar 18 '12 at 02:09
Yes, Thanks for ur response.After your answer i went through the source code of the docs website.It loads a new page each time.So i tried other options and found my required result. – siva Mar 18 '12 at 05:51
2

Siva please post the solution or mark this as answer if this was in fact the asnwer – InspiredBy Jul 25 '12 at 05:50
@siva This is a good answer, if you have a menu on the left you have to include that in both pages. – Grumpy Dec 07 '12 at 23:29
3

"Note: jQuery.mobile.changePage is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use the pagecontainer widget’s change() method instead." does anyone have any examples of using the pagecontainer widget? – Chase Roberts Jan 03 '14 at 19:58

score 6 · Answer 2 · answered Dec 13 '12 at 08:43

I know this has already been answered but surely the correct answer why it wasn't working is that the syntax is incorrect ?

$.mobile.changePage requires the DOM object (for displaying pages within the same HTML file using the hash syntax) and not just a string. So the correct syntax for the example given would be:

$.mobile.changePage($("#xxx"));

That should work a treat !

Hope this helps

score 4 · Answer 3 · edited Sep 16 '15 at 08:58

4

$.mobile.changePage($("#page2"));

is the correct way to change between which div is the visible page.

If you use

$.mobile.changePage("#page2");

The DOM will be reloaded, and any ondocumentready events will be triggered.

edited Sep 16 '15 at 08:58

ngrashia

9,869
5
43
58

answered Apr 14 '13 at 14:50

mmcconkie

301
4
4

+1 MM - From my experience, if you are loading an HTML page from a file then any ChangePage calls from that file will need to use the full DOM object rather than just the label if calling back to the parent. – Mark Brittingham Sep 24 '13 at 02:39

score 1 · Answer 4 · answered Feb 08 '13 at 14:17

1

No, this is the correct syntax $.mobile.changePage("#page2"); or $.mobile.changePage( "about/us.html"); see the Api

answered Feb 08 '13 at 14:17

Scorpy86

339
1
3
16

score 1 · Answer 5 · answered Dec 12 '13 at 10:44

1

You first check the div block start and end tag bcoz sometime if some tag is missing the page transition is not possible. After that use the following code

$.mobile.changePage("#page2");

answered Dec 12 '13 at 10:44

Hemant Dubey

143
5

score 0 · Answer 6 · answered Jun 11 '14 at 06:21

function signin() {

    alert('singin button has been clicked');
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/json/login',
        dataType: "json",
        headers: {'Authorization':'Basic '+ btoa('abc' + ':' + '12345')},
        contentType: 'application/json',
        data:loginFormToJSON(),
        success: function(data, textStatus, jqXHR)
        {
            if(data.token !="ErrorID-11000"){
                alert('login successfully');
                //document.location.href = "accountinfo.html";
                //document.getElementById("loginBtn").replace="accountinfo.html";
                $.mobile.changePage("accountinfo.html");
            }

            else{
                alert('userid password did not match');
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('login error:'+errorThrown + textStatus);
        }
    });

}

From the above code, I am in sign in page and going to accounts page on successful login, this is working with Jquery mobile 1.4.

Hope that helps.

Jquery mobile change page

6 Answers6

Linked