fnReloadAjax() and Tabs Problem

sgombos

Hello,

I recently started using Datatables a couple of weeks ago and have gone through several revisions of displaying data onto my aspx page. I am currently using a JSON txt file to load information that is retrieved from the server onto a page that has several tabs. In each tab there is a datatable associated with it. I was originally resorting to reloading the page to refresh the tables until I started messing around with the fnReloadAjax() function. I am using Jquery Colorbox on the page as well and when I close the modal form I want to use the fnReloadAjax() function. For example if I am on tab#1 I am displaying the "cellPhoneTable" and then tab#0 contains "allDevicesTable" which isn't being displayed. When I selected a record on the "cellPhoneTable" I can edit it via colorbox and recreate the JSON file, and when colorbox closes I call the fnReloadAjax() function with the new information. The only thing wrong with this is that the record I edit on the "cellPhoneTable" isn't reloaded, but it is on the "allDevicesTable" when I switch to that tab. Although, when I view the JSON text file for the "cellPhoneTable" the record information is updated. I am using this function on several other pages in my site and it appears to be working fine when it comes to reloading the Ajax when it isn't in tabs. Below is some of my code.

[code]
$.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings, sNewSource, fnCallback, bStandingRedraw) {
if (typeof sNewSource != 'undefined' && sNewSource != null) {
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay(oSettings, true);
var that = this;
var iStart = oSettings._iDisplayStart;

oSettings.fnServerData(oSettings.sAjaxSource, [], function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable(oSettings);

/* Got the data - add it to the table */
for (var i = 0; i < json.aaData.length; i++) {
that.oApi._fnAddData(oSettings, json.aaData[i]);
}

oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw(that);

if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) {
oSettings._iDisplayStart = iStart;
that.fnDraw(false);
}

that.oApi._fnProcessingDisplay(oSettings, false);

/* Callback user function - for event handlers etc */
if (typeof fnCallback == 'function' && fnCallback != null) {
fnCallback(oSettings);
}
}, oSettings);
}

$(document).ready(function() {
oTable1 = $('#allDevicesTable').dataTable({ "oLanguage": { "sSearch": "Search Devices:" },
"iDisplayLength": 25,
"aaSorting": [[0, "asc"]],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bAutoWidth": true,
"sAjaxSource": "JSON Files/allDevicesTableJSON.txt",
"bDeferRender": true,
"aoColumnDefs": [{ "iDataSort": 2, "aTargets": [0]}],
"fnInitComplete": function() {
$(".modalForm").colorbox({ width: "600px", height: "642px", iframe: true,
onClosed: function() { oTable1.fnReloadAjax(); /*window.location.reload(true); /*parent.contentFrame.location.reload(true);*/ }
});
$(".modForm").colorbox({ width: "600px", height: "400px", iframe: true,
onClosed: function() { oTable1.fnReloadAjax(); /*window.location.reload(true); /*parent.contentFrame.location.reload(true);*/ }
});
},
"fnDrawCallback": function() {
$(".modalForm").colorbox({ width: "600px", height: "642px", iframe: true,
onClosed: function() { oTable1.fnReloadAjax(); /*window.location.reload(true); /*parent.contentFrame.location.reload(true);*/ }
});
$(".modForm").colorbox({ width: "600px", height: "400px", iframe: true,
onClosed: function() { oTable1.fnReloadAjax(); /*window.location.reload(true); /*parent.contentFrame.location.reload(true);*/ }
});
}
});
oTable2 = $('#cellPhoneTable').dataTable({ "oLanguage": { "sSearch": "Search Devices:" },
"iDisplayLength": 25,
"aaSorting": [[0, "asc"]],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"sScrollXInner": "100%",
"bAutoWidth": true,
"sAjaxSource": "JSON Files/cellPhoneTableJSON.txt",
"bDeferRender": true,
"aoColumnDefs": [{ "iDataSort": 1, "aTargets": [0]}],
"fnInitComplete": function() {
$(".modalForm").colorbox({ width: "600px", height: "642px", iframe: true,
onClosed: function() { oTable2.fnReloadAjax(); oTable1.fnReloadAjax(); /*window.location.reload(true); /*parent.contentFrame.location.reload(true);*/ }
});
$(".modForm").colorbox({ width: "600px", height: "400px", iframe: true,
onClosed: function() { oTable2.fnReloadAjax(); oTable1.fnReloadAjax(); /*window.location.reload(true); /*parent.contentFrame.location.reload(true);*/ }
});
},
"fnDrawCallback": function() {
$(".modalForm").colorbox({ width: "600px", height: "642px", iframe: true,
onClosed: function() { oTable2.fnReloadAjax(); oTable1.fnReloadAjax(); /*window.location.reload(true); /*parent.contentFrame.location.reload(true);*/ }
});
$(".modForm").colorbox({ width: "600px", height: "400px", iframe: true,
onClosed: function() { oTable2.fnReloadAjax(); oTable1.fnReloadAjax(); /*window.location.reload(true); /*parent.contentFrame.location.reload(true);*/ }
});
}
});
});
[/code]

I am not sure how to go about this issue, or if anyone has had a similar problem for that matter. Any information regarding this would be appreciated.

Thanks, Steve