i have tried a javascript plugin it worked fine but i have an issue if i open two tabs containg same project ui.the inactive tab is undergoing session time out and redirected to login ,how to prevent this problem.
What I have tried:
;(function ($, document, window, undefined) {
'use strict';
$.fn.userTimeout = function (opts) {
var defaults = {
logouturl: null,
referer: false,
refererName: 'refer',
notify: true,
timer: true,
session: 600000,
force: 300000,
ui: 'auto',
debug: false,
modalTitle: 'Session Timeout',
modalBody: 'You\'re being timed out due to inactivity. Please choose to stay signed in or to logoff. Otherwise, you will logged off automatically.'
};
var options = $.extend(defaults, opts || {});
var modalUI, timeout, forceLogout, countDownTimer, seconds = Math.floor((options.force / 1000) % 60);
var init = function() {
clearTimeout(timeout);
if (!options.logouturl) {
if (options.debug === true) {
window.alert('Please configure the userTimeout plugin!');
} else {
window.console.error('Please configure the userTimeout plugin!');
}
return;
}
modalUI = uiCheck(options.ui);
if (modalUI === false) {
return;
}
resetTime(false);
$(document).on('focus click mousemove mousedown keyup scroll keypress', function () {
resetTime(false);
});
};
var uiCheck = function (uiTest) {
switch (uiTest) {
case 'auto':
if (typeof $().emulateTransitionEnd === 'function') {
uiTest = 'bootstrap';
} else if (typeof jQuery.ui !== 'undefined') {
uiTest = 'jqueryui';
} else {
if (options.debug === true) {
window.alert('Twitter Bootstrap 3 nor jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
} else {
window.console.error('Twitter Bootstrap 3 nor jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
}
return false;
}
break;
case 'bootstrap':
if (typeof $().emulateTransitionEnd !== 'function') {
if (options.debug === true) {
window.alert('Twitter Bootstrap 3 was not found! Please load the proper libraries and their themes to utilize this plugin!');
} else {
window.console.error('Twitter Bootstrap 3 was not found! Please load the proper libraries and their themes to utilize this plugin!');
}
return false;
} else {
uiTest = 'bootstrap';
}
break;
case 'jqueryui':
if (typeof jQuery.ui === 'undefined') {
if (options.debug === true) {
window.alert('jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
} else {
window.console.error('jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
}
return false;
} else {
uiTest = 'jqueryui';
}
break;
default:
if (options.debug === true) {
window.alert('Twitter Bootstrap 3 nor jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
} else {
window.console.error('Twitter Bootstrap 3 nor jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
}
return false;
}
return uiTest;
};
var modal = function () {
resetTime(true);
if (modalUI === 'bootstrap') {
var container, dialog, content, header, body, footer, logoutBtn;
container = $('<div class="modal fade" id="notifyLogout"></div>');
dialog = $('<div class="modal-dialog"></div>');
content = $('<div class="modal-content"></div>');
header = $('<div class="modal-header"><h4 class="modal-title" id="notifyLogoutLabel">' + options.modalTitle + '</h4></div>');
body = $('<div class="modal-body">' + options.modalBody + '</div>');
if (options.timer === true) {
footer = $('<div class="modal-footer"></div>');
countDown(seconds);
} else {
footer = $('<div class="modal-footer"></div>');
}
logoutBtn = $('');
content.append(header, body, footer);
footer.prepend(logoutBtn);
dialog.append(content);
container.append(dialog);
$(container).modal({
backdrop: 'static',
keyboard: false,
show: true
});
$(container).on('hide.bs.modal', function () {
resetTime(false);
$(document).on('focus click mousemove mousedown keyup scroll keypress', function () {
resetTime(false);
});
$(container).remove();
});
$(logoutBtn).on('click', function () {
logout();
});
} else if (modalUI === 'jqueryui') {
var jqueryLogout;
var jqueryModalOptions = {};
var jqueryModal = '<div id="notifyLogout"><p>' + options.modalBody + '</p></div>';
jqueryModalOptions['Stay Logged In'] = function (){
resetTime(false);
$(document).on('focus click mousemove mousedown keyup scroll keypress', function () {
resetTime(false);
});
jqueryLogout.dialog('close');
};
jqueryModalOptions['Log Off'] = function (){
logout();
};
jqueryLogout = $(jqueryModal).dialog({
buttons: jqueryModalOptions,
modal: true,
width: 600,
height: 300,
resizable: false,
title: options.modalTitle
});
}
};
var countDown = function (countTime) {
$('#countdowntimer').html(countTime);
if (countTime !== 0) {
countDownTimer = setTimeout(function () {
countTime = countTime - 1;
countDown(countTime);
}, 1000);
} else {
clearTimeout(countDownTimer);
}
};
var resetTime = function (modaltime) {
clearTimeout(timeout);
clearTimeout(forceLogout);
clearTimeout(countDownTimer);
if (modaltime === true){
forceLogout = setTimeout(logout, options.force);
} else {
if(options.notify === true) {
timeout = setTimeout(modal, options.session);
} else {
timeout = setTimeout(logout, options.session);
}
}
};
var logout = function () {
var referralURL;
clearTimeout(timeout);
clearTimeout(forceLogout);
clearTimeout(countDownTimer);
if (options.referer !== false) {
if (options.referer === 'auto') {
var currentReferral = $(location).attr('href');
referralURL = options.logouturl + '?' + encodeURIComponent(options.refererName) + '=' + encodeURIComponent(currentReferral);
} else {
referralURL = options.logouturl + '?' + encodeURIComponent(options.refererName) + '=' + encodeURIComponent(options.referer);
}
} else {
referralURL = options.logouturl;
}
return window.location = referralURL;
};
return this.each(function () {
init();
});
};
}(jQuery, document, window));
that is the js plugin code and in my cshtml i have a this section
$(document).userTimeout({
logouturl: 'logout url',
session: 600000
});