We Keep Coding

I want to destroy session on browser tab close

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();
});

How i can make onbeforeunload global cancel?

I need to use onbeforeunload everywhere, when user leave my site.
var leave_message = 'Leave message';
var validNavigation;
function goodbye(e) {
if (!validNavigation) {
if (!e) e = window.event;
e.cancelBubble = true;
e.returnValue = leave_message;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
return leave_message;
}
}
$("body").on('click', 'a', function () {
validNavigation = true;
});
window.onbeforeunload = goodbye;
But there is many places in my javascript, where i use window.location for redirecting user to internal pages. And i tired of pasting validNavigation = true; in these parts of code.
Please give me advice how i can setup it globally?

How to cancel single click event when double click event uses

I am using asp .net mvc 4. My problem is in my modal popup I am using mouse double click. It works properly, but if I cancel particular popup form and then single click on details, again it will displays. The main problem is that single works as the double click. I need some time delay between these clicks. I only need to display modal popup with double click. If I submit the details may be of page refreshing it get works. Below shown is modal.js that I make changes.(only change click to dblclick)
Modal.prototype.show = function (_relatedTarget) {
var that = this
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
this.$element.trigger(e)
if (this.isShown || e.isDefaultPrevented()) return
this.isShown = true
this.escape()
**this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]',** $.proxy(this.hide, this))
Modal.prototype.hide = function (e) {
if (e) e.preventDefault()
e = $.Event('hide.bs.modal')
this.$element.trigger(e)
if (!this.isShown || e.isDefaultPrevented()) return
this.isShown = false
this.escape()
$(document).off('focusin.bs.modal')
this.$element
.removeClass('in')
.attr('aria-hidden', true)
.off('click.dismiss.modal')
$.support.transition && this.$element.hasClass('fade') ?
this.$element
.one($.support.transition.end, $.proxy(this.hideModal, this))
.emulateTransitionEnd(300) :
this.hideModal()
}
this.$element.on('click.dismiss.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0])
: this.hide.call(this)
}, this))
$(document).on('dblclick.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
//alert("onclick");
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
var option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
e.preventDefault()
$target
.modal(option, this)
.one('hide', function () {
$this.is(':visible') && $this.focus()
})
})
in my candidate.js
$('body').on('dblclick', '.IndMaster-edit', function (e) {
//alert("succ111");
e.preventDefault();
//alert($(this).attr('class'));
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
$(".IndMaster-edit").dblclick(function () {
//alert("first");
var sectionvalue = $(this).attr("data-id");
var titleselection = $(this).attr("title");
//alert(titleselection);
//alert(sectionvalue.toString());
$.ajax({
async:false,
// Call CreatePartialView action method
url: "/IndMaster/EditIndPartial",
data: { section: sectionvalue, indmanid: titleselection },
type: 'Get',
success: function (data) {
//alert("hhiii");
//$('#myModal').modal('show');
$("#IndMaster-DetailModel").empty();
//alert("end1");
//alert("success11");
$("#IndMaster-DetailModel").append(data);
//alert("end2");
//alert("success22");
$("#IndMaster-DetailModel").dialog("open");
//$("#createForm").hide();
//alert("end3");
//alert("success");
},
error: function () {
alert("something seems wrong");
}
});
});
In my IndMaster.cshtml
<td class="tagstd IndMaster-edit" data-id="status" title="#item.Ind_ID">
<span class="btn btn-xs icon-tag pull-left tag-btn" data-id="Package_No" title="#item.Ind_ID" style="visibility:hidden"></span> #item.IND_APP_PASS_STATUS.First().Package_No</td>
I changed click function to dblclick.

I created a jsfiddle for this, please check, using this you have to use a delay so that you can count the number of clicks
var DELAY = 700, clicks = 0, timer = null;
$(function(){
$("a").on("click", function(e){
clicks++; //count clicks
if(clicks === 1) {
timer = setTimeout(function() {
alert("Single Click"); //perform single-click action
clicks = 0; //after action performed, reset counter
}, DELAY);
} else {
clearTimeout(timer); //prevent single-click action
alert("Double Click"); //perform double-click action
clicks = 0; //after action performed, reset counter
}
})
.on("dblclick", function(e){
e.preventDefault(); //cancel system double-click event
});
});
http://jsfiddle.net/y7epojfo/

How to Identify If the user reloads the web page?

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
});

Setting onbeforeunload on body element in Chrome and IE using jQuery

I have a system where I want to check with the user if they're sure they want to leave the page once a dirty flag is set.
I'm using the following code - In FireFox, I can look at the page source through FireBug and the tag correctly has the onbeforeunload attribute inserted in it.
In Chrome and FireFox, this doesn't happen though and I'm able to navigate away from the page without any warning at all. The jQuery line to update the body tag is definitely being executed, it just isn't performing it.
if ($("body").attr('onbeforeunload') == null) {
if (window.event) {
// IE and Chrome use this
$("body").attr('onbeforeunload', 'CatchLeavePage(event)');
}
else {
// Firefox uses this
$("body").attr('onbeforeunload', 'return false;CatchLeavePage(event)');
}
}
Any ideas how to proceed from here?

you cannot abort page unload by returning false. you must return string that will be shown to user in a message box, and he decides if he want to leave or stay on the page (by selecting either 'OK' or 'Cancel' button), so you need to write your code like this:
window.onbeforeunload = function() {
return "Are you sure you want to leave this page bla bla bla?"; // you can make this dynamic, ofcourse...
};

try this
<script type=\"text/javascript\">
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(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;
</script>

window.onbeforeunload = function () { return 'Are you sure?' };

Check this 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 = 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;
document.onkeydown = function () {
switch (event.keyCode || e.which) {
case 116 : //F5 button
validNavigation = true;
case 114 : //F5 button
validNavigation = true;
case 82 : //R button
if (event.ctrlKey) {
validNavigation = true;
}
case 13 : //Press enter
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();
});

It's not pretty, but it did the trick.
var warnclose = true;
var warn = function(e) {
var warning = 'Your warning message.';
if (warnclose) {
// Disables multiple calls
warnclose = false;
// In case we still need warn to be called again
setTimeout(function(){
warnclose = true;
}, 500);
return warning;
}
};
window.onbeforeunload = warn;