Safari Popup on tab close when submitting forms with AJAX - javascript

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.

Related

Form values lost when returning to page

I've a problem.
I'm building a website with multiple pages.
In a page there is a form (with some AngularJS in it) when the user clicks the submit button, a second page appears where it confirms the form submission.
If there was any error, it will show a message with the error message with a button that goes back (javascript:history.go(-1)).
When the user clicks this back button, the form page is presented again but with all fields blanked (the page seems completely reloaded...). Anyway with other forms without AngularJS this mechanisms work fine...
What's wrong?
Thanks! :-)
PS: Anyway, the form page has checks that disable the submit button if there is any error, though I don't understand why the page reloads when the user returns to it via the back button while with other forms it doesn't happen...
If both the pages belong to same app (under the same app.js) then you can store the values of form in $rootScope variable instead of $scope.
Also to navigate, you can use $location.Path

How can I allow scrolling of the background when the 'confirm' box pops up?

Using a Chrome extension in the browser, I allow the user to select a bunch of text to submit to the database. When the user hits enter, a confirm box pops up, but before the user hits 'OK' to submit, I want the user to be able to scroll in the background and double check everything that he's submitting. Is there anyway to make the background scroll while the confirm window is in focus?
You need to initialize the JQ dialog with modal set to false
Official doco on how it works is here: http://api.jqueryui.com/dialog/#option-modal
Provided that the text/fields/data to be submitted isn't huge, you should also consider jasonscript's idea of presenting the data in the popup. From what you're saying though, it's more important to show what they might have MISSED, not just what they included. Perhaps an on the fly screenshot of the webpage at the point they opened the submission form? That would show their selection clearly.

IE11 and IFrame history object

We have an app with a list, that when a record is clicked a popup modal div is displayed, that is used to edit a user record. The div contains an iframe.
In the iframe, the user clicks save and the form is posted back, where server side validation occurs. If there is an error, the user is presented the error information and a go back button.
The go back button is wired to history.go(-1)
When it is clicked, in IE8/9/10 and Chrome, the iframe reverts back to the form with the user's changes still in it, allowing them to remedy any problems.
In IE11, it sends the parent page back to it's last page, so not only do you lose the div, but you lose the list.
Is there a way I can make IE11 behave like it was in IE10?
FWIW, we do perform basic client validation, such as checking for valid emails, mandatory fields etc, but we also do this in the backend, as well as checking that more complex rules to do with business relationships etc.
Thanks!
With IE11 finally going HTML5, you can save your history state so you would use push and popstate. Using this, you'll be able to control your "back" (working fine here).

How to track form submission in IE with bootstrap modal window?

I have a form that the user fills out and gets submitted through jquery using $("form").submit();
while the form is submitted I use a modal window from the twitter bootstrap library to disable the entire screen and tell the user that the form is being submitted.
My problem is that when the form submit is complete, a pdf file is downloaded to the client's machine as a response is some cases,
If this is the case, the user approves the download and the form is stuck with the modal window covering the entire page and I look like an idiot, because the user can't go on using the web page.
I've tried using a $("form").submit() ".success()" function, but when I use that, the jquery fails and the page ceases to function.
The only thing that I can think of that's useful is the fact that the progress bar at the bottom of the browser in IE runs and only closes when the pdf file download request pops up.
Is there anyway I can intercept the progress of the form submission, and close the modal window at the moment when the form is done submitting?
Please help
I had the same issue a few weeks back and this solution helped. Basically you have to redirect your user to a page which will also handle the downloading of the PDF.

Stop safari from showing unsaved form prompt when page is refreshed

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 :)

Categories