The following is a jQuery example of how to get links inside the tab bar for loading inside that bar.
$(function(){
$('#example').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
});
However, the line $(ui.panel).load(this.href);will not trigger the tab load event, so after loading one link the rest will be fine
the reason I'm asking is because I have a built-in accordion inside my tabs and I want to paginate it using pagination on the server, but when I use page links, it will not redo the accordion.
I need something like this
$(function(){
$('#example').tabs({
load: function(event, ui) {
$(".products", ui.panel).accordion();
$(".product_link", ui.panel).colorbox();
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
});
It looks like me almost there, however $(ui.panel).load(this.href)it only loads it into the first panel no matter what tab I am on
$(function(){
$('#example').tabs({
load: function(event, ui) {
$(".products", ui.panel).accordion();
$(".product_link", ui.panel).colorbox();
$('a', ui.panel).live('click',function() {
$(ui.panel).load(this.href,function(){
$(".products").accordion();
$(".product_link").colorbox();
});
return false;
});
}
});
})
any ideas?