CODEWITHSUNDEEP
jqueryjquery-mobile
Siva Natarajan
Siva Natarajan

Reputation: 1429

Jquery mobile change page

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

Upvotes: 25

Views: 82728

Answers (6)

mmcconkie
mmcconkie

Reputation: 311

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

Upvotes: 4

Rajat_R
Rajat_R

Reputation: 51

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.

Upvotes: 0

shanabus
shanabus

Reputation: 13115

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)?

Upvotes: 51

Hemant Dubey
Hemant Dubey

Reputation: 143

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");

Upvotes: 1

Scorpy86
Scorpy86

Reputation: 339

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

Upvotes: 1

Polecat Harris
Polecat Harris

Reputation: 177

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

Upvotes: 6

Related Questions