jquery/thickbox from content in ajax layer?

How do trigger thickbox from an ajax layer

I got this in an ajax layer

<a href="test.html?keepThis=true&TB_iframe=true&height=500&width=750" title="test" class="thickbox">test</a>

Code (markup):

but it doesn't work??

 

you have posted way out of context, need source for better help.

it's a link with a class of thickbox. chances are, you have a handler that does something like (in pseudo code)

// find all thickbox links in the document
$(".thickbox").click(function() {
    // do something here, like popup the images etc.
});

Code (markup):

if this gets initialised at page load, for example within a:

$(document).ready(function() { ... });

Code (markup):

as a result, once page is loaded, all links get processed 1 by 1 and the new click events get attached.

when you run an ajax call that brings you back the html that you posted, it is a new element that did not exist before. hence, the click events for it are not attached.

you need to attach something on the ajax success event that re-scans the document and re-attaches all the click events (in case new elements have come back in the response that you print). for example:

$.ajax({
  type: "GET",
  url: "test.php",
  success: function() {
     // call up the thickbox handler again / reinitialise the plugin
  }
});

Code (markup):

i hope this makes sense. the crappy thing about jquery is also it's best feature: plugins. but since you are probably using a plugin that does the nice looking "thickboxes", now you are stuck with it w/o understanding how it works and need to do some reverse engineering... good luck

EDIT:

read up on thickbox and saw it's source.
run this on the success function:

tb_init('a.thickbox, area.thickbox, input.thickbox'); //pass where to apply thickbox

 

@dimitar, tx for your reply. I think you put me in the right direction.

gonna post my solution here with a simple example

here's my simple example
bldd.nl/jsproblems/

trying your suggestion here
bldd.nl/jsproblems/index2.html

 

hmm, haven't found a solution yet. Anymore pointers???

 

same problem here. have been working for couple hours and found no solution.

 

ok, been awhile but tx to dimitar the thickbox part works now. But now i have an issue with sIfr, which should replace H3 tags.

function makeRequest2(url,layerName) { 
$(document).ready(function(){
//ajax
$.ajax({
	   type: "GET",
	   url: url,
		success: function(data){
			//alert( "Data display: " + data );
			$(layerName).html("<h3>Test Jquery thickbox</h3>")
			.append(data);
			tb_init('a.thickbox, area.thickbox, input.thickbox'); //re init thickbox i guess
			sIFR.replaceElement();//this doesn't work
		}
	 });
//end ajax
})
}

Code (markup):

Anyone knows how to reini the sIfr???

edit: found it by just creating a js function like

function showSifr(){
sIFR.replaceElement(named({sSelector:"body h2", ...........
sIFR.replaceElement(named({sSelector:"body h3",..........
etc....... 
}

Code (markup):

and make a callback to showSifr()

 

Hey, I know this is solved, but I still wanted to point something out for reference. I was looking for the same thing, I followed the instructions pointed out here, but still got things messed up!

The situation:

I have a Thickbox element on the page, and I load another element witj ajax, that element also needs Thickbox. But just calling tb_init() causes the first existing element to show up twice!

I found a better solution on this blog:
http://ninetynine.be/blog/2009/03/thickbox-reinitialize-thickbox-after-change-by-ajax/

This function will reinit thickbox, but will remove previous thickbox click-events.

Joey