Stuck on fnReloadAjax()

saintfalcon

Hi,
I have 2 dataTables (A & B) on a page. Each have sort action, which when pressed will update DB and redraw datatable accordingly from query result (using fnReloadAjax()).
dataTable A have details that opens in dataTable B (also using fnReloadAjax())

All works well........ but when I want to sort dataTable B, it just stuck. stuck on "Processing" message, but the code is respectively the same with dataTable A -- but the sql updated successfully and the page used for reload dataTable B is the same as when clicking from dataTable A.

Please help, thanks in advance.

[code]
var ite_id = <?php echo $item->id?>;
var spg_id = <?php echo $specDetail->id?>;

$(document).ready(function() {
$('#specGroup').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bProcessing": true,
"bAutoWidth": false,
"bServerSide": true,
"sAjaxSource": "<?php echo base_url() ?>index.php/product/ajaxItemSpecGroup/<?php echo $item->id ?>",
"aoColumns":[
{
"mDataProp": "id",
"bVisible": false
},
{"mDataProp": "sort"},
{
"mDataProp": "name",
"fnRender": function(oObj) {
return ""+oObj.aData["name"]+"";
}
},
{
"mDataProp": "action",
"fnRender": function(oObj) {
retVal = "";
retVal += "";
retVal += "";
return retVal;
}
}
]
});
$('#specDetail').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bProcessing": true,
"bAutoWidth": false,
"bServerSide": true,
"sAjaxSource": "<?php echo base_url() ?>index.php/product/ajaxItemSpecDetail/<?php echo $specDetail->id ?>",
"aoColumns":[
{
"mDataProp": "id",
"bVisible": false
},
{"mDataProp": "sort"},
{"mDataProp": "field1"},
{"mDataProp": "field2"},
{"mDataProp": "field3"},
{
"mDataProp": "action",
"fnRender": function(oObj) {
retVal = "";
retVal += "";
retVal += "";
return retVal;
}
}
]
});
});

function sortUp(id) {
$.post(
"<?php echo base_url()?>index.php/product/ajaxSortGroup/"+ite_id+"/up/"+id,
null,
function() {
$('#specGroup').dataTable().fnReloadAjax();
}
);
}

function sortDown(id) {
$.post(
"<?php echo base_url()?>index.php/product/ajaxSortGroup/"+ite_id+"/down/"+id,
null,
function() {
$('#specGroup').dataTable().fnReloadAjax();
}
);
}

function loadDetail(id) {
this.spg_id = id;
$('#headDetail').html($('#group'+spg_id).html()+" Specification");
$('#specDetail').dataTable().fnReloadAjax("<?php echo base_url() ?>index.php/product/ajaxItemSpecDetail/"+spg_id);
}

function sortDetailUp(id) {
$.post(
"<?php echo base_url()?>index.php/product/ajaxSortDetail/up/"+id,
null,
function() {
$('#specDetail').dataTable().fnReloadAjax("<?php echo base_url() ?>index.php/product/ajaxItemSpecDetail/"+this.spg_id);
}
);
}

function sortDetailDown(id) {
$.post(
"<?php echo base_url()?>index.php/product/ajaxSortDetail/down/"+id,
null,
function() {
$('#specDetail').dataTable().fnReloadAjax("<?php echo base_url() ?>index.php/product/ajaxItemSpecDetail/"+this.spg_id);
}
);
}
[/code]

and this is my html version

[code]
<?php echo $item->name ?> Specification



Id
Sort
Name
Action








<?php echo ($specDetail ? $specDetail->name : "") ?> Details



Id
Sort
Field1
Field2
Field3
Action







[/code]