The jQuery AJAX table for the page, but now the overlays for color boxes no longer work

Question

I am using AJAX to dynamically refresh a page using a data table.

When the table has been successfully added to the page, it contains some code link for creating colorbox pop-ups.

However, after the table has been dragged onto the page, these overlays no longer work.

Any ideas? I assume that they need to be reinitialized or something else?

Answer 1

I ran into a similar problem. I'm not sure if I understood the solution 100%, but I basically got it like this:

$.get('/ajax.php?action=roomList&restriction='+limit, function(data) { $('#roomList').html(data).fadeIn(); $('.cb').colorbox({maxWidth:500,maxHeight:700}); }); 

In my links, I have a class = cb to connect to colorbox. MaxWidth and maxHeight are, because in firefox, the new colorbox that appeared was HUGE for some reason ...

If anyone has a more elegant solution, please let me know. I remember when I used thick boxing, there was a similar process for the loaded ajax content, as the new material was not around when the original page loaded.

Answer 2

Without any code, this is a little tricky to give a solid answer, but binding your colorbox function with .live() sounds like it will solve the problem.

http://api.jquery.com/live/

Attach a handler to the event for all elements matching the current selector, now or in the future .

This or you have to wait until your ajax call is successful, so this element exists and then binds your color field function;

 $('.link').ajaxSuccess(function() { $('a.gallery').colorbox(); }); 

http://api.jquery.com/jQuery.ajax/

http://api.jquery.com/ajaxSuccess/

Answer 3

I wrote a function on the main page from where the Ajax request was made, and called this function in the click attribute of the link where I want to call:

Function ImgClick (imgid) {

  $('body #txtHint').find('a.'+imgid).colorbox({rel:imgid }); 

}