Prevent tab caching jquery-ui

Question

I have a set of tabs done using jquery-ui. I do not want the caching of tab contents. So I am doing the following:

$(".leftPanel").tabs(
  {cache : false,
   ajaxOptions : {
     cache : false,
     error : function(xhr, status, index, anchor) {
               $(anchor.hash).html("Oops ... There was an error");
             }
   }
});

This works and it actually fetches the data whenever I switch the tab. The first tab has a jquery datatable . The second tab has a form with a button which creates another datatable.

Now the problem happens when the datatable generated in the second tab is empty. This datatable is generated correctly. But when I switch to tab1 there is a "Flash of Unstyled Content" from the previous values in datatable. Then an alert is displayed saying "DataTables warning (table id = 'table-2'): Requested unknown parameter '1' from the data source for row 0". Note this happens when the second table is empty. I need a fix for this problem.

Thanks in advance!

Update: Some more information: When I hide the alert, the table in tab 1 is refreshed and shows correct information. But the alert is annoying. I need the right way to get rid of it. Note it only happens when the table in the second tab is empty.

Answer 1

I discovered the problem was not being caused by tab caching. I was invoking the method on all objects having a particular class whereas I should be doing it on an element having a specific id.