ThickBox not working when data is from server side
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
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?