I am facing issue while calling the browser back button. Actually in home page I am displaying the bootstrap modal for signup. But when user clicks on another page like cart page... once user reaches the cart page and presses browser back button modal again shows. I want to hide the bootstrap modal on browser back button. I have tried many snippets but none is working. Below is my code:-
$(function() {
if (window.history && window.history.pushState) {
$(window).on('popstate', function() {
alert('Back button was pressed.');
$('#MyMODAL').modal('hide');
});
}
});
Not even the alert box is showing. Can anyone help me on this issue.
Related
I want to use drawer. I wrote the basic code such that when user clicks nav button, the drawer.open is toggled (i.e. true, false, true, false, ...). However, if user goes to other page by clicking a link in drawer menu and comes back by clicking browser's back button, drawer.open is true and user can not click browser's nav button.
User opens the page: drawer.open=false.
User clicks the nav button: drawer.open=true .
User clicks a link in the menu: drawer.open=false in new page.
User clicks browser's back button and comes back: drawer.open=true .
Why is drawer.open=true in 4.? How do I fix this?
Reload the page to initialize JavaScript variables when user clicks browser's back button.
<script>
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
};
</script>
I am developing one stepwise form application where I am displaying some information on Modal popup. I am able to display the required information. If I refresh the page when the Modal is open the current Modal will close. Is there any way to stop closing the Modal on page refresh?
You can not prevent user clicking the refresh button.
Instead you can keep the state of the form in the local storage and in the page load event check if the user was in the middle of the form process.
If so, just show the modal again. There's no any other way.
//This is an example. This should be added when the user seen the dialog.
//This is just a Bootstrap example. Just to demonstrate the logic.
$("#modal-dialog").on("shown.bs.modal", function(){
localStorage.setItem("IS_SET", true);
});
$("#modal-dialog").on("hidden.bs.modal", function(){
localStorage.setItem("IS_SET", false);
});
$(document).ready(function(){
if(localStorage.getItem("IS_SET") && localStorage.getItem("IS_SET") === true){
//Which means the user was in the form process.
//And show the modal again on page refresh.
$("#modal-dialog").modal("show");
}
});
If you don't like the localstorage method, you can set a URL param which can be seen publicly in the URL.
I'm trying to show a modal (with a message and the confirm button) before page reload.
I have to check an array: if it is empty I do the refresh, If it's not I want to show the modal and ask to the user if want to reload.
I tried this code:
$(window).bind('beforeunload', function(){
if(_pendent_annotations.length > 0){
$('#change_document').modal('show');
$("#change_doc_button").click(function(){
location.reload();
});
return false;
}
});
The problem is that on reload it shows an alert with the message:
"Are you sure you want to navigate away from this page?
false"
Then I can choose to leave or to stay, if I choose to leave it reloads if I choose to stay it shows my modal.
How can I avoid the alert and only show my modal to make the user choose?
Thanks
Try this out:
You need to prevent the event to return anything.
window.addEventListener('beforeunload', function(event){
if(_pendent_annotations.length > 0){
$('#change_document').modal('show');
$("#change_doc_button").click(function(){
location.reload();
});
}
});
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
I want to show a popup when user click on the close button or back button in browser in checkout page of my site. I have implemented the following code for that ........
function PopIt() {
$("a#trigger").trigger('click');
window.onbeforeunload = UnPopIt;
return "Would you like to join our mailing list for other offers?";
}
function UnPopIt() { /* nothing to return */ }
$(document).ready(function() {
//window.history.forward();
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'hideOnOverlayClick': false,
'showCloseButton': true
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
Now everything is working fine. But the final requirement is when user click on the back browser button from the checkout page, the fancy box popup appear and it will stay ~40 seconds then the page redirect to back.
I can't solve this problem. How do I stay the popup when already the page redirecting to click on the back button on browser. Is it possible? Please help me
Have you tried (#user1721135)
Jquery when back button is pressed
I understand is a different event but maybe can help :S.... Also: (#IMRAN ABDUL GHANI) Solution to browser back button click event handling
Firstly: I ma very new in jQuery and web front-end.
Problem:
I have a test site
Steps to see the problem:
Click on [UploadTest]
Click on any pic in gallery to see an overlay
Click on browser's Back button
Now I see main page with the overlay.
Question is how to hide overlay when I leave the gallery page by Back button?
Sometime othe overlay is hidden but when I go on gallery page again it is visible.
How to hide it automatically?
Thanks.
UPDATE: Sorry, I can not post sources because I do not know where is problem. Please if you have a minute look inside sources in browser.
$(document).ready(function () {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
$("#galleryOverlay").css('display', 'none')
});
}
});