Don't allow user to close window for incomplete form - javascript

I have a big form on jsp page where user enters some information.
My requirement is that if user move away to another link or close window, I should alert that "Your form changes will be lost if you move away from screen, please press save before moving away from this screen." If user press ok, we should navigate to next page else stay on same page.
How can I achieve this? Any javascript method available for this? Any help much appreciated.

Related

Best way of clearing up URL hashtag

Could someone point me towards on how to clean up the # inside URL?
I've currently got a popup which uses the # for reference, however when the page is refreshed the data isn't loaded because the data is only loaded when the user clicks on a button.
Currently happening:
User clicks button
Modal pops up (#user-calendar)
User refreshes page, data is no longer there, modal still pops up because #user-calendar still exists
What should be happening:
User clicks button
Modal pops up (#user-calendar)
User refreshes page, data is no longer there, modal should be closed.
I've tried things like:
setTimeout(function(){}, 500);
However with setTimeout etc the user still sees the modal then it closes. I want something clean, so it doesn't look messy to the user.
Anyone got any ideas how this can be achieved?
Try changing the hash before the modal code runs. You could put this in it's own script tag above the script that makes the modal.
if(window.location.hash === "#user-calendar"){
window.location.hash = "";
}

How can I detect that the browser back button has been pressed in a single page app?

On a certain page in my app, I have a popup guide that walks the user through several steps. When the user clicks the popup next button it advances, sometimes going to a new page (but not always). My problem is that when the user clicks the browser back button, the popup does not close and causes issues if the user tries to advance again. What i'd like to do is just close the popup if the user hits the browser back button. I'd assumed this would be an easy problem, but I can't figure out a solution.
Since this is a SPA, 'onbeforeunload' and 'onunload' don't fire. The way the app is setup, 'onpopstate' also doesn't fire. 'hashchange' fires, but it also fires sometimes when the user clicks the next button on the popup, and I don't see a way to differentiate between that hashchange and hashchange when the user clicks back.
Is there some other event I can check for? I just want to run a function to close my popup (and do cleanup) when the user clicks the back button.
The following assumes you do not use the history API:
Often times I have seen use of # (the anchor tag) in the URL. This will allow for navigation throughout a single page without refreshing the page. As the user progresses in the workflow. For example,
window.location.href = "http://stackoverflow.com/questions/36408418/how-can-i-detect-that-the-browser-back-button-has-been-pressed-in-a-single-page" + "#test"
will not refresh the page. When the back button is pressed, the following statement will evaluate to be true:
(window.location.href == "http://stackoverflow.com/questions/36408418/how-can-i-detect-that-the-browser-back-button-has-been-pressed-in-a-single-page")

Pass an alert upon exiting specific domain path

I have been tasked with the following.
Display an alert "You are now leaving the special section of our website" when a visitor leaves a specific directory of our site.
For example.
Visitor comes to our home page www.sample.com.
Clicks link to navigate to "www.sample.com/special-place/"
Clicks another link and navigates to "www.sample.com/no-special-place/"
Anytime the user leaves that section of our site, the message needs to appear.
And no, we can not just show this once (cookie based) it needs to display every time they leave that section of the site. Yes. I know. Horrible user experience.
Could this be accomplished with Javascript by capturing the visitor when they enter the special-place path, then exiting to any other path that does not have the matching characters of "/special-place/"?
Possibly using jQuery to do this?
Any insight or thoughts are greatly appreciated.
Use window.onbeforeunload which will fire a prompt asking the user if they want to leave.
$(window).bind("beforeunload", function() {
//logic if you want to show prompt
return "Are you sure you want to leave";//this text will be shown in a prompt
});

Check if User has clicked "Ok" for "onbeforeunload event"

I am checking when the user closes the browser window, if he says ok, how i do I trigger some action, like opening another window or saving a form. If he chooses "cancel", it should stay in the same page (which is working now). pls share some idea on how to approach this issue
Sample Code
You cannot react to the user clicking on the "Leave this page" button. This is by design of the browser: if the user wants to leave, let him go.
If the user chooses to cancel, you can try a technique found in this answer to similar question to execute some custom code like saving changes or the like.

Use Javascript Alert To Keep Users On A Page

I am creating an internal web based application that will not be the target audience of the web.
I understand the frustration of alert boxes and forcing people to do certain things.
With that said, what I am attempting to do is create a javascript function, that unless a user clicks a link on a specific page, if they try to navigate away from the page other than using a link on the page, I would like to alert them and say, sorry you need to click the appropriate link to exit.
What my issue is, is that I need to lock out fields, and what I can do when a user hits an edit page, im going to write to a table that user to the lockoutuser colum. If a value exist, that user can access the record if it is null, it means no one is editing the record. If someone clicks to go into that record they lock it out, my means of updating the lockoutuser colum could be ajaxy on unload of the page, but the page could be unloaded for 2 reasons, 1 the edit form is submitted or the user leaves the page.
An alert that would say, sorry you can leave this record without clicking the big red button that says unlock, and force the user without refreshing to stay on the page.
I understand the machine could crash and or an alt f4 or a brute end task on the browser will still leave me other work to unlock the record
You need to use the onunload event of the page to present a messagebox when the user tries to leave your page. Check out this example: http://www.codetoad.com/javascript/miscellaneous/onunload_event_eg.asp

Categories

Resources