The jQuery thickbox plugin is fantastic. All you have to do is include the js file, and give the elements that require a jQuery thickbox, a class of thickbox. Like below;
<a class="thickbox" href="thickboxexample.php?height=600&width=600">jQuery Thickbox Example</a>
The thickbox plugin then automically!! attaches its events to those elements. For ease of use this is great, but it has its limitations, because the events are attached on page load.
What happens when you want to attach a thickbox to an element that is generated via an ajax call?
Well you’re gonna kick yourself! You simply need to re-call the the thickbox initialise function within your ajax call, just like the example below:
$.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
tb_init(’a.thickbox, area.thickbox, input.thickbox’);
}
});
I am assuming that you already know how to make an ajax call using jQuery, so I won’t explain the above code, except for the fact that a call is made to tb_init() after the ajax response. This is the thickbox initialise function which attaches its events to your selected elements.
Easy eh? Forgive me if I’m teaching you to suck eggs!! but it took a while to click for me!
July 4th, 2008 at 9:27 am
Tnx mate, you made my day. I was just about to give up when I stumbled on you’re site. I just couldn’t get Thickbox or Lightbox to work after the content was loaded with Ajax. I tried with tb_init() but probably the wrong way.
July 4th, 2008 at 10:03 am
My pleasure mate. I like to share these sorts of things. It makes our lives easier. One thing to note on this though, which I stumbled upon recently after writing this article. If there is already content on the page that has a thickbox event attached it will create to events for that click. For example, I had forms loading into a thickbox, from links outside the ajax generated page, so when I called tb_init() again, the forms were loading in the tickbox twice. The way round this was to create a separate function which detached all thickbox events before reattaching them.
function removeThickBoxEvents() { $('.thickbox').each(function(i) { $(this).unbind('click'); }); } function bindThickBoxEvents() { removeThickBoxEvents(); tb_init('a.thickbox, area.thickbox, input.thickbox'); }Then in your ajax call just call bindThickBoxEvents
$.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 for your comments. I’m glad someone is reading my blog!!
July 12th, 2008 at 1:33 am
ah, thanks a lot. this really saved me quite a lot of time.
July 12th, 2008 at 10:07 am
Your welcome. I’m glad I could help. Thanks for visiting my site.
July 31st, 2008 at 3:06 am
The important function that should be called is in the AJAX CALL, or more precise on the success of the AJAX CALL :
tb_init(’a.thickbox, area.thickbox, input.thickbox’);
Just to help people that dont know jquery ;à)
With the YUI it would be here :
var handleSuccess = function(o) {
div.innerHTML = o.responseText;
tb_init(’a.thickbox, area.thickbox, input.thickbox’); // reload thickbox !!!!!!!
};
Thank you very much man your post helped me to find the solution.
September 19th, 2008 at 11:26 am
Yahooooo
September 23rd, 2008 at 11:22 pm
I’m happy I found this post. I thought I was going crazy on why thickbox stopped working as soon as I loaded content in via AJAX.
Thanks!
October 10th, 2008 at 5:02 pm
Wow, this is a huge help. After four days of pure hell and trying everything that I could possibly think up, I have a solution and I can start drinking again for fun!
October 16th, 2008 at 7:19 am
oooops!
Thank u so much…
October 29th, 2008 at 11:32 pm
Yeah, I just wanted to post a thank you as well. You should see this stuff in action on a site I am developing. Very good. Works like a dream!
October 30th, 2008 at 3:25 pm
No problem nahtass. Post your link when your site goes live!
and thanks to everyone else to who has commented on this post. Everytime I come across a problem I always search the internet for howto’s and guidance. This my way of giving back!!
November 11th, 2008 at 1:05 pm
Thanks, i have problems with my dinamic ajax fields and your last post help me alot. Do you know any visual effects?
November 12th, 2008 at 11:28 pm
Glad I could help Juanma!! What type of visual effects are you looking for?
December 13th, 2008 at 1:53 pm
I would like to see a bunny pulled out of a hat please.
January 4th, 2009 at 8:15 pm
Great!
This post solved my problem and your solutions was easy to apply.
Good job!!
January 15th, 2009 at 5:34 pm
Globally removing-adding events on collections will slow down your code. You can bind via tb_init(this) on ajax oncomplete event.
January 22nd, 2009 at 9:59 am
Thanks a lot man, I was going nuts xD
January 27th, 2009 at 7:23 am
tb_init(’a.thickbox, area.thickbox, input.thickbox’); i added this in my ajax (js) file still the thickbox is not showing up its opening normally in another page i would be grateful if u let me knowhow to embeed and where to embeed this please mail me soon i am in deep trouble
January 28th, 2009 at 10:34 am
Hi Pratik,
If its not showing up, and loading into another page, it either hasn’t attached the event or you may have another javascript error that is causing halt in any further javascript execution. Could you post your code here for me to take a look at>
January 31st, 2009 at 6:27 pm
Get that man a pint! hell & even packet of walkers best! 30 seconds this problem took after your headsup rather than the 30 minutes it might have! Cheers.
February 11th, 2009 at 7:49 am
thanks a lot dave for replying that day i got the solution i have forgotten to add parent before this tb_init(’a.thickbox, area.thickbox, input.thickbox’); so the problem was coming now its working fine in ajax content thanks dave
February 20th, 2009 at 3:22 pm
Wow, such a great article… i really helps me a lot….
it solves my problem. i thought i could not solve it….
THANK YOU VERY MUCH…..
March 19th, 2009 at 11:26 am
Cool it worked very fine. only Esc does not works
April 2nd, 2009 at 2:19 am
Thanks very much mate, you’re code here set off a massive lightbulb above my head.
April 13th, 2009 at 4:44 pm
[…] after much pulling of hair and one finely tuned Google search, I found this page which gives the quick and dirty clean answer to how to get Thickbox to work with an AJAX page load. […]
April 22nd, 2009 at 10:30 pm
You just saved me soo much time. If I had a hot sister I would hook you up
April 24th, 2009 at 1:29 pm
thnx.. i have googled so long
great work 
May 3rd, 2009 at 12:32 pm
[…] On problem is that any images with thickbox popup links don’t work, because the events are attached when the page loads. So they have to be reattached. I found a solution here: http://www.djcnet.co.uk/jquery-thickbox-on-ajax-generated-pages.html […]
May 3rd, 2009 at 1:03 pm
This worked neatly. I am wondering if there is another solution using live events, since those are now supported by the core of jQuery. If that’s the case, perhaps the author of Thickbox can just change the way the events are attached to using live events, so that thickbox links dynamically loaded content get their events attached.
The same goes for Gokce’s comment above: if you can call the init function for the newly added content, there’s no need to remove and reattach. (Still trying to make that work though but it sounds good.)
May 4th, 2009 at 10:45 am
Thanks for this simple workaround, it works great !
May 5th, 2009 at 1:48 am
[…] One problem is that any images with thickbox popup links that are in the ajax-retrieved part don’t work, because the javascript events are attached when the page loads. So they have to be reattached. I found a solution here: http://www.djcnet.co.uk/jquery-thickbox-on-ajax-generated-pages.html […]
May 20th, 2009 at 12:29 am
Agreed, this was a life (and time) saver! There’s always something simple to a big problem
May 27th, 2009 at 12:13 am
Thank you so much for this solution!
Rolling it in with the “Transform” jQuery plugin solved one of my lingering functionality issues in a Thickbox AJAX modal (that loads jQuery UI and JWplayer+SWFobject… whew!)
June 3rd, 2009 at 4:06 pm
Thank you for this solution. For me the problem was dynamically adding to a list of thickbox thumbnail images, and the new images would not automatically work as thickbox popups, so the reference to tb_init was just the ticket, and saved a lot of messing around. Given that I’ve already been playing with LightBox, FaceBox and others to try to get a solution that works as I want it to, that’s a good thing.
June 16th, 2009 at 5:50 pm
great help - cheers mate!
June 20th, 2009 at 8:07 pm
When I add “bindThickBoxEvents();” as last line on the ajax refresh function then it doesn’t work.
However, when I add “bindThickBoxEvents();”, to a seperate button which I click after the refresh occurred then it does work.
I wonder why I need a separate button to call the “”bindThickBoxEvents();” function to make it work?
Thanks.
June 20th, 2009 at 8:08 pm
function refresh() {
$(’#sites’).load(’lib/get_sites.cgi’);
bindThickBoxEvents();
}
This doesn’t work. I can only get this to work if I call “bindThickBoxEvents();”, from for example a button-click after the refresh occurred.
June 20th, 2009 at 8:28 pm
Solved it.. Duhh.. Have to wait till Ajax finished loading.
$(’#boxfr’).load(’lib/get_sites.cgi?site=’, function(){bindThickBoxEvents();});
June 30th, 2009 at 5:56 pm
Hey, thank you for your invaluable information…it did the trick!
July 6th, 2009 at 3:05 pm
Spot on mate, thanks - was pulling my hair out for a bit there!
August 21st, 2009 at 7:17 am
This article is fantastic.
You did more than half of my job.
Thanks and regards,
Amol A. Bhavsar.
August 27th, 2009 at 4:08 am
Hello there,
I have a same problem.
I need to use jQuery autocomplete plugin in AJAX generated content.
Can you please help me?
August 27th, 2009 at 1:07 pm
Thanks guys, can’t believe this is still of use, and how many people it has helped. I’ve been a bit lapse on writing new blog articles, I may focus in on jQuery, I write some more soon.
Amol, what problem are you having with Autocomplete?
August 29th, 2009 at 5:27 am
I have to call jQuery autocomplete plugin in ajax generated page.
It works in simple core PHP pages, but having problems in ajax generated pages.
Your help on Thichbox was so amazing that I decided to use thickbox for my whole (Current) project and also for my future projects.
Can you please reply ASAP.
This is my personal request, I have to complete the task immediately.
If possible, I request you to send replies on my Yahoo Mail ID.
Expecting cooperation from you!
Thanks and regards,
Amol A. Bhavsar.
September 3rd, 2009 at 6:50 pm
Your method also works with jquery-address. You need to add the tb_init(’a.thickbox, area.thickbox, input.thickbox’); part to the ajax part of your address.change function and it works like a dream. Vielen Dank!
September 7th, 2009 at 7:50 am
Thanks, it is working!
September 17th, 2009 at 11:06 am
i had been trying to re-bind thickbox for a while… always had problem with it… thanks for your site it’s working fine now! many thanks!
September 22nd, 2009 at 2:16 pm
Hi Dave,
Could you please mail me whole bunch of code?
I will really appreciate that and thanks for posting such a useful article.
Thanks,
Suraj
September 29th, 2009 at 9:29 pm
Thanks for saving me some time!
October 22nd, 2009 at 12:57 pm
Libertarians such as Jon Arthur, Host Of Jon Arthur Live! ,
October 23rd, 2009 at 11:53 am
Apparently I cannot tip the performers so that leaves it up to the developers to work out a payscale to bring in entertainment. ,
December 9th, 2009 at 11:53 am
great dude. i was having the issue of the popup window showing up twice. ur code fixed it. thanks.
January 26th, 2010 at 6:19 pm
Thanks Dave, it helps a lot.