fnDestroy() destrroys contents of my Div elements also

dsh

Hi,

I am trying to work on 2 datatables. when row of the first table is clicked, the 2nd table contents must be refreshed.
I am using Ajax call.
Everything works fine, the first time.
But the second time, when i change the row selection, the ajax call to get second table does not happen.

I tried to use fnDestroy() , this works, but it misplaces all other elements in the div tag.

Need help to sort this issue.

Here is my code:

[code]


$("#downloadCounts").hide()

var cdrTable;
var runDownLoadTable;


var cdrTableRowData;
var runDownLoadTableRowData;


///jquery functions for CDR Table
cdrTable = $("#cdrTableId").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"iDisplayLength":8
});
//on single row select
$('#cdrTableId tbody tr').live('click', function (event) {
$(cdrTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
cdrTableRowData = cdrTable.fnGetData(this); // get datarow

});
//showDownloadForRunId on button click
$("#showDownloadForRunId").click(function(){
alert("show DownLoads for Run Id ");
if (null != cdrTableRowData) // null if we clicked on title row {
{
//alert("aData[0] is: " + aData[0] + " "+"aData[3] is: " + aData[3] );
$('#runDownLoadTableId').dataTable().fnDestroy();

getDownloadCounts(cdrTableRowData[0], cdrTableRowData[10]);
$("#downloadCounts").show();
}else{
alert("Please seclect a Run Id");
}
});

// function ajax call to get the information from Run DownLoad Table
function getDownloadCounts(runid, recipienttype){
alert("In method");
alert(runid);
alert(recipienttype);

runDownLoadTable= $('#runDownLoadTableId').dataTable( {
"bRetrieve": true,
"bDestroy": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"iDisplayLength": 5,
"sAjaxSource": "/TEWeb/getDownloadCounts.htm",
"fnServerData": function ( sSource, aoData, fnCallback ) {
////alert(sSource);
//alert(aoData);
//alert(fnCallback);
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": {"runId": runid, "recipientType":recipienttype},
"success": fnCallback
} );
}
} );
//alert("get download counts done.");
//$('#runDownLoadTableId').dataTable();
}

} );









CareAlerts Runs
<!-- Some input, p, div, whatever -->





Run Id
Client Id
Client Name
Recipient Type
Actual Run Date
Status
Number Of Alerts
Number of Recipients
Locked By Process
Process Identifier
Recipient Type Id






































Dnload Run Id
DnLoad Status Id
DnLoad Start Dt
DnLoad End Dt
Exp Summ. Dnload Cnt
Exp Detail Dnload Cnt
Actual Summ. Dnload Cnt
Actual Detail Dnload Cnt
Req Create Status Id
Req Create Status Dt
Op approved Req Start
Op approved Workflow Start
locked By
locked Time
Create Dt















[/code]

dsh

Hi,

Does anybody know what this isuue could be? I have my table in the div element. Initial display it looks right, but when it is destroyed and created again using ajax, it settings get changed. Its width is more than its oringinal size, does not fit into the div elemnet and other elements in the div are misplaced.

Above is my entire code