Panel not changing page in jquery mobile

Question

I'm trying to code a panel that closes and changes the current page after a user taps a link but nothing happens after the links are tapped.

I originally tried to change the page by with a tags (ie. ) to no avail. Here's my code:

 $("a").on("tap", function(){ switch($(this).attr("id")) { case "#woke": $.mobile.changePage("#woke"); break; case "#network": $.mobile.changePage("#network"); break; } });

 <html lang="en"> <head> <title>Organize.me</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css" type="text/css"/> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="main.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="woke"> <!--Navigation panel with links--> <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> <div data-role="header"> <h1>Menu</h1> <a href="#network" data-rel="close" class="ui-btn ui-btn-right ui-icon-back ui-btn-icon-left">Back</a> </div> <nav><ul data-role="listview" data-inset="true"> <a href="#woke" class="nav-woke"><li class="buttons">Get Woke</li></a> <a href="#network"><li class="buttons">My Network</li></a> <a href="#"><li class="buttons">Find Orgs</li></a> <a href="#"><li class="buttons">Events</li></a> <a href="#"><li class="buttons">Voting</li></a> </ul></nav> </div> <!--Header--> <div data-role="header"> <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> <h1>Get Woke</h1> </div> <!--Content--> <div data-role="content"></div> <!--Footer--> <div data-role="footer">&copy;Scripts of Steele</footer> </div> <div data-role="page" id="network"> <!--Navigation panel with links--> <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> <div data-role="header"> <a href="#network" data-rel="close" class="ui-btn ui-icon-back ui-btn-icon-left">Back</a> <h1>Menu</h1> </div> <nav><ul data-role="listview" data-inset="true"> <a href="#woke" data-rel="open"><li class="buttons">Get Woke</li></a> <a href="#network" data-rel="open"><li class="buttons">My Network</li></a> <a href="#"><li class="buttons">Find Orgs</li></a> <a href="#"><li class="buttons">Events</li></a> <a href="#"><li class="buttons">Voting</li></a> </ul></nav> </div> <!--Header--> <div data-role="header"> <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> <h1>My Networks</h1> </div> <!--Content--> <div data-role="content"></div> <!--Footer--> <div data-role="footer">&copy;Scripts of Steele</footer> </div> </body> </html>

Answer 1

You are selecting an id but maybe you want to select the href (or better, add an id)

 $("a").on("tap", function(){ switch($(this).attr("href")) { case "#woke": console.log("#woke"); $.mobile.changePage("#woke"); break; case "#network": console.log("#network"); $.mobile.changePage("#network"); break; } });

 <html lang="en"> <head> <title>Organize.me</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css" type="text/css"/> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="main.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="woke"> <!--Navigation panel with links--> <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> <div data-role="header"> <h1>Menu</h1> <a href="#network" data-rel="close" class="ui-btn ui-btn-right ui-icon-back ui-btn-icon-left">Back</a> </div> <nav><ul data-role="listview" data-inset="true"> <a href="#woke" class="nav-woke"><li class="buttons">Get Woke</li></a> <a href="#network"><li class="buttons">My Network</li></a> <a href="#"><li class="buttons">Find Orgs</li></a> <a href="#"><li class="buttons">Events</li></a> <a href="#"><li class="buttons">Voting</li></a> </ul></nav> </div> <!--Header--> <div data-role="header"> <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> <h1>Get Woke</h1> </div> <!--Content--> <div data-role="content"></div> <!--Footer--> <div data-role="footer">&copy;Scripts of Steele</footer> </div> <div data-role="page" id="network"> <!--Navigation panel with links--> <div data-role="panel" data-dismissible="true" data-swipe-close="true" data-display="overlay" data-fixed-position="true" id="menu"> <div data-role="header"> <a href="#network" data-rel="close" class="ui-btn ui-icon-back ui-btn-icon-left">Back</a> <h1>Menu</h1> </div> <nav><ul data-role="listview" data-inset="true"> <a href="#woke" data-rel="open"><li class="buttons">Get Woke</li></a> <a href="#network" data-rel="open"><li class="buttons">My Network</li></a> <a href="#"><li class="buttons">Find Orgs</li></a> <a href="#"><li class="buttons">Events</li></a> <a href="#"><li class="buttons">Voting</li></a> </ul></nav> </div> <!--Header--> <div data-role="header"> <a href="#menu" data-rel="close" class="ui-btn ui-icon-bars ui-btn-icon-left">Menu</a> <h1>My Networks</h1> </div> <!--Content--> <div data-role="content"></div> <!--Footer--> <div data-role="footer">&copy;Scripts of Steele</footer> </div> </body> </html>

Panel not changing page in jquery mobile

Question

1 answers

solution1
0 2016-11-12 17:50:09

Panel not changing page in jquery mobile

Question

1 answers

solution1 0 2016-11-12 17:50:09

solution1
0 2016-11-12 17:50:09