fnDraw not calling the Ajax source
fnDraw not calling the Ajax source

Hello,
First of all, thanks for your plugin, it's very nice, usefull and quite easy to approach.
My bug is the following : I'm drawing a table with a delete button on each row. My delete button is binded to an Ajax call that deletes my data in database, and then I want to reload manually the data on my table.
Here's how I defined my table :
[code]
var oTable = $('#dt_groups').dataTable({
'bServerside': true,
'sAjaxSource': 'my_page?group='+group,
'sAjaxDataProp': "",
'aoColumns':[
{
'mData':'column_1',
'sWidth': '20%',
},{
'mData':'column_2',
'sWidth': '50%',
},{
'mData':'column_3',
'sWidth': '10%',
},{
'mData':'column_4',
'sWidth': '10%',
},{
'mData': null,
'mRender':function(row, type, full) {
return '';
},
'sWidth': '5%',
},{
'mData': null,
'mRender':function(row, type, full) {
return '';
},
'sWidth': '5%',
}
],
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
'iDisplayLength':25,
'fnCreatedRow': function(nRow, aData, iDataIndex) {
$(nRow).attr('data-lineid', aData['id']);
$(nRow).attr('id', 'groups');
$(nRow).attr('data-groupid', aData['id_group']);
},
});
[/code]
And here's my Ajax call to delete the row :
[code]
$('#delete_group').live('click', function() {
var id_group = $(this).closest('tr').attr('data-groupid');
$.ajax({
type: 'POST',
url: 'my_page.php',
data: 'method=delete&id_group='+id_group,
success:function(data) {
$('#dt_groups').dataTable()._fnDraw();
}
});
});
[/code]
The thing is, that the fnDraw function doesn't actually reload the data, and in the FF's console, I can' t see any GET call to my Ajax datasource.
I tried with _fnAjaxUpdate() instead of _fnDraw() and there I can see my ajax call, but then I have this js error :
[code]TypeError: aData is undefined[/code]
I guess it has something to do with [code]'sAjaxDataProp': ""[/code] defined in my dataTable but I'm not that sure.
Any clue ?
First of all, thanks for your plugin, it's very nice, usefull and quite easy to approach.
My bug is the following : I'm drawing a table with a delete button on each row. My delete button is binded to an Ajax call that deletes my data in database, and then I want to reload manually the data on my table.
Here's how I defined my table :
[code]
var oTable = $('#dt_groups').dataTable({
'bServerside': true,
'sAjaxSource': 'my_page?group='+group,
'sAjaxDataProp': "",
'aoColumns':[
{
'mData':'column_1',
'sWidth': '20%',
},{
'mData':'column_2',
'sWidth': '50%',
},{
'mData':'column_3',
'sWidth': '10%',
},{
'mData':'column_4',
'sWidth': '10%',
},{
'mData': null,
'mRender':function(row, type, full) {
return '';
},
'sWidth': '5%',
},{
'mData': null,
'mRender':function(row, type, full) {
return '';
},
'sWidth': '5%',
}
],
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
'iDisplayLength':25,
'fnCreatedRow': function(nRow, aData, iDataIndex) {
$(nRow).attr('data-lineid', aData['id']);
$(nRow).attr('id', 'groups');
$(nRow).attr('data-groupid', aData['id_group']);
},
});
[/code]
And here's my Ajax call to delete the row :
[code]
$('#delete_group').live('click', function() {
var id_group = $(this).closest('tr').attr('data-groupid');
$.ajax({
type: 'POST',
url: 'my_page.php',
data: 'method=delete&id_group='+id_group,
success:function(data) {
$('#dt_groups').dataTable()._fnDraw();
}
});
});
[/code]
The thing is, that the fnDraw function doesn't actually reload the data, and in the FF's console, I can' t see any GET call to my Ajax datasource.
I tried with _fnAjaxUpdate() instead of _fnDraw() and there I can see my ajax call, but then I have this js error :
[code]TypeError: aData is undefined[/code]
I guess it has something to do with [code]'sAjaxDataProp': ""[/code] defined in my dataTable but I'm not that sure.
Any clue ?
This discussion has been closed.