javascript - Change page not working in jquery mobile - Stack Overflow|江阴雨辰互联

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/

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745366503a4624603.html

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

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

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

1 Answer 1

相关推荐