CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobilecordova
Arut
Arut

Reputation: 950

Change page not working in jquery mobile

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

Upvotes: 1

Views: 6839

Answers (1)

geoyws
geoyws

Reputation: 3687

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

  1. $.mobile.navigate("#bar", {transition: "slide", info: "info about the #bar hash"});
  2. $.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/

Upvotes: 4

Related Questions