I want to destroy the session on tab close using jquery and java script.
In this I am able to track the keyboard event like F5 or ctrl+r. But I am facing issues in tracking browser back, forward, refresh and tab close buttons.I know that on all the above mention button, same function is called that is window.onbeforeunload.
Here is my code..
function endSession() {
console.log(validNavigation);
alert("You are about to close your page and session");
$.ajax({
type: "POST",
url: base_url+"destroy-session",
beforeSend : function(){
console.log('hjkl');
},
success: function(response){
console.log(response);
},
error: function(response){
console.log(response);
}
});
}
function wireUpEvents() {
window.onbeforeunload = function() {
if (validNavigation == false) {
endSession();
}
}
//window.onbeforeunload=goodbye
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress keydown keyup', function(e) {
if(e.keyCode === 116 || e.keyCode==8 || e.keyCode==13) {
validNavigation = true;
}
if(e.ctrlKey && e.keyCode==82) {
validNavigation = true;
}
if(e.ctrlKey && e.keyCode==76) {
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
$("input[type=button]").bind("click", function () {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();
});
Related
I want to call my function when tab or browser closing.
I have try window.onbeforeunload or window.unload method but this method call my function when page reload or refreshing.
my code is:
$(document).ready(function () {
IsClose();
});
var validNavigation = false;
function IsClose() {
debugger;
// Attach the event click for all links in the page
$(document).on("click", "a", function () {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$(document).on("submit", "form", function () {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$(document).bind("click", "input[type=submit]", function () {
validNavigation = true;
});
$(document).bind("click", "button[type=submit]", function () {
validNavigation = true;
});
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function (e) {
debugger;
if (e.keyCode == 116) {
validNavigation = true;
}
});
$(window).unload(function () {
debugger;
if(!validNavigation)
goodbye();
});
var dont_confirm_leave = 0;
function goodbye(e) {
debugger;
if (!validNavigation) {
debugger;
if (dont_confirm_leave !== 1) {
DeleteLoggedinUser();
}
}
}
return false;
}
function DeleteLoggedinUser(){
// My Code here than i want to do when tab or browser closed
}
Can anyone suggest me how can i detect browser closing or tab closing using java script or JQuery
I am using the following code for logout on browser tab close,
var validNavigation = false;
var refreshKeyPressed = false;
function wireUpEvents() {
var dont_confirm_leave = 0;
var leave_message = 'You sure you want to leave?'
function leavePage(e) {
if (!validNavigation) {
if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
if (!refreshKeyPressed) {
$.ajax({
type: 'GET',
async: false,
url: "<?php echo Controller::createUrl('site/logout'); ?>",
success: function ()
{
}
});
}
// return leave_message;
}
}
}
window.onbeforeunload=leavePage;
$("a").bind("click", function() {
validNavigation = true;
});
$("form").bind("submit", function() {
validNavigation = true;
});
$(document).bind('keydown',
function(evt) {
if (evt.which == f5key ) {
refreshKeyPressed = true;
}
}
);
}
$(document).ready(function(){
wireUpEvents();
});
when i click browser tab close it asks for "Leave this page" or "stay on this page" option when i click "stay on this page" option , then also my Ajax code executes, how to prevent this ?
I am working on a project in which i need to do some custom development. and one of them is i have to display an popup when user closed the PARTICULAR TAB. I already try some solutions but it is not working as i want. either it is working on whole browser or not at all working. So how do I achieve prompt when user close any particular tab.
Solution i had try that is
Solution i tried
var validNavigation = false;
function wireUpEvents() {
/**
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
*
* onbeforeunload for IE and chrome
* check http://stackoverflow.com/questions/1802930/setting-onbeforeunload-on-body-element-in-chrome-and-ie-using-jquery
*/
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'You sure you want to leave?'
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
}
window.onbeforeunload=goodbye;
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();
});
My Actual Task is to confirm the user when he closes the tab or window.
For that I wrote the following code,
var validNavigation = false;
function wireUpEvents() {
var dont_confirm_leave = 0;
var leave_message = 'You sure you want to leave?'
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
}
window.onbeforeunload=goodbye;
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type='button']").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();
});
the problem here is it asks confirmation if the user reloads the web page.
So i need to bind the reload event.
Please help me...
Thanks in advance
Use .unload or .on('unload', handler):
$(window).unload(function() {
// your code here
});
I am trying to get this code working on drupal, but only works when I press f5, a links or forms are not working, any idea what is the problem with this code?
My objective is to kill the session when you close the tab or close the explorer. This code is a modification from this link: http://eureka.ykyuen.info/2011/02/22/jquery-javascript-capture-the-browser-or-tab-closed-event/#comment-6936
<code>
(function($) {
var validNavigation = false;
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'Do you want to exit?';
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
// window.open('DelLogged.php?Id=');
return leave_message;
}
}
}
// Attach the event click for all links in the page
$("a").click(function () {
validNavigation = true;
alert("Link press");
});
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
alert("F5 press");
}
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
alert("Form press");
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
alert("input press");
});
window.onbeforeunload=goodbye;
})(jQuery);
</code>
I think you're not using the (function($){}(jQuery)); closure correctly, as the brackets are not written the right way. You've written
(function($) {
...
})(jQuery);
closing the initial bracket before (jQuery);
Try changing this and lets see if may solve the issue :)