Adding Thickbox to dynamically generated links in DOM
From the day I started working as a web developer, jQuery has fascinated me. As a newbie to web development, I prefer writing plain javascript code at the moment(just to know the language better), but just couldn’t resist trying out the jQuery-AJAX APIs. Okay, Let me get back! I’m working on a new feature for HeyMath! in which I used Thickbox, a popular and beautiful jQuery plugin, in a couple of pages. The page has a table with one particular column containing thickbox links (<a class=”thickbox”>…</a>) There is a javascript function repaintTable(Object, tableid) which repaints the rows of the table(deletes the existing rows and inserts new rows based on data in the Object). This function takes care of applying the thickbox class to the links which appear in the table. When the page loads, a JSONObject which comes from the server by default, is passed on to this function. At this point, the links open happily in thickbox. There are some other links in the page each of which gets a new JSONObject from the server through AJAX , when clicked. On success of every such AJAX call, repaintTable function is called with the new object(obtained as response) and the same table as arguments. After the first AJAX call, the links stop opening in thickbox. Thankfully what is happening behind the scene is so simple. When the document is ready(page is loaded), all links with thickbox class(input,image map elements also) are selected and each of them is binded with a function on click event. I realised that this was not happening for the newly created links in the DOM. To do the same, I added a line of script tb_init(‘a.thickbox’) at the end of the repaintTable function. Now the links with thickbox class do open in thickbox, after AJAX calls 
This can be handy whenever a small number of thickbox links are generated dynamically. And here is an interesting tutorial about using jQuery to manipulate and filter data in a table. There are so many ways to make the table dynamic. I hope to use this also!
Nice piece of info !
Dear Friends,
I hope you are doing well. I have launched a web site http://www.codegain.com and it is basically aimed C#,JAVA,VB.NET,ASP.NET,AJAX,Sql Server,Oracle,WPF,WCF and etc resources, programming help, articles, code snippet, video demonstrations and problems solving support. I would like to invite you as an author and a supporter. Looking forward to hearing from you and hope you will join with us soon.
Please forward this email to all of your friends who are related IT. Send to us your feed about site also.
Thank you
RRaveen
Founder CodeGain.com
i have started doing some web 2.0 stuff myself. I started with using YUI. Like it. Did you try out the google javascript loader api? I think it is cool.
Hello,
I am trying to follow you example with no luck. I have created a very simple example and cannot get the thickbox to display. Here is my function:
function GetReports() {
$.ajax({
type: “GET”,
url: “ReportService.ashx”,
success: function(html) {
document.getElementById(‘reportResults’).innerHTML = html; }
});
tb_init(‘a.thickbox’);
}
Everything is returned and there are no errors, BUT the thickbox does not open only a redirect through the href of the returned anchor link. Do you see anything I am doing wrong.
Thanks for your time.
John
Hi John,
Your example is not very clear in the sense, what is the html element(tag) that has id=”reportResults”? Is it an anchor tag? Does it have class=”thickbox” applied to it?
In my example, I was dynamically creating new anchor tags after the ajax call. Are you looking for something similar? If you can post the code of the anchor tags which you want to open in thickbox, I think I can help.
Thanks, Nice Info.
Some truly great content on this web site , thanks for contribution.