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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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