Fix to jQuery plugin does not work on ajax loaded content

I had been loading table records through ajax pagination using jquery. Some of the urls/links (View Details, Edit and Delete) in loaded content had been using thickbox to handle respective requests. Although, if i did’t use the ajax to load records these links would work fine and thickbox would open. But once i introduced ajax they suddenly stopped working. After small digging i got an impression that the loaded content was falling out of scope of the DOM scope of the rest of document.

Although i had faced this kind of issue with some another jquery plugin earlier (and perhaps a post related to that one is also there in this blog) i googled to find out a way to re-initialize the thickbox and found this post (http://www.robilim.com/article-item/11/javascript-plugin-not-working-on-ajax-loaded-content/). In fact the post was intended to guide developers on various jquery plugins but co-incidentally it explained how to initiate the thickbox and that is what i wanted. Here is the line of code:

tb_init(‘a.thickbox, input.thickbox’); //reload thickbox plugin

I visited my thickbox.js to confirm this one and found an additional tag/class pair so it became:

tb_init(‘a.thickbox, area.thickbox, input.thickbox’);//pass where to apply thickbox

So, once you have finished loading the data through ajax call place the following line of code somewhere there so it is get executed as well.

I applied this one to my code and it worked fantastic! I hope it helps someone else like it helped me.

Important:

Ah, just after re-initiating the thickbox i found that all my thickbox links (those except of ajax loaded content) were loading thickboxes twice. After a bit of digging i found that the re-initiate call was re-attaching the thickbox event to the elements already having thickbox event attached. The way thickbox works is, it attaches the thickbox event to all elements with class “thickbox” on page load. So the thickbox links having this event attached on page load were being attached the same event again when i triggered event attachment for the elements of content loaded through ajax resulting in loading thickbox contents twice within the same thickbox window.

To fix this i found a simple solution to detach the thickbox event once just before re-attaching it, as the following:

function removeThickBoxEvents() {
        $('.thickbox').each(function(i) {
            $(this).unbind('click');
        });
    }

So the complete code to load ajax content in thickbox and attaching thickbox event to elements of ajax loaded contents goes like this:

Create two separate functions,

function removeThickBoxEvents() {
        $('.thickbox').each(function(i) {
            $(this).unbind('click');
        });
    }

function bindThickBoxEvents() {
        removeThickBoxEvents();
        tb_init('a.thickbox, area.thickbox, input.thickbox');
    }

and call bindThickBoxEvents() inside the ajax call like this,

$.ajax({
    type:       "GET",
    url:        "/ajax-content.php",
    cache:      false,
    data:       "f=foo&b=bar",
    loading:    $('.loading').html("“),
    success:    function(html) {
                    $(”#ajaxContent”).html(html);
                    //re-attach thickbox
                   bindThickBoxEvents()
                }
});

Thanks to “davidjclarke” for providing quick copy paste content

Possibly Related posts:

• A possible reason for jQuery thickbox appearing twice on a click
  I had an issue while using thickbox with jQuery today. The thickbox which i had been using to show ajax content opened twice. It appeared...
• Limitation on the number of characters in jquery ajax response
  The following jquery ajax call would return approx. 8442 characters in its “html” response. Content exceeding this number would be truncated. var url = "load_pocket_fabrics.php?filter="...
• A note on DOM elements’ changed scope when using thickbox with jQuery
  A similar situation may arise (atleast for me it did) when you try to invoke jQuery’s “thickbox” in conjunction with a custom onclick firing. I...
• Creating Ajax form in Cakephp using jQuery
  Because of its being more flexible, extensible and precise nature the jQuery certainly has emerged as a more popular Javascript library as compared to prototype...
• Creating Ajax form in Cakephp (with Prototype.js)
  (If you are using jQuery with cakephp you may want to view this article, Creating Ajax form in Cakephp using jQuery ) With the help...

Tags : thickbox, thickbox ajax load, thickbox loading twice, thickbox problem in ajax loaded content, thickbox twice

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.