Multiple instances of countdowns and associated listeners

[kheush]

Hi,

I am not sure this is a real issue (or just something i dont get).

I am trying to set up a listener for multiple instances of jquery timeCircles. I have multiple countdowns instances showing on my page et everything is working fine ...

Until, time reaches 0 and the the callback function is suppose to "do something".

In a fist version, I had just set up the timeCircles.addListener method with a ".class" selector. The callback fires and "does something" but only for the first instance of timeCircles.elements - which is not the behaviour I was expecting (I except the callback to be fired for all elements).

Then on a second version of my code, I tried to fired callback via timeCircles.elements.addEventListener. I first tried to fire it by call it like a method with the callback as an argument: timeCircles.elements.addEventListener.( function(unit, val, total ) {"do something"}); -> that was my mistake.

Then i made a correction (I thaught so) by passing "do something" this way : timeCircles.elements.addEventListener = "do someting".

Since no change.

Hopefully, I am being clear enough with my explanation. And basically my question would be, is there a way to have multiples instances of timeCircles on one page - sameClass #individualIds (that part worked for me) and tell them to "do something" (worked as well) - foreach instance of timeCircles.elements (What I am trying to Figure out).

Thanks.

[wimbarelds]

Hi there, I'm not sure how exactly you're trying to add your listeners, but the following for:

$('.class').TimeCircles().addListener(function(unit, value, total) {
   // Your code here
});

​​ Should work fine. if you're having trouble still, please post a link to an example- or post a more complete code sample.

[kheush]

Hi, And thanks for the quick response. Actually I have no trouble making it work when the listener triggers one countdown at a time. Maybe more details would help. My question is : can I bind the listener to multiple timeCircles objects which will all trigger at the same time. Is there a way to identify which one has been trigered one in the // do something here ?

I have managed to have multiple countdowns working and counting down to 0.

The listener part also is working fine --- when only one item at a time gets to 0 (this is for an auction site).

The problem occurs when more than one countdown reach zero at the same time and all have to trigger the listener (at the same time). It seems to only recognize the first one.

I have made progress since I posted earlier so this is the latest version on my sample code.

// Previous code $(".countdown").TimeCircles({ // Irrelevant and tested options
}) .addListener( function(unit, value, total) { var temp = $(this).attr("id").split("-"); // I get the id of a specific item var idItem = temp[1]; if(total == 0) // modifications on several elements whose name are based on idItem });

This code would work fine but idItem is always the same so everything is done -- but on the same dom element (identified by idItem - which is supposed to be modified).

So i decided to try to go deeper in the code and this is where I am at this very moment (trying to somehow find a way to iterate on elements individualy and addEventListeners to it instead of addListener to the whole pack of countdown.

// Code in progress ... var timeCircles = $(".countdown").TimeCircles({ // Irrelevant and tested options
});

timeCircles.foreach( function(obj) { // Going trough the elements var _element = obj.element; var id = _element.id; // Getting the real id // _element.addEventListener (function() { // Trying to add specific listener to this specific element // Stuck on trying to figure out the proper way to add the above eventlistener // if(total == 0) // do what I am supposed to do // });
});

Thanks a lot.

[wimbarelds]

You've actually helped me uncover a small bug.

This code would work fine but idItem is always the same so everything is done -- but on the same dom element (identified by idItem - which is supposed to be modified).

Not exactly, it's actually returning all elements. If you do .attr('id') on more than one element, it returns the id for the first of the set. For now, a simple work around would be:

$(".countdown").each(function(){
  var $this = $(this);
  $this.TimeCircles({
    // Irrelevant and tested options
  })
  .addListener( function(unit, value, total) {
    var temp = $(this).attr("id").split("-"); // I get the id of a specific item
    var idItem = temp[1];
    if(total == 0) // modifications on several elements whose name are based on idItem 
  });
});

[kheush]

Alright. Thanks a lot bro ! That's the kind of fix I was working on as I received your message... but for some reason I was trying to iterate inside the listener - trying to get some sort or equivalent of an array (was half way through). This -indeed- makes way more sense ... I give it a shot and let you know.

[kheush]

Well. It works - half way through. Seems to work fine before total gets to zero. Trying to alert(idItem)before zero for example, will show you that all ids are retrieved.

Things get messy when total gets to zero. Actually, there are two separate behaviours :

No alert(idItem) in the if(total == 0) block results in // "what you do" : Being applied randomly to 3 (out of 4 items with my sample data) - and not always the same as you refresh the page (really seems to be random amongst the ids).

With an alert(item) to try and figure out what is going on // only one item gets "what's done"

[reidlai]

For me, I have attribute id for each TimeCicles and addListener one by one....but only the last one listener fired....need help...thanks. I am using 1.5.3