Jquery Session Expired Please Try Again
- Download SessionTimeout.zip - iii.three KB
Introduction
In this article, I will tell you how to create a cantankerous-browser session expiration popup box using jQuery easily
Background
Session timeout is very much important in every project. There are so many articles already written for session timeout. Therefore, in this commodity I will tell you how to create employ session timeout using jQuery hands. We tin can configure session timeout and after finishing this timing, user will receive notification similar that, y'all need to logout to extend timeout.
Using the code
Part one: Creating a Popup using Bootstrap
To prove session timeout popup nosotros need two popups, 1 for showing session elapse alarm similar "Your session will elapse in -- seconds. Do you desire to extend the session?" It will give three options
- OK to extend
- Cancel to shut popup
- Logout Now to Logout
Please discover beneath screenshot for information technology
2d one is session expired message. This volition redirect to logout page
Below is bootstrap UI of these 2 popups
<!-- < div course =" modal fade" id =" session-expire-warning-modal" aria-hidden =" true" information-keyboard =" false" data-backdrop =" static" tabindex =" -1" function =" dialog" aria-labelledby =" myModalLabel" > < div class =" modal-dialog" office =" document" > < div class =" modal-content" > < div form =" modal-header" > < h4 grade =" modal-title" >Session Elapse Warning< /h4 > < /div > < div form =" modal-torso" > Your session volition expire in < span id =" seconds-timer" > < /span > seconds. Practice you desire to extend the session? < /div > < div grade =" modal-footer" > < push button id =" btnOk" blazon =" push" class =" btn btn-default" manner =" padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px; background-color: #428bca; color: #FFF;" >Ok< /button > < push id =" btnSessionExpiredCancelled" type =" button" class =" btn btn-default" data-dismiss =" modal" style =" padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px; groundwork-color: #428bca; color: #FFF;" >Cancel< /push > < button id =" btnLogoutNow" type =" push button" course =" btn btn-default" style =" padding: 6px 12px; margin-lesser: 0; font-size: 14px; font-weight: normal; edge: 1px solid transparent; border-radius: 4px; background-color: #428bca; color: #FFF;" >Logout at present< /button > < /div > < /div > < /div > < /div > <!-- <!-- < div class =" modal fade" id =" session-expired-modal" tabindex =" -1" role =" dialog" aria-labelledby =" myModalLabel" > < div class =" modal-dialog" office =" document" > < div form =" modal-content" > < div form =" modal-header" > < h4 grade =" modal-title" >Session Expired< /h4 > < /div > < div class =" modal-body" > Your session is expired. < /div > < div class =" modal-footer" > < button id =" btnExpiredOk" onclick =" sessionExpiredRedirect()" type =" button" class =" btn btn-primary" data-dismiss =" modal" way =" padding: 6px 12px; margin-lesser: 0; font-size: 14px; font-weight: normal; edge: 1px solid transparent; border-radius: 4px; background-color: #428bca; colour: #FFF;" >Ok< /push > < /div > < /div > < /div > < /div >
Role B: JavaScript Code
- Setting Server Ping Configuration:
This configuration will always ping server to cheque session Alive or not
var sessServerAliveTime = ten * 60 * 200;
- Setting session timeout configuration
Here you tin give configuration for session timeout
var sessionTimeout = 19 * 60000;
- Employ of Local Storage
Here nosotros used localstorage for setting sessionSlide variable.
- Utilise of sessPingServer() Method
Here we used sessPingServer Method for Ping to sever using Ajax Call. In code snippet, I commented my ajax pinging lawmaking.
Lawmaking Snippet
var sessServerAliveTime = 10 * 60 * 2; var sessionTimeout = 1 * 60000; var sessLastActivity; var idleTimer, remainingTimer; var isTimout = false; var sess_intervalID, idleIntervalID; var sess_lastActivity; var timer; var isIdleTimerOn = false; localStorage.setItem(' sessionSlide', ' isStarted'); part sessPingServer() { if (!isTimout) { return true; } } function sessServerAlive() { sess_intervalID = setInterval(' sessPingServer()', sessServerAliveTime); } function initSessionMonitor() { $(document).bind(' keypress.session', function (ed, e) { sessKeyPressed(ed, eastward); }); $(document).bind(' mousedown keydown', function (ed, due east) { sessKeyPressed(ed, east); }); sessServerAlive(); startIdleTime(); } $(window).scroll(function (eastward) { localStorage.setItem(' sessionSlide', ' isStarted'); startIdleTime(); }); function sessKeyPressed(ed, e) { var target = ed ? ed.target : window.event.srcElement; var sessionTarget = $(target).parents(" #session-expire-warning-modal").length; if (sessionTarget != cypher && sessionTarget != undefined) { if (ed.target.id != " btnSessionExpiredCancelled" && ed.target.id != " btnSessionModal" && ed.currentTarget.activeElement.id != " session-elapse-warning-modal" && ed.target.id != " btnExpiredOk" && ed.currentTarget.activeElement.className != " modal fade modal-overflow in" && ed.currentTarget.activeElement.className != ' modal-header' && sessionTarget != 1 && ed.target.id != " session-expire-warning-modal") { localStorage.setItem(' sessionSlide', ' isStarted'); startIdleTime(); } } } function startIdleTime() { stopIdleTime(); localStorage.setItem(" sessIdleTimeCounter", $.now()); idleIntervalID = setInterval(' checkIdleTimeout()', yard); isIdleTimerOn = false; } var sessionExpired = document.getElementById(" session-expired-modal"); function sessionExpiredClicked(evt) { window.location = " Logout.html"; } sessionExpired.addEventListener(" click", sessionExpiredClicked, false); function stopIdleTime() { clearInterval(idleIntervalID); clearInterval(remainingTimer); } function checkIdleTimeout() { var idleTime = (parseInt(localStorage.getItem(' sessIdleTimeCounter')) + (sessionTimeout)); if ($.now() > idleTime + 60000) { $(" #session-expire-alert-modal").modal(' hide'); $(" #session-expired-modal").modal(' evidence'); clearInterval(sess_intervalID); clearInterval(idleIntervalID); $(' .modal-backdrop').css(" z-index", parseInt($(' .modal-properties').css(' z-index')) + 100); $(" #session-expired-modal").css(' z-alphabetize', 2000); $(' #btnExpiredOk').css(' background-color', ' #428bca'); $(' #btnExpiredOk').css(' color', ' #fff'); isTimout = true; sessLogOut(); } else if ($.now() > idleTime) { if (!isIdleTimerOn) { localStorage.setItem(' sessionSlide', faux); countdownDisplay(); $(' .modal-backdrop').css(" z-index", parseInt($(' .modal-backdrop').css(' z-alphabetize')) + 500); $(' #session-expire-alert-modal').css(' z-alphabetize', 1500); $(' #btnOk').css(' groundwork-color', ' #428bca'); $(' #btnOk').css(' color', ' #fff'); $(' #btnSessionExpiredCancelled').css(' background-colour', ' #428bca'); $(' #btnSessionExpiredCancelled').css(' colour', ' #fff'); $(' #btnLogoutNow').css(' groundwork-color', ' #428bca'); $(' #btnLogoutNow').css(' color', ' #fff'); $(" #seconds-timer").empty(); $(" #session-expire-warning-modal").modal(' show'); isIdleTimerOn = true; } } } $(" #btnSessionExpiredCancelled").click(function () { $(' .modal-backdrop').css(" z-index", parseInt($(' .modal-backdrop').css(' z-index')) - 500); }); $(" #btnOk").click(part () { $(" #session-expire-warning-modal").modal(' hide'); $(' .modal-properties').css(" z-index", parseInt($(' .modal-backdrop').css(' z-index')) - 500); startIdleTime(); clearInterval(remainingTimer); localStorage.setItem(' sessionSlide', ' isStarted'); }); $(" #btnLogoutNow").click(part () { localStorage.setItem(' sessionSlide', ' loggedOut'); window.location = " Logout.html"; sessLogOut(); $(" #session-expired-modal").modal(' hide'); }); $(' #session-expired-modal').on(' shown.bs.modal', role () { $(" #session-expire-warning-modal").modal(' hide'); $(this).before($(' .modal-backdrop')); $(this).css(" z-index", parseInt($(' .modal-backdrop').css(' z-alphabetize')) + 1); }); $(" #session-expired-modal").on(" hidden.bs.modal", function () { window.location = " Logout.html"; }); $(' #session-expire-warning-modal').on(' shown.bs.modal', function () { $(" #session-elapse-warning-modal").modal(' prove'); $(this).before($(' .modal-properties')); $(this).css(" z-index", parseInt($(' .modal-backdrop').css(' z-index')) + 1); }); role countdownDisplay() { var dialogDisplaySeconds = 60; remainingTimer = setInterval(part () { if (localStorage.getItem(' sessionSlide') == " isStarted") { $(" #session-expire-alert-modal").modal(' hide'); startIdleTime(); clearInterval(remainingTimer); } else if (localStorage.getItem(' sessionSlide') == " loggedOut") { $(" #session-expire-warning-modal").modal(' hide'); $(" #session-expired-modal").modal(' show'); } else { $(' #seconds-timer').html(dialogDisplaySeconds); dialogDisplaySeconds -= 1; } } , 1000); }; function sessLogOut() { window.location = " Logout.html"; }
Delight find attached code for demo .SessionTimeout.zip 
I already set One Minute wait timer for popup. After 1 minute it will show timeout confirmation message and after that session elapse popup volition show
Happy Programming!!
Don't forget to get out your feedback and comments below!
Source: https://www.codeproject.com/Tips/1175658/Session-Expiration-Popup
0 Response to "Jquery Session Expired Please Try Again"
Postar um comentário