bootstrap-tabs + ajax

advania

So I have boostrap-tabs and each tab has ajax populated table with editor enabled.

The page loads fine, and everything works.. only bugging thing is that using my approach (code hacked together from various sources with limited knowledge of JS) any hidden tabs also loads their ajax query.. possibly leaving a lot of redundant data for the client-side.

My tabs control
` $('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
      var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

/* $("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
});*/`

The 'per tab' tables:

`
editor_vrfs = new $.fn.dataTable.Editor( {
ajax: "backend_editor_vrfs.php",
table: "#mvp_editor_vrfs",
fields:
[
{ label: "Description:", name: "Description" },
{ label: "VRF:", name: "VRF" },
{ label: "Customer_ID:", name: "Customer_ID" },
{ label: "VRF_ID:", name: "VRF_ID" },
{ label: "Config_by:", name: "Config_by" },
{ label: "Date:", name: "Date", type: "datetime" },
{ label: "Additional_info:", name: "Additional_info" }
]
} );

var mvp_vrfs = $('#mvp_editor_vrfs').DataTable( {
    sDom: '<"#top-background" <"#top-left"f>B<"#top-center"><"#top-right"> <"clear"> ><"#middle"t><"#bottom-background" <"#bottom-right"p><"#bottom-left"l><"#bottom-center"i> <"clear">>',
    ajax: "backend_editor_vrfs.php",
    buttons:
    [
        { extend: "create", editor: editor_vrfs, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-plus\"></i> Create" },
        { extend: "edit", editor: editor_vrfs, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-pencil\"></i> Edit" },
        { extend: "remove", editor: editor_vrfs, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-trash\"></i> Delete" }
    ],
    columns:
    [
        { data: "Description" }, { data: "VRF" }, { data: "Customer_ID" }, { data: "VRF_ID" }, { data: "Config_by" }, { data: "Date" }, { data: "Additional_info" }
    ]
} );

$('#mvp_editor_vrfs').on( 'dblclick', 'tbody td', function (e) {
    editor_vrfs.inline( mvp_vrfs.cell(this).index(), { buttons: { label: '&gt;', fn: function () { this.submit(); } } } );
} );

`

This all loads with "$(document).ready(function() {" .

Any assistance in how I can get the ajax query to run only when tab is active would be much appreciated.

advania

Ouch.. the 'code quotes' aren't working as I intended here.. and can't edit the post anymore..

crwdzr

if I'm interpreting this correctly, this is what I do for statistics modals that hardly ever need to be loaded or pages with 2+ tables.

in your function that runs on page load, instead of initializing your tables right away, add listeners for when you click on the tabs. Have those initialize the datatables instead, then they'll only load if you ever click that tab.

for example,

$(function(){
    var table1, table2, table3
    $('#tab2').click(function(){
        table2 = $('#table2').DataTable({. . .})
    })
})

if you do this, make sure to check that the table isn't already intialized because someone clicked on the tab, or you'll get an error like "cannot reinitialize table".

advania

Yeah, i did something like this.. I'm sharing the result in a separate thread.