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!
People Say