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
Related
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.
My aim is to have a exit pop up which triggers the window.onbeforeunload if somebody tries to close the current tab or browser. But after they complete a sign up form to opt in to my e-mail list and redirect to my "Thank you page URL", I do not want the exit pop up to show.
I am using a page builder, so the code is not written by myself.
This is the following script I am using:
window.onbeforeunload = function(e) {
return 'Are you sure you want to leave this page? You will lose any unsaved data.';
};
</script>
As for my form, because after the user enters their name and clicks submit, they redirect to a URL and the exit pop is triggering once the redirect begins. I only want the pop to show if they try to leave opting in then disable this after they take that action.
I notice an a class tag with the href="submit-form" My form is also contained in the form target tag if that helps.
How do I implement a script which disables the exit pop up after redirecting to a new page in a HTML sign up form?
Thank you for any insight.
You could achieve that by using if-else statements and setting the event to null if a form is being submitted.
Here is an example
`
window.onbeforeunload = function(e) {
e.preventDefault()
if($('form').submit(){
return null;
}
else{
return 'Are you sure you want to leave this page? You will lose any unsaved data.';
}
}
`
PS: I have not tested it but it should work
we r having functionality, when we edit the draft for specific job role.. It is redirecting to that edit draft page. This page has cancel button, on click of which we get confirmation box.. having msg ("Directing back to the previous page, changes made will not be saved.") also "OK" & "Cancel" button.
My Problem
In current code when I click on "OK" It is redirecting to parent page (which is correct) but when I click on "Cancel" button or cross mark of confirmation box, still its redirecting to the parent page (which is wrong) it should remain on the same edit page when I click on cancel button(or cross mark). I need help for this. Thanks.
****JS code for cancel button:****
jq("[data-dom-id=sdd-ejrp-btn-cancel]").click(function ()
{
var sdd_ejrp_btn_cancel = jq(this);
if (confirm("Directing back to the previous page, changes made will not be saved."))
{
}
});
UI code in soy template:
<button data-dom-id="sdd-ejrp-btn-cancel" onclick="{if $pageId > 0}javascript: event.preventDefault(); window.location.href='{$baseUrl}/pages/viewpage.action?pageId={$pageId}'{/if}{if $pageId <= 0}javascript: event.preventDefault(); window.location.href='{$baseUrl}/pages/viewpage.action?pageId={$parentPageId}'{/if}" class="aui-button aui-button-link">Cancel</button>
You need to return false; if OK is not clicked. Below is the code:
jq("[data-dom-id=sdd-ejrp-btn-cancel]").click(function() {
var sdd_ejrp_btn_cancel = jq(this);
if (confirm("Directing back to the previous page, changes made will not be saved.")) {
console.log("Clicked Yes!!.. It will redirect.");
} else {
console.log("It will stay here... ");
return false;
}
});
I think the issue is using <button> inside a form. Whenever a click happened, the form will submit. Try changing <button> tag with <span> or other elements
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
Hey guys, I am showing a javascript dialog box to user using window.onbeforeunload to handle if user clicks back button.
My code is working to a point, but I am struggling to redirect the user if they click 'Leave this page' (Message varies in different browsers).
// Set check var false to begin with
// This is set true on submit btns using onclick event
submitFormOkay = false;
// If we are on check-availability page
if( window.location.href.indexOf( 'check-availability' ) != -1 )
{
// If back button is clicked
window.onbeforeunload = function()
{
// Only show dialog if submit btn wasn't clicked
if (!submitFormOkay)
{
// Show dialog
return "Use of the browser back button will lose form data.\nPlease use the 'Previous' button at the bottom of the form.";
// If 'leave' this page was clicked'
// do 'window.location = window.location'
}
}
}
Thanks in advance.
David
If they click "Leave this page" then the browser will complete whatever action the user was trying to perform before the dialog popped up.
But if they do navigate Back, they will still be on your site, right? So you can just do whatever you need to do when that page is re-requested (providing it's not cached).
In other words ... detect on server-side if the user has clicked Back, and then do whatever you would have done if they had clicked Previous.