Update dynamic table using AJAX

Boris.Tk

Hi Folks,

I already tried to find a solution for my problem using the search form - however I couldn't find any helpful for me.

I have table which is created dynamically with ajax loaded files.

[code]
function initTable(){
jQuery.ajax({
url: contentURL,
dataType: 'json',
success: function(data){ createMyTableSUTable(); },
complete: function(){
oTable = jQuery('#SUTable').dataTable({
"bInfo": true,
"bPaginate": false,
"bAutoWidth": false,
"bStateSave": true,
"sDom": '<"header"fi><"table"t><"footer">',
"aaSortingFixed": [[3,'asc']],
"aoColumns": [
null,
null,
null,
{ "bVisible": false }
]
});
}
});
updateTable();
}
[/code]

This is working pretty well. At the end I start a function to update the table.
This second function is doing a long polling and is recalling itself after update.

[code]
function updateTable(){
jQuery.ajax({
async:true,
dataType: 'json',
url: contentURL,
success: function(data){
parseData(data);
setTimeout(function () { updateTable() }, 5000);
},
error: function(data){
setTimeout(function () { updateTable() }, 5000);
}
});
}
[/code]

So far so good.

Here is the JSON data:
[code]
{'name': 'Table ABC',
'rows': [
{'id':'101', 'name':'abc123', 'value':'01234', 'hidden':'abc'},
{'id':'102', 'name':'def456', 'value':'56789', 'hidden':'def'}
]
}
[/code]

And finally here is my function to update each row

[code]
function parseData(data){
jQuery.each(data.rows, function(i, r){
var rowID = oTable.fnGetPosition( jQuery('#'+r.id) );
oTable.fnUpdate( [r.id, r.name, r.value, r.hidden], rowID, 0 );
});
}
[/code]


At the end firebug tells me this:

oSettings.aoData[iRow] is undefined
[Break on this error] oSettings.aoData[iRow]._aData[i] = sDisplay;


I have no idea what that means :)
Please, can someone pinpoint me what I'm missing here.


Thanks and regards,
Boris

Boris.Tk

I got it! Just when I thought I'm completely insane :)

Somehow I overlook the fact that my variable "rowID" was "null". Should have brought me to the idea that my fnGetPosition was not correct addressed!

Here is the code how it should look like, for those who might have two blind eyes like I do (sometimes) :)
[code]
function parseData(data){
...
var rowID = oTable.fnGetPosition( jQuery('#'+r.id)[0] );
...
}
[/code]

I saw the other post explaining how to access a TR by its ID... but wasn't patient enough.

Oh, I totally missed out to say what a wonderful plugin you worte Allan! Many thanks!


Regards,
Boris

allan

Hi Boris,

Excellent stuff - good to hear you got this sorted. And thanks for your kind words about DataTables and also your answers on some of the other threads :-)

Regards,
Allan