I have implemented unsaved changes warning before tab out to other page. So I need to save the current form before the page unload. I trigger these functions using onbeforeunload event.
if(confirm(confirm_msg)) {
save_data_using_ajax_call(url)
}
also I tried
if(confirm(confirm_msg)) {
document.form_name.submit();
return 'changes saved';
}
First method working in Firefox, But not in chrome. In IE8 it get returns before the form has saved. Second method not working in chrome. but works in firefox and IE. Can anyone tell me a consistent way of approach?
Related
I have added code to change web page color on beforeunload event:
window.onbeforeunload = function (){
$('.navbar-collapse').css({background: 'blue'});
console.log("Hello unload");
return null;
}
This code works properly on Chrome and Firefox but it doesn't work on Safari browser.
However, when I debug this code in Safari, when stepping over each line of code in the callback function, id DOES changes background color.
When I navigate by clicking on an url on page and then click back button on browser, the background color is changed.
Any idea?
window.onbeforenload is "magic" in the sense that it is special and more and more browsers are restricting what it can do.
Some browsers will let you display a custom message, other browers are free to ignore this event entirely.
In short: Don't try to do anything but return a null or non-null value and hope for the best. It is out of your hands.
You might want to see this answer too: window.onbeforeunload and window.onunload is not working in Firefox , Safari , Opera?
I have the below code to reload the CAPTCHA image on a page of mine whenever the page is reloaded (mainly for when people hit the back button to edit a two-page form). The code works perfectly on Chrome and Firefox, but does not function on IE (the CAPTCHA simply does not reload). How can I edit the code so that it works in IE? I don't know the differences between the browsers well enough to figure it out.
This is in IE 11, using jQuery 1.10.2. The console does not return any errors in any browser, IE included.
jQuery(document).ready(function() {
jQuery(window).load(function() {
Recaptcha.reload();
});
})
Some browsers (and by some, I mean IE in particular) don't like to execute document.ready when you hit the back button, so the code simply doesn't run.
Add this in your script and it should resolve the problem (it fixed similar issues for me)...
window.onunload = function () { };
my script reads something like this:
$(window).bind('popstate', function() {
//some code
//few more lines of code
});
This function works perfectly as intended in Chrome and Safari browsers. But Firefox for some reason ignores this function and does not work as intended.
Instead of using:
$(window).bind('popstate', function() {
//some code
//few more lines of code
});
You can use:
window.onpopstate = function() {
//some code
//few more lines of code
}
As firefox is using W3C defined rules for history API, so you have to use this for firefox and it works in chrome, safari and other browsers as well.
Note that just calling history.pushState() or history.replaceState()
won't trigger a popstate event. The popstate event is only triggered
by doing a browser action such as a click on the back button (or
calling history.back() in JavaScript).
Browsers tend to handle the popstate event differently on page load.
Chrome and Safari always emit a popstate event on page load, but
Firefox doesn't.
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/popstate
Are you saying Chrome and Safari fire the event on page load or when the browser's back button is clicked? If the former, it's because Chrome/Safari are out of compliance with the HTML5 specs => the event should never be fired on page load. Up-vote https://code.google.com/p/chromium/issues/detail?id=63040 to get Google to fix this.
Please do Check that if you have coded window.load() more than once OR have called .onload() more than one time. This probably may work for IE but not for Chrome and fireFox.
I have a problem on Chrome on Android OS.
I work with a html5 page with jQuery and javaScript.
I have select box , number input .. etc.
When i try to "click", I have:
var hitEvent = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click';
on a input or select nothing happens.
However when i do an alert("something") everything starts working.
On every browser works ok (Safari , Chrome on iPad,iPhone... ; Firefox , Internet Browser on Android) but not Chrome on Android.
Do you have any idea on how to solve this problem?
Normally when everything works after you put an alert,
that means there is a problem in a asynchronous call.
What is happening is that the alert is giving time for the page to really load or an event to actually happen. when you don't put an alert, an action is happening before the event
(for example an element is being called before it is generated)
Search in this perspective.
If it's working in Firefox, it is by pure luck from the way firefox is rendering the page, but still you have to fix your error.
I have a script that if user is uploading file and try to close the browser it will trigger the onbeforeunload() and popup an alert.. I change the message but somehow it does not work in firefox, it works perfectly fine on IE or opera or safari.. the code is something like
window.onbeforeunload = checkUnload;
function checkUnload() {
if (document.upload.isEmailing())
return "Aaaa";
So, in IE and opera, when users close the browser during emailing, it will show pop up saying "AAAA" with leave or stay page button.
However, in firefox, it show
"This page is asking you to confirm that you want to leave - data you have entered may not be saved." with leave or stay page button.
Why it does not work, am I doing something wrong?
Note: FF I am using is the latest version if that will help.
For security reasons, Firefox now ignores the string you return.
There is nothing you can do about it.
According to MDN:
Note that in Firefox 4 and later the returned string is not displayed
to the user.
See the referenced bug for more info.