Question

I’m running into a bit of an issue when I try to return a link to pull up a thickbox on my page from a simple php echo. Basically what I have is:

A page with a few include statements like:

<?php 
    include ("display_header.php");
?>

Each one of the include statements just points to a php file that pulls a short query and echos out a link with an anchor ref to open an inline thickbox (with a form) when the user clicks on the link text like:

echo "<a href='#TB_inline?height=265&width=225&inlineId=header_change' class='thickbox' style='text-decoration:none; color:#990000'>";
echo "Query Result etc";
echo "</a>";

So when the user clicks on the link on the page, a thickbox with a form is supposed to pop up. The user enters their changes to the given section, clicks submit, and jquery ajax posts the form and reloads the div with the include statement to display the changes.

This works the first time the page is loaded, but once I submit the form and try to click on the returned link again nothing happens. This seems to work if I have the link surround the div with the include statement inside (which isn’t a big deal to do), but I just don’t understand why this doesn’t work if I have the link in the included php statement.

Can anyone offer some guidance? I know there are a lot of brilliant people here and I’m probably just not understanding something very basic. Thanks!

Answer 1

You need to bind thickbox to your links using Events/live. Something like:

$("a.thickbox").live("click",function() {
    tb_init('a.thickbox');
});

That will prevent your thickbox enabled links from losing their binding to thickbox after they are reloaded or injected via ajax.

You can also do it in the callback to your $.ajax (or $.post or whatever) method, e.g.:

$.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');
                }
});