jQuery load multiple object instances on every load

Question

After a long struggle with jQuery countdown plugin I still cannot solve it, but at least I know why it happens.

Before I explain it any further please take a look at this example and try reproducing the problem:

Try clicking on GMT link
Countdown timer will show
Next click on GMT+7
GMT+7 timer will show but have an error...

On second load jQuery creates another instance in this case the timer and display it in the same div. If you continue to click on it, it will create more and more objects.

How can I solve this? I've been struggling with it for 5 hours now.
How can I reset/kill the object or something. So it won't crash.

Any help from you guys is greatly appreciated.

Thanks, Ivan

When I check the example and follow your reproduction procedure I don't see any errors? — Robert Koritnik
– Robert Koritnik, Commented Jun 11, 2011 at 13:12
I can also see that your Ajax partial view returns script that creates a new instance of your plugin. Why don't you instead just return JSON data and manipulate existing plugin that's already loaded/running. It seems you should then just run stop + set + start as shown in this example — Robert Koritnik
– Robert Koritnik, Commented Jun 11, 2011 at 13:14
Hi Robert, thanks for the reply. I tried to use the start-stop-reset but still no luck. the other JQuery instance still load. i think i need to change the logic like you said. Maybe i need to move the timer on the main panel. not in loaded content. what do you think? — Ivan
– Ivan, Commented Jun 11, 2011 at 13:24
@Ivan: if timer stays on the page at all times it's best to keep it there and reuse the same instance. I've tried running stopCounDown, setCountDown and startCountDown on your instance and it worked nicely. I suggest you simply return the targetDate as JSON from the server and use that in the set function. — Robert Koritnik
– Robert Koritnik, Commented Jun 11, 2011 at 13:28
@Robert, Finally i got it working. I move the timer to main panel. And the loaded content will fire up the set and start event. So it will only use one timer. Thanks for helping me. You just save my day. Cheers. Ivan — Ivan
– Ivan, Commented Jun 12, 2011 at 5:47

Robert Koritnik · Accepted Answer · 2011-06-13 11:23:32Z

1

Checking your example

I can see that your Ajax request returns some HTML as well as some script (document ready ?!?!) that creates a new instance of countdown plugin.

Suggested solution

Why don't you instead just return JSON data and manipulate existing countdown plugin that's already loaded/running in the browser window? It seems you should then just run these function in this order:

stopCountDown()
setCountDown( /* target date data */ )
startCountDown

as suggested in countdown plugin documentation example.

I've actually tried running these three functions using Firebug and it correctly stopeed reset and started the same plugins instance.

My suggestion is therefore: Your Ajax request should return JSON of the targetDate object that can be used directly with setCountDown() function.

answered Jun 13, 2011 at 11:23

Robert Koritnik

105k57 gold badges286 silver badges416 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery load multiple object instances on every load

1 Answer 1

Checking your example

Suggested solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Checking your example

Suggested solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related