Question

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

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.