jquery mobile - Header back button with forced refreshing -


i needed force refreshing using this technique. when navigate new page jqm correctly adds button in header. when go first page button incorrectly appears. possible conditionally create button? have tried manually creating button , conditionally hiding based on parameter in uri seems once button appears can never hide again.

edit: here code demonstrates problem. not not hide custom button when go page 1, doesn't hide "page 1" content when on page 2, or visa versa. seems once has been shown cannot rehidden.

<html>     <head>         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>         <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>         <script>             var backbuttonvar = null;             var page1var = null;             var page2var = null;         </script>     </head>      <body>         <div data-role="page" data-add-back-btn="false">             <div data-role="header">                 <h1>test</h1>                 <a id="backbutton" data-role="button" data-direction="reverse" data-rel="back" data-icon="arrow-l" data-iconpos="left">myback</a>             </div>              <div id="page1" data-role="content">                 <a href="index.html?id=2">go page 2</a>             </div>              <div id="page2" data-role"content">                 page 2             </div>              <script>                 $(document).ready(function() {                     jquery(document).on('pagehide', 'div', function(event, ui) {                         var page = jquery(event.target);                         page.remove();                     });                      backbuttonvar = $('#backbutton');                     page1var = $('#page1');                     page2var = $('#page2');                     // root?                     if (window.location.search == '') {                         backbuttonvar.hide();                         page1var.show()                         page2var.hide()                     } else {                         backbuttonvar.show();                         page1var.hide()                         page2var.show()                     }                 });             </script>         </div>     </body> </html> 

here fix. give back-button class backbutton. .hide() if active page home page page1, else .show() it.

demo

$('.backbutton').hide(); $(document).on('pagebeforeshow', function () {  var activepage = $.mobile.activepage;  if (activepage[0].id != 'page1') {   $('.backbutton').show();  }  else {   $('.backbutton').hide();  } }); 

if have question, please let me know.


Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -