Display a customized confirm box in angularjs when user leaves a page - javascript

My requirement is to display a customized confirm box when the user leaves a page without saving form data.
I used the window.onbeforeunload event it is displaying google chrome related predefined confirm box. When the user changes any form and trying to reload, tab close or route change I want to display a $mdDialog.confirm and asking user to leave the page or stay on the same page. How do I make one?

For security reasons, this cannot be done. You can find more details in the MDN page on the beforeunload event.
In the past, you could return a custom string that was displayed to the user, but these days even that is ignore. The best you can do is instruct the page to show the standard dialog that you already have. (And in some browsers and some scenarios, even that instruction may be ignored.)
An alternative is to include a button in the page for leaving the form. Although that still does not prevent users from navigating away from the page directly, if it is sufficiently visible, in many cases users are more likely to click that than navigating directly. It also serves as a passive reminder that the form needs explicit saving or cancelling (depending on your specific details, of course).

Related

disable manual page refresh and allow programmatically only

I'm want to disable the manual refresh but still allow it throw code only.
the page is responsive so the mobile refresh(drag down) is also need to be disabled.
I've tried already to preventDefault with:
window.onbeforeunload
window.onunload
and jquery:
$(window).unload
You cannot disable a refresh - you would enforce the user to stay on your page.
A common way (like jsfiddle and others) that is used when there's unsaved state, is to trigger a popup that asks the user if the page should really be left.
This is useful if some input hasn't been saved - having just some content that is refreshed over time it may be more annoying for the users.
A possible solution is found here

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

Required fields not met when closing window

I'm looking for the best way to go about "forcing" the user to fill a textarea.
For my work we have a system that keeps track of time spent on a particular "task". Some tasks are required to have a comment while others are optional. At the top of the page there is a timer, a textarea for the comments and a list of different tasks.
So far I have it so when the user tries to stop the timer, it won't stop until the comment is written (if it is required). When the paged is closed while the timer is running, an onbeforeunload function sends an alert warning that the comments aren't filled out and then the "Are you sure you want to leave?" warning pops up.
As far as I can tell there is no way to prevent the user from completely exiting the page. The idea we had was when the user closes the window, have another simple page open that just has a textarea and an instruction telling the user to write a comment. I'm pretty new to JavaScript and web development so I'm not entirely sure the best way to go about this.
Put that text area in a popup or iframe or modal window where you can control its closing.
On these window.close you can call the functions to validate the text area is filled or not.
Am not sure you can put that in a popup or not .but thats the only good way i can think of !!
There is no way to prevent the user from leaving a page.
Built in pop up blockers will also block the system from opening up popup windows onunload. Only way to allow onunload popups is if your system admins can update every browser to add an exception to the browser security settings.
It is impossible to make a web application act like a client application.

Alternatives to disabling / disable back button in firefox and IE

Our application forbids going back for several reasons.
Basically because that's just how our application works (JSF with facelets as GUI)
You always have to enter on the welcome site, once you chose an application-flow you can only leave / abort when you tell the application (e.g. press a button). If you just browse away e.g. enter "example.com" in the address bar the state of your flow gets saved and once you relogin, you can resume the work. Going back is only possible when it was specifically designed like this with a 'back' submit - button.
Of course users keep pressing the 'back' button (i would do so as well) and they keep getting 'error: session out of synch'. This is a learning process and a couple years ago we just disabled the back-button to make things clear. Sadly this is no longer supported.
So instead of teaching the user the hard way and forcing him to relogin, are there some good alternatives I'm missing?
i found this link which should offer 3 methods to disable the back button - but in reality it just further confirms the fact that it is impossible to do it in a semi-nice way.
when the user tries to go to a previous page you can redirect him to the page he should be at in other words catch the "out of sync" and redirect him
You might find a workable solution here How do I insert an entry into browsing history via JavaScript
by inserting an extra step into the browser's history (perhaps a link to the current page with query string parameters that result in a nice big red box message to the user), or you could try attaching an event handler to the OnBeforeUnload event so the user gets a confirmation dialog when trying to leave the page (you'd want to remove the handler when the submit button was clicked).

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