CODEWITHSUNDEEP
jquerycountdowntimer
S.Elavarasan
S.Elavarasan

Reputation: 23

count down timer plugin restarts after page refresh

Im using count down timer plugin it restarts after page refresh and i cannot the values inside timer div because div binds every time the time running i wanna store it in cookie and retrieve after the page refresh can anyone refer a code to do this.

I using below code to call timer plugin

$("#hms_timer").countdowntimer({
        hours : hrs,
        minutes : mins,
        seconds : sec,
        size : "lg",
        pauseButton : "pauseBtnhms",
        stopButton : "stopBtnhms"
    });

This link is where i got timer plugin

Upvotes: 1

Views: 525

Answers (2)

JasperZelf
JasperZelf

Reputation: 2844

Looking at the plugin documentation, there is no way to retrieve the current time left. The only way you can get the current time left is to parse the HTML output of the timer.

Since a countdown timer is pretty basic, I would advise to write your own countdown timer, and add the required cookie mechanism you're talking about.

Upvotes: 1

Thiyagu Rajendran
Thiyagu Rajendran

Reputation: 655

Whenever a page is readloaded, the entire context of the old page is destroyed and an entirely new context is created. You can't keep a timer from one page load running on the next page load.

If you need to save some state from one page load to the next and then in the next page load examine that state and decide exactly how to set up the initial page to match what was previously going on, then you can save state between page loads in either HTML5 local storage or in a cookie.

The other possibility is to NOT reload your page and instead update the contents of the page dynamically using ajax and javascript. That way your existing timer would just keep running because there would be no page reload at all.

If all you're trying to do with your timer is show how much time is left in some countdown, you can set the countdown zero time into HTML5 local storage and when the reloaded page loads, it can check the time set in local storage and start the countdown timer to match the time it was previously set for.

Use cookie, or if HTML5 then local/session storage to save state.

HTML

<a href="#" onclick="SaveTime()">Save Current Time</a> | 
<a href="#" onclick="retrieveTime()">Retrieve Saved Time</a>

<div id="result"></div>

JAVASCRIPT 

function SaveTime(){
var date = new Date();
var timeObj = { sec:date.getSeconds(), min:date.getMinutes(), hr:date.getHours() };
localStorage.setItem("timeObj", JSON.stringify(timeObj));
$('#result').append(JSON.stringify(timeObj)+' -- > Saved<br />' );
}

function retrieveTime(){
var timeObj = JSON.parse(localStorage.getItem("timeObj"));
//You have the time with you now
//You have the time with you now
$('#result').append(timeObj.hr+':'+timeObj.min+':'+timeObj.sec+' --> Retrieved<br />');
}

Its just a basic example to save timer in local storage on click. Modify it and call the javascript function in timer regularly.

If you found this answer helpful, mark it as answer/upvote.

Upvotes: 0

Related Questions