jQuery AJAX table to a page but now the colorbox overlays no longer work

Question

Hi,

I am using AJAX to dynamically update a page with a data table.

When the table is successfully added to the page it contains some code reference to produce colorbox overlay pop ups.

However, after the table has been pulled into the page these overlays no longer function.

Any ideas? I assume they need to be re-initialised or something?

Answer 1

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

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

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

That or you should wait until your ajax call is successful, so the element exists and then bind your color box function;

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

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

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

Answer 2

Hello, I just ran into a similar problem. I'm not sure if I 100% understand the solution but I basically got it working 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 class = cb to hook into colorbox. The maxWidth and maxHeight are there because on firefox the new colorbox that popped up was HUGE for some reason...

If anyone has a more elegant solution please let me know. I remember when I used to use thickbox there was a similar process for ajax loaded content since the new stuff wasn't around when the original page loaded.