Menu
I needed to force refreshing using this technique. When I navigate to a new page jQM correctly adds a back button in my header. But when I go back to the first page the back button incorrectly appears. Is it possible to conditionally create a back button? I have tried manually creating a back button and conditionally hiding it based on a parameter in the URI but it seems that once the button appears I can never hide it again.
Edit: Here is some code that demonstrates the problem. Not only does it not hide the custom back button when you go back to page 1, but it doesn't hide the "page 1" content when you are on page 2, or visa versa. It seems that once something has been shown it cannot be 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 to page 2</a>
</div>
<div id="page2" data-role"content">
This is 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');
// Is this the root?
if (window.location.search == '') {
backButtonVar.hide();
page1Var.show()
page2Var.hide()
} else {
backButtonVar.show();
page1Var.hide()
page2Var.show()
}
});
</script>
</div>
</body>
</html>
239
Here is the fix. Give the back-button a class backButton. .hide() it if the active page is the 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 you have any question, please let me know.
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
