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 :)

Share on Facebook

Tweet

Follow us

Save