htmlguyllc / jtimeout Goto Github PK
View Code? Open in Web Editor NEWjQuery session timeout handler
Home Page: https://htmlguyllc.github.io/jTimeout/
License: MIT License
jQuery session timeout handler
Home Page: https://htmlguyllc.github.io/jTimeout/
License: MIT License
Hi,
Thanks for the great works. I am gonna integrate your lib to may application, using custom modal not jAlert. Everything looks good except when I have multiple tab and click on "exntend session" button:
Current tab:
Another tab:
Do you have any idea how to close the modal on another tab? I was looking for closing it on onClickExtend
event, but it seems like it never been called.
Thanks
1.) Open the demo link on two different tabs
2.) Then I Clicked on the button 60 seconds left after clicking poup comes up with decrementing seconds.
3.) After me session timeout on both tabs, I clicked on one popup to login Again
4.) Then on first tab the poup didn't close and it is showing the value (1440 seconds)
Hello, this is my config :
<link rel="stylesheet" src="/assets/jalert/jAlert.css"/>
<script src="/assets/jalert/jAlert.min.js"></script>
<script src="/assets/jalert/jAlert-functions.min.js"></script>
<script src="/assets/jalert/jTimeout.min.js"></script>
<script>
$(function () {
$.jTimeout({
flashTitle: true, //whether or not to flash the tab/title bar when about to timeout, or after timing out
flashTitleSpeed: 500, //how quickly to switch between the original title, and the warning text
flashingTitleText: '**WARNING**', //what to show in the tab/title bar when about to timeout, or after timing out
originalTitle: document.title, //store the original title of this page
timeoutAfter: 60, //pass this from server side to be fully-dynamic. For PHP: ini_get('session.gc_maxlifetime'); - 1440 is generally the default timeout
heartbeat: 1, //how many seconds in between checking the expiration - warning: changing this can effect your prior countdown warning and timeout - for best results, stick with 1
extendOnMouseMove: true, //Whether or not to extend the session when the mouse is moved
mouseDebounce: 30, //How many seconds between extending the session when the mouse is moved (instead of extending a billion times within 5 seconds)
onMouseMove: false, //Override the standard $.get() request that uses the extendUrl with your own function.
extendUrl: '/index.xhtml', //URL to request in order to extend the session.
logoutUrl: '/auto-logout.xhtml', //URL to request in order to force a logout after the timeout. This way you can end a session early based on a shorter timeout OR if the front-end timeout doesn't sync with the backend one perfectly, you don't look like an idiot.
loginUrl: '/login.xhtml', //URL to send a customer when they want to log back in
secondsPrior: 30, //how many seconds before timing out to run the next callback (onPriorCallback)
onPriorCallback: false, //override the popup that shows when getting within x seconds of timing out
onClickExtend: false, //override the click to extend button callback
onTimeout: false, //override the timeout function if you'd like
onSessionExtended: false //override the session extension method (triggered only after a timeout)
}
);
$.jTimeout().getExpiration(); //gets the expiration date string
$.jTimeout().getSecondsTillExpiration(); //gets the number of seconds until the session expires
});
</script>
jQuery 3.4.1 / Chrome v 75.0
i get this error :
jTimeout.min.js:10 Uncaught TypeError: c.options.onPriorCallback is not a function
at countdown (jTimeout.min.js:10)
and then a series of :
jTimeout.min.js:10 Uncaught TypeError: c.options.onMouseMove is not a function
at HTMLBodyElement. (jTimeout.min.js:10)
at HTMLBodyElement.dispatch (jquery.js.xhtml?ln=primefaces&v=7.0.5:2)
at HTMLBodyElement.v.handle (jquery.js.xhtml?ln=primefaces&v=7.0.5:2)
the flashingTitleText: 'WARNING' is showed on the page title
I have added "extendOnMouseMove: true," to the script on my page as well as in the jTimeout.js script but a mouse movement on the page does nothing either before or after the alert appears.
Browser: Chrome Version 97.0.4692.71
Hi again,
Was testing for my project on IE Edge on windows 10, looks like localStorage doesn't work!
This only appears when I click the website
onPriorCallback: function(jTimeout){ //tell them they will be timing out soon! //to get the current time: var secondsLeft = jTimeout.getTimer(); console.log('You will be timed out in: '+secondsLeft+' seconds'); }
seems like to be not working on ready
$2(function(){ $2.jTimeout({
Does this still log the user out if they are using a mobile device and they left the tab open or does it wait until the user clicks on that tab again to log the user out?
Hey,
This is the very best timeout implementation I've seen, thank you!
I do have two suggestions:
src
and dist
content all says 2.1Thanks again.
Hello everyone,
How can i transform the time in seconds in time for example 1440 seconds show on input curTime 23m 30s
When using custom callbacks, onSessionExtended event is not being fired:
$.jTimeout(
{
expiration_key: 'jtimeout-session-expiration',
flashingTitleText: '!!!',
timeoutAfter: 25,
extendUrl: '/ping',
logoutUrl: '/logout',
loginUrl: '/login',
secondsPrior: 10
onPriorCallback: function () {
$('#modal-session-timeout').modal('show'); //works fine
},
onTimeout: function () {
window.location = '/logout'; // works fine
},
onSessionExtended: function () {
$('#modal-session-timeout').modal('hide'); // does not get fired
}
}
);
$('.btn-extend-session').on('click', function () {
$.jTimeout.reset();
$('#modal-session-timeout').modal('hide');
});
Session gets renewed but boostrap modal window remains open. Any idea how to fix that?
I see you have expiration_key
as a parameter when you init $.jTimeout()
, but how do you grab a specific timer's getSecondsTillExpiration()
from another script (such as a setInterval()
)?
Hi,
Thanks for the nice plugins.
I am displaying the loginurl in an iframe, once the user logs in I call the reset() function to restart the loop which shows the default onPriorCallback alert but keeps counting below zero and never displays the onTimeout again
How can I restart the countdown loop again after onTimeout has been shown?
Thanks
Can you let me know, how to redirect to external URL on logout click
i have created 2 projects in localhost like
http://localhost/zend3/public/ and http://localhost/zend3_clone/public/
those projects i have implemented this plugin , but i open these in same browser in different tab , but the "zend3_clone" session counter time is resetting once project zend3 is refreshed . is that bug ? or any fix on this ?
i want to different countdown instance in different projects is that possible?
Hi Shane,
excellent library I must say. Would you consider one more additional function/property?
Although I understand that resetting the timeout count by mouse is kind of cool but it's really confusing for a new user. When my session times out, I come back and naturally I want to click the alert button. What happens however is it goes away and "I don't know" what happened, I didn't even had the time to read it because it disappeared immediately after I moved my mouse :(
as quick workaround I changed the if statement in the mousemove event:
if (!jTimeout.mouseMoved && ($('#jTimeoutAlert').length == 0 && $('#jTimedoutAlert').length == 0)) {
Now it triggers only when one of the windows are not rendered.
Would you consider adding one more property or changing the behaviour?
thank you for you excellent work
I'm using chrome(87.0.4280.88) but have tried firefox and edge
onClickExtend doesnt seem to do anything.
I am trying to allow onclick and onmousemove to reset timeout
the only way i was able to get the time out to reset onclick was to attach it to the $(document).on('click', function()
here is my testing code::
<title>jQuery Session Timeout Script</title>
<link rel='stylesheet' type='text/css' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css'>
<link rel="stylesheet" type="text/css" href="CSS/jAlert/dist/jAlert.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'></script>
<script src='https://htmlguyllc.github.io/jAlert/dist/jAlert.min.js'></script> <!--Needed -->
<script src='JS/jTimeout.js'></script>
var timer,
setTimer = function(){
timer = window.setInterval(function(){
$('#secondsRemaining').val( $.jTimeout().getSecondsTillExpiration() );
}, 1000);
};
setTimer();
});
</script>
</div>
</div>
any help would be appreciated
Not sure if it's my implementation that is wrong but when I click extend my session in one tab the jAlert stays open in the other tabs but the countdown is resetter correctly.
I changed this bit of code in my implementation
hideCountdownAlert: function()
{
timeout.timeoutWarning = false;
var timeoutAlert = $('.jAlert');
if (timeoutAlert.length > 0)
{
timeoutAlert.closeAlert();
}
},
Don't know if it's a correct fix or my implementation is wrong, let me know.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.