fnReloadAjax issue

michaelwhite

Hi DataTables

Having a issue with fnReloadAjax where the table is not being refreshed. I have added the function "fnReloadAjax" in a seperate .js file and can debug trhough the code to see that it is actually gets to the function. But no referesh! any suggestions would be great


Here is my code

[code]
$(document).ready(function () {
$.ajax({
type: "POST",
url: "../services/users/users.asmx/getallusers",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('#divquicksearch').html('');

var data = jQuery.parseJSON(response.d);

$('#quicksearchtable').dataTable({
"bProcessing": true,
"sDom": "'<'row-fluid'<'span3'l>RCTfrtip'",
"bPaginate": true,
"sPaginationType": "full_numbers",
"aaData": data,
"oColVis": { "buttonText": "Show / Hide Columns", "bRestore": true, "sRestore": "Revert Back", "activate": "click" },
"oColReorder": { "iFixedColumns": 1 },
"aoColumns": [
{ "mData": "0", "sTitle": "Employee Code", "bSearchable": true, "bVisible": true, "sWidth": "8%", "sClass": "cls-employeeID" },
{ "mData": "1", "sTitle": "Store Number", "bSearchable": true, "bVisible": true, "sWidth": "5%" },
{ "mData": "2", "sTitle": "Name", "bSearchable": true, "bVisible": true, "sWidth": "15%" },
{ "mData": "3", "sTitle": "JobTitle", "bSearchable": true, "bVisible": true, "sWidth": "20%" },
{ "mData": "4", "sTitle": "Basic Hours", "bSearchable": true, "bVisible": true, "sWidth": "5%" },
{ "mData": null, "sTitle": "Actions", "sWidth": "20%", "sClass": "user-actions" },
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
//debugger;
$('td:eq(5)', nRow).html('');
$('td:eq(5)', nRow).attr('employeeID', aData[0]);
}
});

$.pnotify({
type: 'success',
title: 'User Load',
text: 'All Users Were Sucessfully loaded',
icon: 'picon icon16 iconic-icon-check-alt white',
opacity: 0.95,
hide: true,
history: false,
sticker: false
});
},

error: function (data) {
$.pnotify({
title: 'Error',
text: 'There was an error deleteing thi user pplease contact a member of Store Systems',
hide: false,
icon: 'picon icon16 entypo-icon-warning white',
opacity: 0.95,
history: false,
sticker: false
});
}
});

$('.user-delete').live('click', function () {

var id = $(this).attr('employeeid');
var employeename = $(this).attr('employeename');

$('#userid').append(" " + employeename + " ?");

$('#myModal').modal({ show: true });

$('#confirmDeleteUser').live('click', function () {
$.ajax({
type: "POST",
url: "../services/users/users.asmx/DeleteUser",
data: '{"EmployeeCode": "' + id + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {

//debugger;

var oTable = $('#quicksearchtable').dataTable();

// Immediately remove the first row
oTable.fnReloadAjax();

$.pnotify({
type: 'success',
title: 'User Deleted',
text: 'The user ' + employeename + ' was sucessfully deleted',
icon: 'picon icon16 iconic-icon-check-alt white',
opacity: 0.95,
hide: true,
history: false,
sticker: false
});

},
error: function () {
$.pnotify({
type: 'error',
title: 'User Deleted',
text: 'The user ' + employeename + ' was sucessfully deleted',
icon: 'picon icon16 iconic-icon-check-alt white',
opacity: 0.95,
hide: true,
history: false,
sticker: false
});
}
});
});
});
});
[/code]

allan

You haven't got an Ajax source specified for the DataTable (which you would do with sAjaxSource ). So fnReloadAjax isn't going to do anything for you. It looks like you'd wan tho use fnClearTable and fnAddData to add the data that your own Ajax call has made.

Allan

michaelwhite

thanks Allan so the fnClearTable worked fine how do I pass the data into the function fnAddData from my ajax source?

MIchael

DukeAstar

As wrote by Allan , If you really need refresh your data with an ajax source why not use sAjaxSource

I rewrote your code to do it

[code]
$(document).ready(function () {

$('#divquicksearch').html('');

$('#quicksearchtable').dataTable({
"bProcessing": true,
"sDom": "'<'row-fluid'<'span3'l>RCTfrtip'",
"sAjaxSource" : "../services/users/users.asmx/getallusers",
"bPaginate": true,
"sPaginationType": "full_numbers",
"oColVis": { "buttonText": "Show / Hide Columns", "bRestore": true, "sRestore": "Revert Back", "activate": "click" },
"oColReorder": { "iFixedColumns": 1 },
"aoColumns": [
{ "mData": "0", "sTitle": "Employee Code", "bSearchable": true, "bVisible": true, "sWidth": "8%", "sClass": "cls-employeeID" },
{ "mData": "1", "sTitle": "Store Number", "bSearchable": true, "bVisible": true, "sWidth": "5%" },
{ "mData": "2", "sTitle": "Name", "bSearchable": true, "bVisible": true, "sWidth": "15%" },
{ "mData": "3", "sTitle": "JobTitle", "bSearchable": true, "bVisible": true, "sWidth": "20%" },
{ "mData": "4", "sTitle": "Basic Hours", "bSearchable": true, "bVisible": true, "sWidth": "5%" },
{ "mData": null, "sTitle": "Actions", "sWidth": "20%", "sClass": "user-actions" },
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
//debugger;
$('td:eq(5)', nRow).html('');
$('td:eq(5)', nRow).attr('employeeID', aData[0]);
},
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"contentType": "application/json; charset=utf-8",
"dataType": "json",
"type": "POST",
"url": sSource,
"data": aoData,
"success": function(json){

var data = jQuery.parseJSON(json.d);

fnCallback(data);

$.pnotify({
type: 'success',
title: 'User Load',
text: 'All Users Were Sucessfully loaded',
icon: 'picon icon16 iconic-icon-check-alt white',
opacity: 0.95,
hide: true,
history: false,
sticker: false
});
},
"error" : function (data) {
$.pnotify({
title: 'Error',
text: 'There was an error deleteing thi user pplease contact a member of Store Systems',
hide: false,
icon: 'picon icon16 entypo-icon-warning white',
opacity: 0.95,
history: false,
sticker: false
});
}
} );
}
});


})
[/code]

With this type of code you can use fnReloadAjax without any problem

michaelwhite

Thanks for your help DukeAstar

I copied in your code and if broke on the following line 2230

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

Regards

Michael

michaelwhite

it seems as though aData is undefined. I can see the response data in function json

[code] oSettings.fnServerData.call(oSettings.oInstance, oSettings.sAjaxSource, aoData, function (json) {
var aData = (oSettings.sAjaxDataProp !== "") ?
_fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;

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

Any suggestions

regards

Michael

DukeAstar

[code] "success": function(json){
// Put breakpoint
var data = jQuery.parseJSON(json.d);

fnCallback(data);

$.pnotify({
type: 'success',
title: 'User Load',
text: 'All Users Were Sucessfully loaded',
icon: 'picon icon16 iconic-icon-check-alt white',
opacity: 0.95,
hide: true,
history: false,
sticker: false
});
},[/code]

Put a breakpoint in success function to see if you retreive your data

DukeAstar

michaelwhite

I can see the data in the json variable

which comes back with the following [["0456","0002","Natalie Allan","SALES CONSULTANT","16"]]

once parsed through

[code] var data = jQuery.parseJSON(json.d);[/code]

[code]date =[0] [0456,0002,Natalie Allan,SALES CONSULTANT,16][/code]

to me it looks fine!

michael