ThickBox not working when data is from server side

Question

I m using jQuery thick box to show an aspx page in a modal dialog This works fine in my page.In my page,I have some links on which when i click,using jQuery's Load method,I am getting some data from the server page and loading into it.(the data i m getting is a grid which contains some images).My problem is that my thickbox is working fine when it is hardcoded in my page,But when i am taking it from server and loading to a div,Its not working,Instead,of showing the new page in modal dialog,its redirecting the browser to load that page.

I hard coded this line in my first page

<a class='thickbox' href='../Home/CostMetrics.aspx?Model=6&KeepThis=true&TB_iframe=true&height=300&width=850'>modal thick box link</a>

and i am generating this tage from server when i load data from server to the div

<a class="thickbox" href="../Home/CostMetrics.aspx?Model=5&KeepThis=true&TB_iframe=true&height=300&width=850">modal thick box link</a>

Both are same.But my lightbox is not working.Any Ideas to solve this ?

I have included the thickbox CSS and js in my first page.My server page which fills the div is return data like this

<div><div><img src='abc.jpg' /> <a class="thickbox" href="../Home/CostMetrics.aspx?Model=5&KeepThis=true&TB_iframe=true&height=300&width=850">modal thick box link</a></div></div>

Thanks in advance

Answer 1

As far as I remember ThickBox is initialized when DOM is ready (on ready event of jQuery). During this initialization it replaces default click handler with one which will show you modal. When you use jQuery's Load method to load data there are no such initialization. In order to fix this you should manually initialize ThickBox after inserting new html into page on this new html. Or you also can reinit ThickBox on all elements (after you insert new html into dom), this will work but this is not optimal solution:

tb_init('selector for newly added anchor (a tag)'); // only for new one
tb_init('a.thickbox'); // to reinit thickbox on all anchors with class thickbox

Answer 2

I had a similar problem - thickbox works fine on data that loads in page - but when you return dynamic content (using jQuery Ajax command) 'after the page has loaded' - links contained in that new data would not open thickbox...

My Solution:
Thickbox calls the "*tb_init*" function inside the thickbox.js file - which is only executed once, on page load... you need to call the "*tb_init*" function again INSIDE your jQuery function that executes the new dynamic server content!

Call the 'tb_init' by the following three lines (you can find these lines at top of "thickbox.js" file):

tb_init('a.thickbox, area.thickbox, input.thickbox, button.thickbox');//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;

As an example - this is a code snippet of how i got thickbox working on content i dynamically generated using the jQuery Ajax command (which i think is similar to jQuery's 'Load' method that you use!?)...

$.ajax({
method: 'get',url: '<?php echo $url;?>incl_ajax_prices.php',data: 'h=<?php echo $Hid;?>',
beforeSend: function(){$('#PriceLoad').show('fast');}, //show loading just when link is clicked
complete: function(){ $('#PriceLoad').hide('fast');}, //stop showing loading when the process is complete
success: function(html){ //so, if data is retrieved, store it in html
$('#Prices').show('slow'); //animation
$('#Prices').html(html); //show the html inside .content div

// ThickBox - this allows any dynamically created links that use thickbox to work!
tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;

}
}); //close ajax

This is how I did it (im new to jQuery), its probably not the best solution, but trial & error lead me to this method!

Hope that helps?

Answer 3

You can replace original tb_init function code inside thickbox.js to this one:

function tb_init(){
    $(document).click(function(e){
    e = e || window.event;
    var el = e.target || e.scrElement || null;
    if(el && el.parentNode && !el.className || !/thickbox/.test(el.className))
    el = el.parentNode;
    if(!el || !el.className || !/thickbox/.test(el.className))
    return;
    var t = el.title || el.name || null;
    var a = el.href || el.alt;
    var g = el.rel || false;
    tb_show(t,a,g);
    el.blur();
    return false;
    });
};

Or you can just place this function in the head of your html page inside tag as a normal JS function. It will make this work well with external data loads.