Change page not working in jquery mobile

Question

I find lot of posts here like same,sorry for asking again but no post is solved my issue. In my phonegap application when load the index page my init function will be called after depend upon the init my action are performed. After submitting the form i want to go index page but it is not possible.

function init() {
document.addEventListener("deviceready", phoneReady, false);

$(document).on("submit", '#addEditForm', function(e) {
    var data = {
        firstname: $("#mFirstname").val(),
        lastname: $("#mLastname").val(),
        id: $("#mId").val()
    };
    saveDatas(data, "#homePage", function() {
        **$.mobile.changePage("index.html");** //here i need to go index page
    });

    e.preventDefault();

});

$(document).on("pageshow", function() {
    getDatas();
});

$(document).on("pageshow", "#editPage", function() {
    var loc = $(location).attr('href');
    if (loc.indexOf("?") >= 0) {
        var qs = loc.substr(loc.indexOf("?") + 1, loc.length);
        var detailId = qs.split("=")[1];


        $("#editFormSubmitButton").attr("disabled", "disabled");
        dbShell.transaction(function(tx) {
            tx.executeSql("select id,firstname,lastname,gender,dob,email from nameDetail where id=?", [detailId], function(tx, results) {

                $("#mId").val(results.rows.item(0).id);
                $("#mFirstname").val(results.rows.item(0).firstname);
                $("#editFormSubmitButton").removeAttr("disabled");
            });
        }, dbErrHandler);
    } else {
        $("#editFormSubmitButton").removeAttr("disabled");
    }
});

}

and index.html like:

<body onload="init();">
<div data-role="page" id="homePage">

and addEdit.html like:

<div data-role="page" id="editPage">
<form id="addEditForm" method="post">
    <div data-role="fieldcontain">
        <input type="submit" id="editFormSubmitButton" value="Save">
    </div>
</form>
<div data-role="footer" class="ui-bar">
       <a href="index.html" data-role="button" data-icon="home" >Return Home</a>
</div>
</div>

tied this also

//$.mobile.path.parseUrl("index.html");
//   $.mobile.changePage($('#homePage'), 'pop', false, true);

Please suggest some idea to do this...

Answer 1

window.location.href won't grant you the page transitions from jQuery mobile. Try these instead:

$.mobile.navigate("#bar", {transition: "slide", info: "info about the #bar hash"});
$.mobile.pageContainer.pagecontainer("change", "target", {transition: "flow", changeHash: false, reload: true})

Also, $.mobile.changePage() is now deprecated and should no longer be used. http://api.jquerymobile.com/jQuery.mobile.changePage/

Change page not working in jquery mobile

Question

1 answers

solution1
4 2014-03-13 04:29:11

Change page not working in jquery mobile

Question

1 answers

solution1 4 2014-03-13 04:29:11

solution1
4 2014-03-13 04:29:11