I have a jQuery Mobile app with two pages. The first navigates to the second. When navigating back to the first one from the second, I want to remove the second page from the DOM. I do this with this code:
$(document).on("pagecontainerbeforechange", function (e, data) {
if (typeof data.toPage !== "string" && data.options.direction == "back") {
// Remove the previous page
data.prevPage.remove();
}
});
But then when I attempt to navigate to the second page again, nothing happens. The pagecreate event for that second page is never raised either.
I have a repro at http://jsfiddle.net/thalman/t6mfxj2f/13/.
Related
The initial task is to handle hardware back button, when Fancybox image is in fullscreen mode.
At now, when user press back button on phone, current page changes to previous and fulscreen image stays on foreground.
The task is to close Fancybox image and stay at current page.
I did it this way:
$(document).on("pagecontainerbeforechange", function (e, data) {
if (typeof data.toPage == "string" && data.options.direction == "back") {
if ($(".fancybox-is-open").length) {
// close fancybox
$.fancybox.close();
// stay at current page
data.toPage = '#' + $.mobile.activePage.data('url');
$.extend(data.options, {
changeHash: true
});
}
}
});
Fancybox is closed, user stays at current page, but when he clicks on Back button again, he gets on page, which is before previous one.
How correctly prevent page change?
Problem was solved by itself, when I started to use fancybox gallery widget.
Old problem link was:
<img src="image_full" />
New link is:
<img src="image_full" />
And no js additional code is required.
there might a solution also. I have the same problem.
I think you have to add a "a" around your image such as, with only href to #:
<img...>
Then you have to create a js function to detect a hash change. With the hash change, you select your modal and close it. Add this javascript:
<script type="text/javascript">
window.onhashchange = function() {
//console.log(location.hash); // for debbuging
if(location.hash=="#biggerImage"){
$('#myModal').show(); // $ is the jQuery selector - it will see the hash is for opening the image and it will show the Modal
}
else{
$('#myModal').hide(); // $ is the jQuery selector - in the case where the user presses "BACK" button , the hash will not have the #biggerImage anymore, so the code will hide the Modal, giving the effect that the back button closes the Modal
}
}
</script>
In the case where the user presses "BACK" button , the hash will not have the #biggerImage anymore, so the code will hide the Modal, giving the effect that the back button closes the Modal
Prior to JQM 1.4, I created dialogues using data-role="dialog" and those pages were not added to the back stack, so navigating off one and then pressing back would bring you to the page before the dialog.
Now with 1.4.5, dialogues are defined as data-role="page" with data-dialog="true". Using this method, the dialog is added to the back stack, so if I navigate off the dialog and then tap back I am returned to the dialog. This is not the behavior I want. Is there a way, when the dialog opens, to tell JQM NOT to add it to the back stack?
Updated
As of jQuery Mobile 1.4, dialog widget is deprecated and will be removed in 1.5. It is now converted into a page - as you've mentioned - with data-dialog="true".
When you navigate to a dialog, jQM updates framework's navigation history as well as browser's navigation history. Even if you navigate to a dialog programmatically with changeHash disabled, when you hit back button, you will redirected to second previous history record.
A work around is to listen to pagecontainerbeforechange and alter toPage to navigate to the page where the dialog was called.
$(document).on("pagecontainerbeforechange", function (e, data) {
if (typeof data.toPage == "string" && data.options.direction == "back") {
var active = $.mobile.navigate.history.activeIndex;
for (var i = active; i >= 0; i--) {
if (!$($.mobile.navigate.history.stack[i].hash).hasClass("ui-dialog") && !$($.mobile.navigate.history.stack[i].hash).hasClass("ui-page-active")) {
data.toPage = $.mobile.navigate.history.stack[i].url;
data.options.transition = "flip";
break;
}
}
}
});
When you want to alter toPage, it should be a string and not an object. The event fires twice on each navigation, it returns string first and then an object.
When it returns a string, check navigation direction options.direction. If the direction is back, loop through $.mobile.navigate.history.stack in reversed order. The previous record should not be a dialog ui-dialog nor the active page ui-page-active. If both conditions return true, alter toPage.
Demo
I have a link in my navigation toolbar which is in the footer. When I am on a page, and click on the nav link, It brings me to #the-page for a split second, but then I get redirected back to the page I was previously on.
Anyone else run into this problem?`
$('#page-link').on('click', function() {
$.mobile.pageContainer.pagecontainer("change", "#the-page", { } );
});
This on click was in a pageshow function of the page that was showing for a split second
$('.ui-listview').on('click', 'li.latest-news', function() {
$.mobile.pageContainer.pagecontainer("change", "#single-article", { } );
});
by moving it to a pageinit function it seemed to fix it.
It turns out this was a rebinding problem, I added a console.log inside of this function, and realized it was being called multiple times per click.
I have a button that is visible only for certain item's page. Clicking the button leads to the item's detail page. On hitting the browser's back button, the item page is rendered without the button. And, if I hit refresh then the button appears. How do I render the button as well without refreshing.
Thanks!
just in case anyone is looking, for the button to be visible some other .cshtml page was handling it based on some event response, using a script that removed the "invisible" from its css. So, on hitting the browser back button the event would not be called and hence the button was still invisible. I needed to make the button visible. The only workaround I found was this -- a hidden check included in the target page after hitting the browser back button.
<script type="text/javascript">
onload = function () {
var e = document.getElementById("reloaded");
if (e.value == "no") e.value = "yes";
else { e.value = "no"; location.reload(); }
}
</script>
I have a page where I need to show/hide divs based on what button the user clicks. In the page, I have two divs (divBranchList and divGrowerList) and two buttons (btnBranch and btnGrower). I am using the following code to show/hide the divs.
$(document).bind('pageinit', function () {
alert("here");
$("#divBranchList").hide();
//show hide lists
$("#btnGrower").click(function () {
$("#divGrowerList").show();
$("#divBranchList").hide();
});
$("#btnBranch").click(function () {
$("#divBranchList").show();
$("#divGrowerList").hide();
});
});
While this works perfectly when the page loads or if I refresh the page, but fails to work when the user clicks on a listitem and the page comes back from the server after getting some data. The page has both lists visible although if I put a breakpoint at the following line in Firebug's script panel, it does get hit.
$("#divBranchList").hide();
Any ideas why the div is not hiding or how to make it work?
If you're showing and hiding content in a JQueryMobile page, you will probably need to trigger the UpdateLayout event
$("#divBranchList").trigger("updatelayout");
after you've done your showing / hiding...