Javascript: user confirmation when leaving single-page application - javascript

I would like to make the user confirm that she wants to leave my single-page application. ExtJS 4.1 provides the onWindowUnload in which I would like to plug in a Confirm dialog.
If the user decides to proceed closing the tab/window an Ajax request to the logout URL should tell the server-side that the user has logged out.
Is the above approach possible?
Is it possible to plug the onWindowUnload event in ExtJS MVC controller?
P.S. User leaving single-page app can be any of the following: browser tab close, browser window close, browser back button, browser forward button.


You need to add a listener to the window's onbeforeunload event.
It is a special type of event handler, and you should read the docs closely.
MDN docs: https://developer.mozilla.org/en/DOM/window.onbeforeunload
MS docs: http://msdn.microsoft.com/en-us/library/ie/ms536907(v=vs.85).aspx
Ext's standard way of attaching event handlers DOES NOT WORK† with this particular event.
You need to use the standard addEventListener or attachEvent methods.
Example:
http://jsfiddle.net/NhLQK/9/
Can I use my own dialog? No
Can I display my own message in Firefox? No
Can I use a confirm()? No
Can I make them look the same in different browsers? No
Can I fire an AJAX message before the user closes the browser? Yes,
if it's synchronous:
Ext.Ajax.request({
url:'some url',
async:false,
method:'POST'
});
† it seems to work in Chrome with ext 4.1.1

Related

Close popup in chrome while dom is getting loaded

I am using the latest version of selenium web driver and google chrome browser.
In my app, after clicking on login button while dom is getting loaded I get a popup
image
I just want to close this popup without entering any value. I am using java for scripting.
I tried javascript executor, all popup handlers from selenium but not able to close the same. I am not able to shift control on the popup window.
I google a lot but didn't found any relevant code

This is a default behavior when using HTTP basic authentication. To stop this window to come you would need to send user and password in the request. Or as I understand from other response I found about this you can write:
driver.get("http://UserName:Password#Example.com");
There seems to be a similar issue, going on in thread: How to handle authentication popup with Selenium WebDriver using Java

If all you want to do is "Cancel" the popup, instead of entering credentials. You may be able to just use this.
driver.switchTo().alert().dismiss();

using AutoID was able to resolve above issue.
Refernce: http://learn-automation.com/handle-windows-authentication-using-selenium-webdriver/

Django: How to make an API call just before browser tab close?

I am using Django v1.10 for an application where in need to send an API call just before browser close through crude javascript (don't want to use any library for sake) preferably. I've read about window.unload and window.onbeforeunload. The first one didn't seem to work at all. The second can work but it also gets executed when there is reload or redirection to another page (it works as it should but that is what I don't want). I've tried using SESSION_EXPIRE_AT_BROWSER_CLOSE of Django which works only when a user has totally exit out of the browser (no browser process running). I've also seen answers on the web where people have suggested to open another window/tab of the browser through JS as the tab closes.
So in precise words, I want to make an API call just before browser tab close (not in any other situation).
Please help!

Resend Http Request via JS

I am currently trying to manually develop an unsaved changes warning in our JSF-based Webapplication. Sadly our customer does not like the styling of the default warning displayed via an alert() after using the onbeforeunload event and requires us to develop a similar mechanism on our own.
I was thinking of using the way described here to prevent the onbeforeunload event from displaying the alert() and simply showing my own modal panel. I just can't figure out how to make the "Yes" (yes, I want to leave this page and lose all unsaved changes) button work. The button should basically resend the request which lead to the onbeforeunload event which could have been a HTTP Request as well as an Ajax Request. How would one do that via JS?
Thank you :)
Cheers
//edit: It needs to work in IE9 as well as Chrome 38

javascript new fullscreen API could not call using kinect's event

I'm trying to call element.requestfullscreen() function but i get following warning on mozilla console..
Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler.
I know what it means but how can still i call it using that event which is not connected to any element?

You're receiving the error because requestFullScreen requires a user action (generally a click, or key press) to launch into full screen. This is to prevent sites completely hijacking your browsing experience, and from embedded (or untrusted) content from trying to launch full screen, without proper action.
In order to fix this, you'll need to have the requestFullScreen trigger on a chain, that starts with that user action.
Here is a link to the relavent security/privacy considerations of full screen in the w3 spec.

How to keep the browser history in sync when using Ajax?

I'm writing a simple photo album app using ASP.NET Ajax.
The app uses async Ajax calls to pre-load the next photo in the album, without changing the URL in the browser.
The problem is that when the user clicks the back button in the browser, the app doesn't go back to the previous photo, instead, it navigates to the home page of the application.
Is there a way to trick the browser into adding each Ajax call to the browsing history?

Update: There is now the HTML5 History API (pushState, popState) which deprecates the HTML4 hashchange functionality. History.js provides cross-browser compatibility and an optional hashchange fallback for HTML4 browsers.
The answer for this question will be more or less the same as my answers for these questions:
How to show Ajax requests in URL?
How does Gmail handle back/forward in rich JavaScript?
In summary, you'll definitely want to check out these two projects which explain the whole hashchange process and adding ajax to the mix:
jQuery History (using hashes to manage your pages state and bind to changes to update your page).
jQuery Ajaxy (ajax extension for jQuery History, to allow for complete ajax websites while being completely unobtrusive and gracefully degradable).

MSDN has an article about Managing Browser History in ASP.NET AJAX

Many websites make use of a hidden iframe to do this, simply refresh the iframe with the new URL, which adds it to the browsing history. Then all you have to do is handle how your application reacts to those 'back button' events - you'll either need to detect the state/location of the iframe, or refresh the page using that URL.

You can use simple & lightweight PathJS lib.
Usage example:
Path.map("#/page1").to(function(){
...
});
Path.map("#/page2").to(function(){
...
});
Path.root("#/mainpage");
Path.listen();

The 3.5 SP1 update has support for browser history and back button in ASP.NET ajax now.

For all solutions about the back button, none of them are "automatic". With every single one you are going to have to do some work to persist the state of the page. So no, there isn't a way to "trick" the browser, but there are some great libraries out there that help you with the back button.

Info: Ajax Navigation is a regular feature of the upcoming IE8.

If you are using Rails, then definitely try Wiselinks https://github.com/igor-alexandrov/wiselinks. It is a a Swiss Army knife for browser state management. Here are some details: http://igor-alexandrov.github.io/blog/2013/07/11/the-way-to-wiselinks-1-dot-0/.

Categories