I am currently trying to manually develop an unsaved changes warning in our JSF-based Webapplication. Sadly our customer does not like the styling of the default warning displayed via an alert() after using the onbeforeunload event and requires us to develop a similar mechanism on our own.
I was thinking of using the way described here to prevent the onbeforeunload event from displaying the alert() and simply showing my own modal panel. I just can't figure out how to make the "Yes" (yes, I want to leave this page and lose all unsaved changes) button work. The button should basically resend the request which lead to the onbeforeunload event which could have been a HTTP Request as well as an Ajax Request. How would one do that via JS?
Thank you :)
Cheers
//edit: It needs to work in IE9 as well as Chrome 38
Related
I am trying to add a onbeforeunload to my code so it fires a message that is sent to a server. I am encountering the following issue:
On page refresh, the message is sent to the server when using Firefox. It does not send a message to the server when I refresh the page on Google Chrome.
When clicking on links on my site to navigate to different sites, the server gets a message only when using Chrome. Firefox does not send a message when clicking on external links.
I also know that onbeforeunload is supposed to work when the window is closed, you enter a different website and navigate to that. There are some additional cases which also trigger the function. My site does not work with any of these along with the errors mentioned above.
If there a fix to this? If so, what can I do? I have looked around to fixes but I only get fixes where it prompts the user on whether they want to leave the page or not, I do not want that.
Additionally, I tried adding the function call to onclick on my external links but that is not being triggered on Firefox. I am guessing this is due to the amount of time onbeforeunload has before it is cancelled. If so, there a way around this?
Lastly, if this is not possible with onbeforeunload, what are my other options without prompting the user if they want to leave or not.
Thanks in advance!
EDIT: Here is some code that can be used:
https://jsfiddle.net/985drboy/
Make sure, that your code sending the message to the server is blocking and not async. If onbeforeunload returns before your message is sent, you get undefined behavior e.g. your message might not be sent if the page is unloads before the sending was complete. The browser continues unloading as soon as unbeforeunload returns.
I am using Django v1.10 for an application where in need to send an API call just before browser close through crude javascript (don't want to use any library for sake) preferably. I've read about window.unload and window.onbeforeunload. The first one didn't seem to work at all. The second can work but it also gets executed when there is reload or redirection to another page (it works as it should but that is what I don't want). I've tried using SESSION_EXPIRE_AT_BROWSER_CLOSE of Django which works only when a user has totally exit out of the browser (no browser process running). I've also seen answers on the web where people have suggested to open another window/tab of the browser through JS as the tab closes.
So in precise words, I want to make an API call just before browser tab close (not in any other situation).
Please help!
On a real estate website I'm working on I have a Contact Us form on the Property Details page where the user can click the Contact Us button, which will load the form in a modal dialog, an iframe loading the contact us form, fill in some details and send it off.
Once the form has been processed server side I have to emit JavaScript code from the server that calls the dialog close method and then redirects the user to a thank you page (If I did a simple redirect on the server the iframe would get the thank you page which I don't want).
The problem is in Chrome where if you hit the Browser's back button the contact form is quietly resubmitted.
Note: IE and Firefox don't have this issue at all.
I found the following links useful, but not the answer to my problem:
https://productforums.google.com/forum/#!topic/chrome/J1KMARIIHW4
https://code.google.com/p/chromium/issues/detail?id=263508 (this one seems very close to the behaviour I'm seeing - but it seems like a bug that has continually resurfaced over the last couple of years)
Chrome executing all JS again on browser back button
We've tried various techniques to circumvent the issue in Chrome like hidden fields, insured cache is turned off, destroy the iframe before redirecting to the thank you page. Nothing it keeps resubmitting the form without even asking if you want to resubmit (not that it should be resubmitting at all)
Just come across this issue, what I'm thinking of doing is including some sort of one-time token (i.e. GUID) in the form, which if we re-detect on the server we can ignore the form post. Possibly use session state on the server to keep track - much like a Rails authenticity token
I'm using asp.net webforms, so every server control generates post request on click. If I try to reload page with F5 or Ctrl+R after that request, browser by default shows re-post warning.
To avoid this behavior in IE 7-* I tried this solution: Unable to disable F5 key in IE8
But there is still warning in IE8 after post, whereas after get request all right.
How to deal with it?
You really shouldn't disable the F5 key or the browser back button as this is breaks the user mental model of how the browser works (and this is a bad thing).
The post warning is important because you really are POSTING the data back to the server (if this was after posting a record to a shopping cart) then you would submit the purchase again or add the previously added record to the database again.
It would be better to provide them with a clear and obvious way for them to get updates to the page when then require them.
A suggestion
If you just want to refresh the page to see the contents of an updated table or list or to get the latest status after the post then you could provide a button or link on the page that the user can click that preforms a AJAX get for the information that you requires and then just update the part of the screen that you need to redisplay.
You could also also do this with a SetTimeout so that the page / data updates in the background without the need for the user to click on a button or link.
I am writing a Chrome extension, and I want to fire a POST submission RIGHT before my client unloads a webpage.
To do this, I tried using both window.onunload and window.beforeunload. When the page unloads, I use jQuery.ajax to make my POST submission. I also include async: false in my request.
With this, my POST triggers successfully for MOST WEBSITES upon unloading. However, there are some websites that just don't seem to be firing the unload function!
Sites that aren't triggering for me include (just out of testing): http://www.yahoo.com and http://www.paulgraham.com/ds.html
I am really stuck. Is there something specific about the sites that aren't firing that I'm not accounting for? What can I do to make my function trigger universally?
Thank you!