Linking a Javascript Countdown to a Progress Circle

Linking a Javascript Countdown to a Progress Circle

  

Hi

I have some Javascript that countdowns from 15 to 0 upon a button click and would like the countdown progress to be linked to a progress circle, such that I can see the progress circle values ticking down from 15 to 0. But when I tried to link the two together by matching the widgetID to the Id specified in the Javascript, the progress circle disappears and is replaced by plain text ticking down. Does anyone have any ideas how to do this? 


Also if anyone could help me figure out how to start a second timer with upon the end of the first timer, that would be fantastic as well!!


Thanks a lot!

Jonathan

Hello Jonathan,


Your timer is named "some_div":



Then you are doing this:

(...)

var elem = document.getElementById('some_div'); //returns the progress widget

(...)

elem.innerHTML = timeLeft ; //replaces progress widget


That's why you're having this behavior.


You're on the right track, just continue from here :)


Cheers

Armando Gomes wrote:

Hello Jonathan,


Your timer is named "some_div":



Then you are doing this:

(...)

var elem = document.getElementById('some_div'); //returns the progress widget

(...)

elem.innerHTML = timeLeft ; //replaces progress widget


That's why you're having this behavior.


You're on the right track, just continue from here :)


Cheers

Hi Armando


Thanks for your reply. I understand why this is happening, but I'm still not too sure how to rectify it in the sense of affecting whatever I put in the 'progress' input with my Javascript. I've tried changing it to


var elem = document.getElementById('Seconds');



but I don't think I  the variable 'seconds' has an Id that can be retrieved


Solution

Hello Jonathan,


I've solved your problem :) 


What I did: instead of trying to everything in JavaScript, we use platform capabilities. Step by step:

1) I've created an additional variable, called "IsFirstExecution". This means that, if being the first time the action is being executed, we do not change the value of the SecondsLeft variable. If it's not the first execution, we decrement one unit on our variable. Remember that everytime you "assign" a new value that has any impact on the end user interface, it will automatically execute the refresh.


2) We check if SecondsLeft is zero. If true, we end the action. If not, we invoke a JavaScript snippet.


3) The javascript snippet is really simple:

setTimeout(function() {$actions.GoOnClick(); }, 1000);

After one second, we invoke the same client action.








Let me know if this helps. If not, let us know what else is needed.


Cheers!

Solution

Hi Armando, 


Thanks a lot, this helped immensely.


Cheers man!

No problem, glad I could help!