Stop safari from showing unsaved form prompt when page is refreshed - javascript

I have a form (with just one text area) that is submitted using AJAX to allow users to save a note about a page. The form stays visible on the page all the time, and you can keep clicking save to keep updating the note.
In safari (but not chrome or FF), if you start typing in the form and hit reload, the browser prompts you with a "are you sure you want to reload, you have unsaved changes" type dialog. My problem is that the dialog also pops up if you save your note, and then hit reload without making any further changes to the text area. Is there some way in javascript for me to mark the form as submitted // unchanged so that safari knows not to show the prompt?

I'm not too sure about safari, but you can have this behavior in all browsers with the following:
var confirmLeavePage = "Are you sure you want to exit this page, you have unsaved changes..."
window.onbeforeunload = askConfirm;
function askConfirm(){
if (confirmLeavePage != false){
return confirmLeavePage;
}
}
then all you have to do is to set confirmLeavePage to false when there are no modifications to the document.
Hope this helps.

Probably not the greatest solution to your problem here .. however, if you remove the html form tags from your form, that should solve it.
Since you are using ajax already, you could get the values of the elements from the DOM directly ..
example ...
<form><textarea></textarea></form>
will give the are you sure message .. where
<textarea></textarea>
will just reload.
Hope this helps on a Friday afternoon :)

Related

How to change the text on the page refresh message pop-up?

I have a web page that gets refreshed, when something happens on any of its children pages. When it happens, the IE pop-up appears with the following message: "To display the webpage again, the web browser needs to resend the information you've previously submitted. If you were making a purchase, you should click Cancel to avoid a duplicate transaction. Otherwise, click Retry to display". See the image attached:
I'm ok with all that, but I was wondering if there's a way to change the actual text of the message, for example, removing the last sentence. I know this pop-up can't be tampered with, but perhaps there's a way to replace it with a custom made pop-up, serving the same function, but showing a different text. I assume first I would have to suppress the original message, then call a confirm box in a beforeupdate function, where clicking OK (for example) would resend the information submitted and Cancel would let you remain on the page without refreshing it. However, my Javascript and JQuery knowledge is a bit rusty and I'm not sure how to implement it properly. Any help is appreciated.
Thank you

window.confirm message not working when user disables additional dialogue from the browser

I am new to java script. And now have gone into a really serious problem.
Please help..................! stackoverflow
I have one jsp page for deleting entries. where user can delete data. As soon as he clicks delete button , he gets a confirmation window saying "Are you sure you want to delete..?". Problem is when user deletes 4,5 entries he gets an alert from the browser saying " [*] Prevent this page from creating additional dialogues." when user clicks the checkbox and prevents himself getting additional dialogues. my confirmation message "Are you sure you want to delete?" also gets blocked and user is unable to delete the data and the whole portal becomes useless.
please help me and let me know is there any way to handle that using javascript.
Browser alerts are little irritating. Create your custom popup or use Jquery popup. You cannot control browser alerts behaviour
You can use one of the best plugin for alerts and confirm dialogs
http://nakupanda.github.io/bootstrap3-dialog/

Jquery: how to handle "stop/cancel" event when user stops form submit?

I found this question but it wasn't answered: Is there a jQuery event that I can monitor if form submission is cancelled?
So if the user submits a form, while it's loading the user pressed "esc", or clicked "stop" button of the browser, I want to invoke a function, is it possible?
Note: I know we can bind "esc" button, but what about if the user stopped the submission by the browser's "stop/cancel" button?
Is there a JavaScript or jquery possible solution?
EDIT:
I know we can handle this issue with XHR (json/ajax) post, but I'm looking for a normal form submission.
Simply what I'm trying to achieve is this: when the user presses the "submit" button, I want to disable the submit button. If the user cancelled/stopped the submission while it's loading, the submit button will still be disabled (should be re-enabled if submission was cancelled/stopped).
Edit/Rephrase - 16th Dec 2013:
My problem is similar to this: Is there a jQuery event that I can monitor if form submission is cancelled?
For example, I have this form:
<form method="post" enctype="multipart/form-data">
<input type="file" name="imginput" value=""/>
<input type="text" name="textinput" value=""/>
<input type="button" id="submitbtn" value="Submit"/>
</form>
Here's the problem scenario:
A newbie user fills up the form, then double-clicks the submit button. The same form values are inserted into the server twice!
Trying to Achieve:
I want to disable the submit button on click with $('#submitbtn').bind('click', function() { $(this).attr('disabled','disabled'); $(this).prop('disabled', true); });, which solves the problem but creates another problem: if the user clicked "esc" or stopped the browser while the form is still submitting, the submit button would still be disabled and the user cannot re-submit the form any more, I want to re-enable the submit button as soon as the "submission process" is cancelled. Is there a way to achieve this? Something like: $(window).onStop(function() { ... }); ? or a way to indicate that the submission process has been interrupted (or still running)?
Notes:
Looking for client-side (javascript or jquery) solution. I know it can be solved easily with server-side checking for identical entries, but I'm not interested in server-side solution.
Problem can be solved with XHR (ajax/json) bindings (like onSuccess, onFailure, etc).. but in this case, I'm using a normal post, not XHR, so please exclude XHR from your answer.
Solution has to solve the problem at least for the 5 major browsers (IE, FF, Chrome, Safari, Opera).
Someone may suggest that we bind "keypress" for the "esc" button, so when the user press "esc" we re-enable the submit button. That's good, but that's half-solution. What if the user stopped the "submission process" by the stop button of the browser, is there a way to indicate that this stop button has been clicked?
Finally, this question actually breaks down the complex problem and can thus be addressed in parts, as it should be. First, let's get the elephant out of the room:
there is no cross browser solution that detects when the user hits a stop/(ref) button
I actually looked this up for a while and couldn't find how to do it but maybe someone can provide an answer to that and enlighten us both. Now, let's get the 2nd elephant out of the room.
No Ajax requests allowed (for some reason). Once the user has hit the submit button and the actual submit event triggers away, we are STUCK
It's a fact that we being able to do things while some request is being processed is what is called Asynchronous (like the first "A" in "Ajax"). Let's see the 3rd elephant
I have dumb/inexperienced/clickety-clackety/abusers users that can create inconsistencies on the server (ie: unwanted duplicates) by accident. We should provide a mechanism to impede such event.
Disabling buttons is, of course, the easiest solution in this dilemma. We capture the submit, put in a line to disable any further submit events from that form. Done. May the next elephant come in?
The process has begun, the user sees the progress indicator spinning and realizes he just fucked up. He wants to stop it, HELL! he needs to stop it.
Problem, the user doesn't know (and he sure as hell shouldn't need to know) if the server already has complete headers and is processing the request. The server can listen to see if the client aborted but...
The user hit the stop button! did the server process the request? did the server dump it? did my data hit the database? oh, now I have a disabled form that I can't use anymore, and I don't know if what I did had consequences. How about a refresh?
Now your issue has a bunch of big holes in it that are worsened by the fact that YOU do NOT want your requests to be ASYNCHRONOUS, AND there is NO WAY to listen for browser.onStopreliably.
My Answer
Think things differently.
You are afraid of inconsistencies. Solution: disable submit events after the first
Your users are dumb/inexperienced. Solution: big red label Warning: do not press the stop button during the process, or navigate away from the page until the request has completed.
Your users are worried. Solution: add a caveat You may edit your post/info in another page once the request has completed. (some instructions to find the edit page)
Your server (or slow connection) is taking too long to finish and the user may be impatient. Solution: set a timeout event before triggering the submission that will... but wait! the request is Synchronous which means nothing else can be done until it's finished. Dear User: this process may take a while. If after X mins you have not been redirected to this/page.html please... (do something/more instructions)
Take all this advice and start using Ajax if you want higher levels of interactivity, educate your users on the hazards of trying to abort requests and give them options to edit afterwards.
Follow examples of other services. Many companies warn very strongly during payment procedures to be patient until the process has finished and add some instructions just in case something goes wrong and the user is worried.
Consider adding limitations to the interactivity, some processes are just not meant to be interactive (payments, unique entries...)
If you are worried that a user will leave himself stranded on a disabled form then add some info to him. If you tried to stop the procedure please follow this link to see if it was processed, if it wasn't you will be redirected to this form again (you may want to save the users form data so he doesn't have to start over)
Internet Explorer has a document.onstop event that is fired, but other browsers don't seem to support that. Note that it's fired when the user clicks Stop or hits Esc, OR if the user navigates to another page during page load, which has the same effect.
I don't believe there is a reliable way to trigger an event on clicking Stop in other browsers. Perhaps it would be possible to do something like: keeping the connection to the server open (as in the Comet approach), streaming some sort of keep-alive down the connection, and detecting if the stream ends (as I assume it would if the Stop button were clicked).
From: Any javascript event occuring when user clicks Stop load button?
I based my answer on the comment hanzo2001 added in his question:
"The whole idea is prevent the user from clicking the "submit" button
more than once, so the user don't submit the same form twice or more."
Then you could possibly have a wasNeverSubmitted flag, and set it to true after the first form submit.
Finally you'd check this flag for every form submit, if true, then you cancel the form submission, see how to do this on this question Disable submit functionality for all forms on a HTML page
The code would look something like below:
HTML:
<form class="js-form-submit-once">
/* .. form elements here*/
</form>
Javascript (requires jQuery):
var wasNeverSubmitted = true;
$('js-form-submit-once').on('click', function(){
if( wasNeverSubmitted ){
wasNeverSubmitted = false;
/* ... do nothing, let it submit */
}
else {
return false; /* cancels form submission */
}
});

Safari Popup on tab close when submitting forms with AJAX

In Safari Browser, on a page with a form, there is a system modal popup that opens when the user tries to close the browser's tab and the form hasn't been validated. Text says: You have entered text on “[name of the page]”. If you close the window, your changes will be lost. Do you want to close the window anyway?
This behavior is ok when the post redirects to another the page. On our site, we have a page that validates a form using an Ajax Request. As the page is not reloaded, even if the form has been submitted, the popup appears, and it might feel strange for the end user.
The post is triggered by a button:
Forms are validated using the jQuery Validation plugin
Plugin options include a submitHandler option that return false;
Date are sent via $.post, and a message informs user for success/failure.
Does anyone have an idea about how to avoid this popup to be triggered once the call returns? We'd wish not to force a reload in that case.
Note that this behavior can be changed by the user, but not very easily...
I can't replicate this in Safari on Windows.
Maybe try emptying/resetting the input fields once the form has been submitted, only if there weren't any errors with the submission of course, or better yet, remove the form completely, if it's not needed after. Of course using DOM manipulation, not by reloading the page.
On a side note, seeing the filled-out form after it's been sent (even if you're showing a confirmation message) also can be strange for the user (unless it's a multiple-use form and this behaviour is expected).
UPDATE: tested on a Mac Safari, it's behaving as you described, but if I remove what I typed (that made the browser alert me in the first place), it doesn't come up. So, simple reset of the fields should do the trick.

JavaScript problem toolbar=no

I have a simple logon page. When the user is validated, the window navigates to a new page. The javascript is window.open('http://www.google.com',"mytest",'toolbar=no'); My expectation is that when it navigates away from our logon page and opens the google site that the back button would be disabled. But it's not. Does anyone have any idea why?
It depends on your browser. Ultimately, all you can do with javascript's window.open() is tell the browser what you'd like it to do, but it's not obligated to do it. Browsers can and do ignore some directives based on user preferences.
I believe the option your looking for is 'location=no', as that hides the address bar and therefore the back button too. The toolbar is things like favorites/etc.
This is bad practice - what happens if the user has javascript disabled? If the browser prevents the js from removing the toolbar of the main window?
Instead, amend the logon page to detect whether the user is logged in before showing the login form. If logged in, show a message saying so instead of the form - that way, a user clicking back won't be a problem.
I find it very annoying when a website messes around with my browser window, and generally don't come back.
This is what worked for me. Instead of disabling the back key. I listen for on unload event. I then write the following in javascript:
window.onbeforeunload = function () { return "You should not press the back button while in this application. If you continue, your work will not be saved and you will need to log back in."}
Java Script pops a dialogue box with OK and Cancel options. If the user clicks cancel. The application stays right where they are. The script is embedded within the tags. For me this is the ideal solution. I found this at
http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

Categories