Hi,
Thickbox is a very nice javascript library based on jQuery (which is also a very neat library). It is used to show images and documents in a sort of popup like Lightbox does.
Let me sketch the problem:
1) I load my page (also loading thickbox.js)
2) I change my content in one dom-element, for example a div element, through Ajax.
3) Then I want to call thickbox on an element in the new div.
You will that see nothing happens, because Thickbox hasn’t been able to register this object.
So basically we need to reinitialize Thickbox.
Notice that you should download “thickbox.js” and not “thickbox-compressed.js” for this feature.
In thickbox.js there is a function tb_init(). This is called when the script is being loaded to add the click-events to the elements which have “thickbox” as class.
Recalling this function alone is not enough! Because in some cases elements will have two or more same click-events. It is better to remove the click-events first.
Add this to your thickbox.js:
1 2 3 4 | function tb_reinit(domChunk) { $(domChunk).unbind("click"); tb_init(domChunk); } |
And call this function whenever you load new content through Ajax which can possibly contain new Thickbox elements.
tb_reinit('a.thickbox, area.thickbox, input.thickbox');
Last but not least: Be careful when upgrading to a new version of thickbox, This was written for Thickbox version 3.1 .
And that’s it!
Hope this was useful.
Thanks for posting this solution, I had the same problem.
Justin
1 Apr 09 at 21:01
Hey, thanks for your comment!
Just for debugging: Have you tried to load all your content in one time? Does it work when you do that?
Where is your new content placed? Are you sure you call tb_reinit() when the content is actually loaded? You should put the code in the callback function, it should not be called at the exact same time when you start loading your ajax content.
If you tried this, you can mail me your code (or a piece of it) and I’ll take a look if you want. (Use the contact form)
Thanks for visiting us at Ninetynine.be!
ruben
2 Apr 09 at 12:11
hey all,
I am having similar issues. The deal is… I can confirm the unbind happens, but the the tb_init only affects elements that were previously existing. the new content is not affected.
I am certain that the code is being called because of alert statements, and when I unbind without the tb_init, the previous elements are not longer bound.
thoughts?
meeka
2 Apr 09 at 11:22
Thank you so much for the solution. Saved me a lot of headache
Misbah
13 Apr 09 at 18:13
Hi ruben, thanks for your post. It helped me a lot! I couldn’t make it work it by myself. I had to put it on the response function, after the upgrade procedure.
Greetings from Argentina!
Matias
27 Apr 09 at 22:06
Thank you very, very much for this post. I was about to completely redesign the way I was doing my form.
David
4 May 09 at 23:13
Been working on this for a while. Thanks!
mike F
1 Oct 09 at 04:43
Hey man!
Thx for this amazing info…i’ve been testing lightboxes since forever for my website, but could not make any of the to work on an ajax loaded page…pfyuy…not even Shadowbox, which has a really great integration…
IMPORTANT:::
For those who have the ajax call made in a separate js file, u have to call the tb_reinit() function in the ajax success, after the data was sent to the page…
Cheers
:D:D
Balazs
7 Nov 09 at 17:17
Haven’t tried it yet but this looks exactly like what I need. I have ajax generated links that appear on the page that use thickbox, thanks for posting this!
AP
9 Feb 10 at 04:53
Exactly what I need. Now I can getaway the duplication of linking the same thickbox.js to the AJAX loaded HTML.
Big thanks for your help on this tutorial.
Andrew Abogado
28 Mar 11 at 19:35