PDA

View Full Version : Preventing unintentional navigation away from MVC app



davidryan
26 Aug 2012, 10:43 AM
Hi there,

I am yet to add full history support to my MVC application and would like a quick solution to prevent accidental navigation away from the application - made all the more likely for Mac users thanks to touch pad gestures.

My initial thought was to capture beforeunload events and to return a message to the user. This works fine, except I have a logout routine that redirects the user away from the MVC. I don't want to change this behaviour, but my understanding is that the only influence you have over beforeunload is setting the message displayed to the user, as this is a browser event.

Apart from implementing Ext.History support, are there any other suggestions?

Many thanks,
Dave.

scottmartin
27 Aug 2012, 12:29 PM
Have a look at: window.onbeforeunload

Scott.

davidryan
28 Aug 2012, 8:17 AM
Hi Scott,

Thanks for your response.

I should have been more specific, that is the event I was referring to. My understanding of window.onbeforeunload is that you can't influence its behaviour.

So, in my situation, if I use window.onbeforeunload that back button and browser refresh are trapped. However, any other action that causes navigation away from the app is also trapped (e.g. logout and session timeout). I.e. if the user clicks logout, they get the window.onbeforeunload popup (annoying) and if the session times out the logout process is also interrupted by the window.onbeforeunload popup (more than annoying).

Basically I would like a solution that only capture the back button action, but doesn't complain if the logout button is clicked or the session times out. Does that make sense?

Any other suggestions?

Cheers,
Dave.

ddanatzko
28 Aug 2012, 9:55 AM
Have you tried using Ext.util.History?

http://docs.sencha.com/ext-js/4-0/#/api/Ext.util.History

I have the same issue in an app I'm building, but I'm just using the onbeforeunload. I will be implementing History soon though...Good Luck!

scottmartin
28 Aug 2012, 10:44 AM
You would have to research this a bit online. It sounds like you would have to interfere with the default browser behavior to get what you want.

Scott.

davidryan
28 Aug 2012, 2:00 PM
Ext.History it is :-)

Thanks,
Dave.

vinit8704
19 Nov 2012, 6:59 AM
Even I am having the same problem, can you please tell me how you have solved this issue.

titusaduxass
18 Oct 2013, 1:59 AM
Hi, I was having a similar issue with preventing the browser from returning to the previous page when the user hit the backspace button. After a lot of searching I found this link that uses the Ext.EventManager to identify whether or not the backspace button should perform the default function:
http://www.learnsomethings.com/2012/05/04/stop-the-backspace-key-from-going-to-the-previous-page-in-your-extjs-app/

I have modified it slightly to allow for textareas and readOnly fields:


Ext.EventManager.addListener(Ext.getBody(), 'keydown', function(e) {
if (e.getTarget().type != 'text' && e.getTarget().type != 'textarea') && e.getKey() == '8') {
e.preventDefault();
} else if ((e.getTarget().type == 'text' || e.getTarget().type == 'textarea') && e.getKey() == '8' && e.getTarget().readOnly) {
e.preventDefault();
}
});


The benefits of this is that if the browser 'back' button is clicked it still functions normally and navigating away from the page is unaffected.

I hope this helps someone.

Cj