Jquery Ajax response Using ThickBox

Question

So I have a ajax call to a service(using JQuery) that returns valid html:

<table class='datagrid' style='width: 600px; text-align:left'>
<tr><th>User</th><th>Full Name</th><th>Company</th><th>New Prints</th><th>Reprints</th></tr><tr>
<td>
<a class='thickbox' href='UserSessionReportPopup.aspx?user=1&start=9/2/2009&end=9/30/2009&TB_iframe=true&height=450&width=700'>carbon</a>

</td><td>Carbon County</td>
<td></td>
<td>5</td>
<td>4</td>
</tr>
</table>

This return html gets assigned correctly and displays on the page, BUT when I click the "a" tag a new page is opened instead of a "ThickBox" with the iFrame content.

Here's the confusing part if I copy this code into the page and then run it in the browser it acts the correct way (displaying the thickbox item)

Why won't the AJAX response display the ThickBox item correctly?

My guess is that the class='thickbox' in the response text is not finding the javascript that knows how to parse that item.

Answer 1

I think the problem is, that this <a class='thickbox' just does not have the event bound to it.

I have had exactly the same problems, when i copied existing dom elements which contained links and all bound events stopped working on those newly created elements. all i had to do was to bind events to those elements too.

So just do your thickbox call to this new element too. Do not just use the same code you use at $(document).ready. When i did something like that the events started working on new elements, but fired twice on old elements.

Edit in response of the comment: I have no idea how thickbox works. I've always preferred Slimbox. I did find some example that could help you. REad this(its about thickbox):http://15daysofjquery.com/jquery-lightbox/19/

Basically, when page is beeing loaded, this function fires:

function TB_init(){

    $("a.thickbox").click(function(){

    var t = this.title || this.innerHTML || this.href;

    TB_show(t,this.href);

    this.blur();

    return false;

    });

now all a tags with class thickbox will open the stuff link points to in thickbox window. If new a elements are added to the page, they do not have this event bound to them, so after doing the ajax magic and pulling that new content out of somewhere, you need to bind that $("a.thickbox").click(function(){ to the new link to. so just add something like

$(newlinkselector).click(function{ etc.. etc.. 

in the script, right after the place you render the stuff that ajax call gives back to you.

Answer 2

You can also put following script within ajax response :

<script type="text/javascript">
    self.parent.tb_init('a.thickbox, area.thickbox, input.thickbox');
</script>

It will initialize thick box for each time when ajax response come up.

Answer 3

I had the same problem. The quick answer - add the following line after you populate the innerHTML: tb_init('a.thickbox'); // Initialise again

This re-initializes the event handler for the anchor tag. Worked like a charm for me...

Answer 4

Replace tb_init() with following:

   function tb_init(domChunk){
    $(domChunk).live("click", function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);
    this.blur();
    return false;
    });
}

This binds the click event with a jQuery method live that considers dynamically generated content.