2

I´m looking for a good way to re-init a plugin after the content is loaded with Ajax. For example this code initialize a jquery plugin:

$('.helloworld').plugin({
 option_one: value
});

So after the content is loaded with ajax a new element with the class "helloworld" is inside the page. I want that the plugin I've just initialized refers also to the elements which are loaded with ajax. I could put the code above into a JavaScript-function and call this after the ajax load but I think there is a more comfortable way. Does somebody know how?

icodebuster
  • 8,890
  • 7
  • 62
  • 65
julesdude
  • 195
  • 1
  • 2
  • 16

1 Answers1

0

I am not sure if this is the most elegant or efficient way but I am thinking to give the AJAX loaded .helloworld an additional class called .no_plugin and set a 1000 millisecond interval on your page to look for $('.no_plugin'), attach the plugin, and remove the .no_plugin class so that next time the interval fires off it will no try to re-attach the plugin to something that already has it.

//set the interval
setInterval(function(){

    //find all instances of .no_plugin
    //remove the class AFTER applying the plugin or else the selector will lose it's place
    //and fail to attach your plugin
    $('.no_plugin').plugin({
        option_one: value
    }).removeClass('no_plugin');

}, 1000);
MonkeyZeus
  • 20,375
  • 4
  • 36
  • 77
  • It´s a solution, thank you! But I think it is not a permanent solution. On a page with a lot of plugin-initializations that will affect the performance on some devices (for example on old pcs or on mobile devices). – julesdude Jul 22 '13 at 20:11
  • No problem. I've looked around a bit and it looks like jQuery might have what you are looking for and it's called ajaxComplete. I've never used it before but you can find it here :) http://api.jquery.com/ajaxComplete/ – MonkeyZeus Jul 22 '13 at 20:22
  • Isn´t it the same as to put the events into a JavaScript-function and then call it if the AJAX-load is finished? Is there no way to initialize jquery events without putting them into a function? I´m searching for a way to init the plugin for all elements and for all elements in future, like .on() or .live() – julesdude Jul 22 '13 at 22:04
  • I could use .ajaxComplete() but this wouldn´t work for elements which are on the page before the ajax load. So I have to add the events two times. – julesdude Jul 22 '13 at 22:05
  • I believe live() is deprecated if you are using jQuery 1.7&up so I wouldn't recommend it. delegate() hasn't been deprecated but it has been "superceded" by on() so I am not sure if that means it is on it's way out the door. Check out this thread and see if you can get any use from seeing which handlers are available for your target element. http://stackoverflow.com/questions/2382994/how-to-check-if-any-javascript-event-listeners-handlers-attached-to-an-element-d – MonkeyZeus Jul 23 '13 at 12:30
  • You don't have to write out the event two times. $('.helloworld, .goodbyeworld').plugin(); will attach it simultaneously to two targets. Good luck! – MonkeyZeus Jul 23 '13 at 12:32
  • I know that, but if I´m using .ajaxComplete() to attach events after the ajax load is complete, this will not attach events for elements which are on the page before the ajax load ("static-page"). So I have to add the event two times, first when the document is ready and second if the ajax load is finished. but I would like to find a method to attach events (plugins) to elements for now and for the future (so also for elements still to come) – julesdude Jul 23 '13 at 12:57
  • Sorry, misunderstood your recent comment. Out of curiosity, have you tried the setInterval route and monitored your task manager for excessive CPU usage? I am interested in knowing how intense it would be. Based on everything I've found, it is not possible to bind a listener for dynamically loaded elements. Calling it twice is the route I would take and also the route I have taken multiple times. Good luck! – MonkeyZeus Jul 23 '13 at 13:20
  • No I didn´t but on a mobile device with 50MB RAM (like iPhone 3G) these intervals are pull on the performance. – julesdude Jul 23 '13 at 13:35
  • Prioritizing maximum user availability/accessibility, I like it! – MonkeyZeus Jul 23 '13 at 13:56
  • Like this: $(document).on('load', '.helloworld', function(){ $('.helloworld').plugin({ option: value }); }); – julesdude Jul 23 '13 at 15:23
  • thanks for that link. unfortunately that doesn´t work on elements with no click, focus etc. event, but load. – julesdude Jul 23 '13 at 15:34
  • Did .on('load') work for you? I saw it in a few posts while scouring the internet but none of the examples seemed to relate to detecting live loading of an element within the DOM. If you can please give me the link for the example I would definitely appreciate it, unless of course it is from jQuery.com then I will just have to re-read the documentation XD – MonkeyZeus Jul 23 '13 at 16:48
  • No it didn´t work, that´s why I am looking for something like this :) – julesdude Jul 24 '13 at 05:34