Calling colorbox() for links in ajax-loaded content in tabs()

Question

I am using jQuery UI tabs() to load ajax content into the page. some of this content has links to modal windows that should be opening via colorbox() but i cant get them to launch properly.

Can someone give me some directions? Do i need to include the colorbox library in the content loaded via ajax? I assume it should suffice that its in the parent page, and i just call colorbox again after the content has loaded, but i casnt get it to work.

This is what i have (which does nothing)...:

$( "#tabs" ).tabs().bind('tabsload',function(event, ui){
    //alert('The tab is loaded. What now?');
    $("#tabs .iframe").colorbox({iframe:true, width:"65%", height:"80%"});
});

Answer 1

Your code looks fine to me so far. I've thrown together a simple fiddle that demonstrates this functionality. I used the activate event instead of load, because the latter wasn't working (although that may be because I wasn't loading my tabs via AJAX). Either way, activate should work for you, too:

$("#tabs").tabs({
    activate: function (event, ui) {
        $("#tabs .colorbox").colorbox({iframe:true, width:"65%", height:"80%"});
    }
});

Fiddle: http://jsfiddle.net/g27szcop/1/

You shouldn't need to include the colorbox library in the AJAX content, unless you're doing something weird like creating an iFrame inside each tab and then loading the content into that. If you are able to post more of your code, I can update my fiddle with additional advice.