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

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

Share Improve this question edited Nov 22, 2013 at 3:48 asked Nov 21, 2013 at 18:15 Arut 95014 silver badges33 bronze badges

1 $.mobile.changePage($("#homePage"), {transition: "none", changeHash: false}); try this – Rahul Commented Nov 27, 2013 at 12:29
@Rahul thanks for your reply i solved the issue with window.location.href – Arut Commented Nov 28, 2013 at 13:46

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

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./jQuery.mobile.changePage/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Change page not working in jquery mobile - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)