Countdown Timers that Persist Despite AJAX Reload

Currently I'm using someone else's JS-based countdown timer. When I fetch the timers I simply append a value to the class of the countdown timer like so:

In PHP:

 $rows = mysql_num_rows($result);
 for ($j = 0 ; $j < $rows ; ++$j){
 <span id="countdown'.($j+1).'">
 }

to ensure unique ids for the timers.

The problem is that when I start using AJAX to refresh the the part of the page with the timers, the new timers don't work since the ids are no longer unique.

Any idea for a way around this? Any idea if there is a more simpler plugin for countdown timer?

I'm using the timer from here. http://andrewu.co.uk/clj/countdown/

Any idea on how to keep track of the开发者_如何学编程 ids already in use?

See the description of how to do multiple countdown timers in the timer documentation you referenced: http://andrewu.co.uk/clj/countdown/.

If you're going to use that code and have multiple timers, then you just have to make the IDs be consecutively numbered as the documentation explains so you never have any ID conflicts and so that the timer code can find each of your timers.

I don't know what your ajax code is doing to the page, but if it's adding a new counter also, it will have to compute what the right ID to use is (what the next available sequential ID is).

If you don't need to have multiple counters in the same page, then I'm not sure why there's a problem. Just make sure the ajax call doesn't add another timer or any conflicting id.

Additional info based on further discussion:

First of all, I don't see any way that the counter code you are using handles dynamically added content. It initializes the counters that are present in the page when the page finishes loading. After that, it never sees another counter, whether you give it a good ID or not. So, the counter code will have to be modified to handle ajax-added counters anyway.

Second, it wouldn't be hard to change the CD_Init() function in the counter code to support a "register" function where you passed in the ID of any object you wanted to behave as a counter rather than it's somewhat silly design of looping through consecutive IDs looking for something that exists. That works fine for one counter, but is problematic for N counters.

Third, if the "autofind" capability that it has now was useful for some reason (which I'm not a fan of), then I'd change it to use a unique class name (so multiple objects can all have the same HTML and be enabled as counters) and I'd add a ReInit() function that one could call to rescan for objects with that class name after dynamic content was added to the page.

If you need to find elements by class name in older browsers (which don't natively support that capability), then there are a number of ways to do it. I personally use the Sizzle library which detects if the function is built in and uses it if so, but if not falls back to a hand-coded way of doing it. jQuery, YUI3 and other libraries have their own implementations or use the Sizzle implementation internally.