Tabs with tables

jaozafra

I have 4 Bootstrap tabs with one table each.

the data on each table is fetched server side.

My issue is whenever the page with the tabs load, the 4 tables call their respective urls all at the same time.

is there any way to simply let the "active" table be the only one who can query for its contents?

girishmr

Just a thought - check if the 'active' class is being set correctly when the tabs are clicked. You can intervene and manually remove/add those on each click of the tab if it is not getting set.
This is what I did when I implemented parent/child tables in tabs

jaozafra

Hey man, thanks for the quick rep. Im properly adding the 'active' class already. My issue is once the page loads, all 4 tables query for their contents asap.

What i want to do is that when the page loads, only the table/s present on the active tab execute an ajax to populate its table.

girishmr

Why not execute the ajax call based on the condition on class existence. Some thing on these lines.

[code]
if( $('#tab1').hasClass('active')) {
// $.ajax()
}
[/code]

Then when the other tab(s) are selected, listen to the change event
[code]
$('#tab2').live('click'), function(e){
$.ajax();
});
[/code]