phonegap + jqmobile: how to change page correctly

Question

i'm developing android app using cordova + Ripple emulator + jq mobile. I want to change page after successful login. html of main (and the only) page:

 <div data-role="page" id="login">

        <div data-role="header">
            <h1>
                Вход
            </h1>
        </div>

        <div class="ui-content">
            <div id="loginFlashMsg">

            </div>

            <form id="loginFrm">
                <div>
                    <label for="loginInptTxt">Ваш логин:</label>
                    <input type="text" id="loginInptTxt" />
                </div>

                <div>
                    <label for="pswInptTxt">Пароль:</label>
                    <input type="password" id="pswInptTxt" />
                </div>

                <button id="loginBtn">
                    Войти
                </button>
            </form>
        </div>

    </div>

    <div data-role="page" id="lots">
        <div data-role="header">
            <h1>
                Лоты
            </h1>
        </div>

        <div class="ui-content">

            <ul data-role="listview" id="lotsList">

            </ul>

        </div>
    </div>

after json-authorization i want to change page:

App.prototype.ProcessResponse = function (response, textStatus, jqXHR) {
if (response['status'] != 'ok') {
    this.notifyAboutError(response['status']);
} else {
    switch (response['action']) {
        case 'login':
            this.user = new User($('#loginInptTxt').val(), response['sid']);
            $.mobile.changePage("#lots");
            break;
        case 'getLots':
            this.appendLots(response['lots']);
    }
}

};

but it doesn't work. I know, changePage() is deprecated. I try to use

$(":mobile-pagecontainer").pagecontainer("change", "$lots");

but everything is still the same - nothing. Extract to another html page has no effect. How I can switch pages in my android app?

p.s. the best that I can achieve is that I see the header of lots-page and text "loading" after it but after second it disappear.

Answer 1

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

works. No problem the site that is shown changes to another page id. If you want a fancy transition use e.g.

$.mobile.changePage("#id", {transition:"slide"});

Works like a charm :) Of course you can also navigate to new pages just use it without the '#'.