jquery - Unexpected pagecontainer change behavior -
so have page, want load using next function:
//function redirect add page function redirectadd() { $("body").pagecontainer("change", "#add", { transition : "fade" }); }
and have page want redirected. @ moment redirect it, redirected main page.
$(document).on("pagecreate", "#home", function() { //redirections $('#addrun').on("tap", redirectadd); $('#home').on("tap", redirecthome); $('#editrun').on("tap", redirectedit); //function redirect home page function redirecthome() { $("body").pagecontainer("change", "#home", { transition: "fade" }); } //function redirect add page function redirectadd() { $("body").pagecontainer("change", "#add", { transition: "fade" }); } });
<!doctype html> <html> <head> <title>running tracker</title> <link rel="stylesheet" href="css/style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> <script src="js/script.js"></script> </head> <body> <!-- main page --> <div data-role="page" id="home"> <header data-role="header" data-theme="a"> <h1>running tracker</h1> </header> <div data-role="navbar"> <ul> <li> <a href="#" id="addrun" data-transition="none" data-icon="plus">add run</a> </li> </ul> </div> <div data-role="content"> <h3>welcome runningtracker app</h3> <p> app can track running, jogging or walking. </p> <h3>your latest runs:</h3> <ul id="stats" class="current" data-role="listview" data-filter="true" data-filter-placeholder="filter runs date or distance." data-inset="true"></ul> <br/> <button id="clearruns" onclick="return confirm('are sure?')"> clear data </button> </div> <footer data-role="footer"> <h4>runningtracker © 2015 gz</h4> </footer> </div> <!-- add run page --> <div data-role="page" id="add"> <header data-role="header" data-theme="a"> <h1>running tracker</h1> </header> <div data-role="navbar"> <ul> <li> <a href="#" id="#home" data-transition="none" data-icon="home">home</a> </li> </ul> </div> <div data-role="content"> <h3>add run</h3> <form id="addform"> <label for="km">enter kilometres:</label> <input type="number" id="addkms"> <label for="km">enter date:</label> <input type="date" data-role="date" class="date" id="adddate" data-inline="true"> <button id="submitadd" class="ui-btn ui-corner-all"> add run </button> </form> </div> <footer data-role="footer"> <h4>runningtracker © 2015 gz</h4> </footer> </div> <!-- add edit page --> <div data-role="page" id="edit"> <header data-role="header" data-theme="a"> <h1>running tracker</h1> </header> <div data-role="navbar"> <ul> <li> <a href="#home" data-transition="none" data-icon="home">home</a> </li> </ul> </div> <div data-role="content"> <h3>edit run</h3> <form id="addform"> <label for="km">enter kilometres:</label> <input type="number" id="editkms"> <label for="km">enter date:</label> <input type="date" data-role="date" class="date" id="editdate" data-inline="true"> <button id="submitedit" class="ui-btn ui-corner-all"> update </button> </form> </div> <footer data-role="footer"> <h4>runningtracker © 2015 gz</h4> </footer> </div> </body> </html>
so here live demo, because stackoverflow example not loading: http://runningtracker.herokuapp.com/
so when click add run should redirect #add
page, does, redirects home
page
how can prevent happening?
you can prevent anchor link reloading page returning false on tap handler:
function redirectadd(e) { $("body").pagecontainer("change", "#add", { transition: "fade" }); return false; }
Comments
Post a Comment