I have a wizard form (single html page with multiple form sections) that I am validating using multiple Ajax calls (POST requests to and from an iFrame for IE9 support) and I am having some very strange behavior with an onbeforeunload() event. On 2/3 sections of the form I want this event to occur, it does, but one particular form segment has strange behavior when I click the browser back button.
Here is how I administer the property:
$(window).on({
beforeunload : function(e) {
return "If you navigate away from the page, you'll lose any unsaved information.";}
});
When I click on the browser back button in the particular spot in the page, my ajax call fires and the success callback activates. Super crazy. I've tried setting that property everywhere I can think of. Any advice is appreciate. I can paste more relevant code if need be.
EDIT: Also, through some form of sorcery, the title of the page changes in the broswer tab to the page's URL, strange...
Related
I'm working on a site that provides web access to to legacy data.
The basic flow is for the user to select a query form from a menu, fill out the form, and submit it. The server generates the appropriate HTML and returns it to the browser. So far, so good.
Some reports can take some time to generate. For those reports I display a "processing" indicator when the form is submitted. This indicator is a normally hidden <div> containing an animated icon.
The problem comes when a user uses the browser's Back button to return to the query form. When the browser re-displays the page with the query form, the processing indicator is still visible. The only way to get rid of it seems to be to refresh the page at that point.
Is there any way to hide it after the Back?
You could set a JavaScript event to automatically remove the indicator after the page loads. That way, the indicator won't display unless the script later tells the indicator to show. In order to avoid never displaying the indicator, you could place the code that displays the indicator after the event that automatically hides it, both occurring on the page loading.
I finally have a solution for this that is working well enough in this application.
Some browsers, like Firefox, fire a document.focus event when the page is re-displayed. Others, like Safari, fire a window.popstate event instead.
I now hook both of these events and it works as expected 99.9% of the time.
As far as I could find, you should be able to use pageshow window event:
The pageshow event is sent to a Window when the browser displays the window's document due to navigation.
This includes:
Initially loading the page
Navigating to the page from another page in the same window or tab
Restoring a frozen page on mobile OSes
Returning to the page using the browser's forward or back buttons
<!DOCTYPE html>
<script>
window.addEventListener("load", console.log);
window.addEventListener("pageshow", console.log);
</script>
<p><a href="https://html.spec.whatwg.org/multipage/">Navigate
away</a> (then come "Back")</p>
See also:
Can I use "pageshow"?
I am looking to develop a small popup message which acts similar to the window.beforeunload function, to notify the user, that if they leave the current page, they will lose all of their data.
However the issue with the beforeunload event is it fires to often.
I would like to have the popup message fire only when a user closes the page, or clicks a link which takes them away from the current page, to ensure they are aware that their current action will result in the loss of the form data they have entered so far.
However beforeunload event goes further to fire when they refresh the page, which is not needed for this case, and also when the forum is submitted.
Could anyone advise me on the best way to develop this. I thought about using a basic confirm dialog and have it fire under the right circumstances, however is it possible to know if the user is refreshing the page, and if the forum is being submitted (without jQuery).
How can I have this dialog fire at the appropriate times?
Unfortunately, I don't think this is possible. The page unload events are very limited, for security reasons.
If you only want it to appear if the user added or changed formdata, why not check for changes in the data? If yes then return the question on beforeunload, if not do nothing.
Assuming that the form isn't too complicated, you could save form data by using Ajax call, which means there will not be a page reload. So, beforeunload will then behave as it was designed to.
I'm using a script to fade out the page content when user is actually leaving the page.
For that I tried using the beforeunload event.
It works fine when I navigate through my site, however I also found it triggering on application launch, such as skype button. Even though I never left the page yet...
What is the best way to validate onbeforeunload event against premature triggering?
I guess I should still use my:
$(window).one('beforeunload', function() {
// need to make some condition, if really leaving the page - execute
$('html.nojs').stop(true,false).css('overflow','hidden').animate({opacity:0},2000);
});
But I would need to use some condition... just cannot think of any...
EDIT:
Rmoved the link to the site
The animation does work, but if you go to any specific product and click skype button there you will see the it makes poo...
EDIT2:
The solution to this problem is to detect what triggered an before unload event. As I said, by writing some condition inside that call.
We must find a way to find out whether the event was triggered by external application call (such as skype button that tries to open application) or was it something else, like... for example:( link click, a button submit, script for location change, starting a search, hitting back/forward, or refreshing the page).
This the accepted answer for this question
Capture user response when using window.onbeforeunload
If you need to know what triggered the onbeforeunload event, you can have a global variable, then set it to true when you click on the Skype button. Then check it inside your onbeforeload event.
I searched a lot to get rid of this problem on the internet but could not find a specific solution despite the problem being discussed in details previously.
The query is simple. My javascript dynamically adds an Iframe to the web page (which displays a feedback form). The problem is that, "after answering", now when the user clicks the back-button of the browser the iframe instead of the browser window is affected i.e. the questionnaire is displayed again. I want the browser back button to behave normally.
This behavior is really annoying and I am having real trouble fixing this.
I am using firefox.
Looking forward to the replies. Please inform me if I should give more details.
Thanks,
Your form has a submit button, which posts the page to the server. The back button will always send the user back to the form regardless of whether you use a iframe or not. The ideal way is to notify the user of a completed action, in this case thank the user for the feedback (using an alert box) and redirect the user to the home page or provide a button in the page saying "Back to Home".
Firefox and IE indeed act like you mentioned, but Chrome do not, and I'd guess other WebKit browsers would do the same.
In Chrome, clicking the Back button will land you where you want to go (the previous URL of the parent frame). i.e. Chrome to not add iframe URL changes in the back button history.
Sadly, I've found no way to force IE and FF to replicate this, so I used the AJAX post approach suggested above by Arun.
Here's my iframe source, which use jQuery to post the form, and replace the whole page with the result of that POST:
<form method="post" onsubmit="postForm(this);return false">
...
</form>
<script type="text/javascript">
function postForm(form) {
$.post(form.action, $(form).serialize(), postCompleted);
}
function postCompleted(data) {
$('html').html(data);
}
</script>
This works in all browsers; clicking the Back button will send you back to the previous URL a seen by the end user, instead of the initial form loaded dynamically in the iframe.
I encountered the same problem: I use a dynamically created iframe to show a "popup" on my page, whose SRC points to another page that has got a form and a submit button. After submitting that page, a JS callback is used to hide the iframe. As you explained, this causes a new entry to be added to the history (on IE at least).
But I found out that removing the iframe element from the DOM (instead of hiding it) results in the unwanted history entry being removed (tested on IE9)! Which is what the user would expect in that situation.
You can observe this yourself on IE9:
Open the back button menu (right-click the back button): you only have one entry for the current page
Press submit in the iframe => the back button menu shows one extra entry for the iframe
Remove the iframe from the DOM => the back button menu no longer shows that entry
I have a function that is suppose to trigger when user closes their browser and I have put the code in the window.onbeforeunload function.
The thing is every time if I reloads the page in Internet Explorer, the onbeforeunload event will also trigger which is a problem because I only wants it to trigger only when the user closes or navigates away from the current page but not on a page refresh/reload.
Therefore I'm not sure if onbeforeunload is intended to trigger even on a page refresh/reload and if it is intended to, then is there another way to work round it?
Since you are relying on javascript as it is, you may want to look into resolving the issue as to why they have to refresh the page. You can use XMLHttprequest to refresh the content for them so that the desired onbeforeunload function is only called when it needs to be.
There's no smart way to work around it. Any unloading action on the page will fire the unload and beforeunload events and there's no way to tell the difference between a refresh and a navigation.
You could attempt a couple of things, but there's no 100% method. For instance, capturing the F5 or Ctrl+R keys would identify a refresh, for which you could unset the onbeforeunload handler, but it would not work for users who click the refresh/reload button on their toolbar. You could attach an event handler to all clicks on an <a> element or any <form> onsubmits, but this wouldn't help for users who type a new address into the address bar from your page.
Even if you use XMLHttprequest to refresh, IE has a problem. You have to call the javascript function that contains the XMLHttprequest, for example,
click to add content
will trigger an onbeforeunload event on IE, but not on Safari or Firefox.
One solution that'll work in some situations is to handle the event conditionally, turning it off when you want to load content then turning it back on
var guard = true;
function myOnbeforeunloadHandler()
{
if(guard)
{
return "you are about to leave the page and lose data";
}
}
function addContent()
{
getElementById("myDiv").html = "<p>some content</p>";
guard = true;
}
<a href="javascript:void(0) onclick="guard=false;addContent();> click to add content</a>