CODEWITHSUNDEEP
javascriptjqueryajaxdomreload
rails_has_elegance
rails_has_elegance

Reputation: 1692

What's the smartest way to refresh dom handlers after new ajax-loaded content?

I'm working with a large template of charts and other widgets. I also manually implemented some ajax tabs. Now whenever those tabs load new content (charts), the problem is that all the template scripts in the head tag won't work with those ajax-loaded elements anymore.

I know, normally you would use .live for this kind of problem, but this would mean to go into the whole 50k lines-js template and change everything to .live calls... Not really able to do that.

Is there instead a jquery way of reloading/reactivating all the scripts within the head-tag?

Upvotes: 0

Views: 4442

Answers (1)

jfriend00
jfriend00

Reputation: 707556

First off .live() has long since been deprecated and even removed from the latest versions of jQuery. You should never be thinking of using .live().

Second, as it sounds like you already know, the "right" way to fix this is to change your code to use the delegated form of .on() which is what replaced .live(). Yes, change all the code that does it the wrong way. Here's a post on using the delegated form of .on() instead of .live().

Third, a work-around would be to put all your initialization code that hooks up these event handlers into a single function (or called by a single function). Then, you call that single function upon initialization and then you can call that single function any time later after you reload your content. The trick is that you can only put code into that initialization function that can be called or should be called more than once after you content has been reloaded. If you put some event handlers in there that should not be in there, then you may get duplicate event handlers installed. So, only event handler initialization that applies to the replaced content should go in this function.

Suppose that function was called initDynamicContent, then it could look like this:

 // init event handlers on the original version of the dynamic content
 $(document).ready(initDynamicContent);

Then, sometime later after you replace the dynamic content, you can just do:

// code here that replaces the dynamic content with new content
initDynamicContent();

There is no magic jQuery way for this to happen automatically. jQuery has absolutely no way of knowing which code should be run again and which code should not.

Upvotes: 4

Related Questions