fnAddTr Add Row from Ajax Data

wdollar

I'm attempting to retrieve a response from the server via Ajax on success on add a row using the function fnAddTr to the table without refreshing the page, of course. The data being passed back looks like:

[code]Delete Me2012-07-13 15:02:00NowhereEdit Event[/code]

Here's the jQuery:

[code]
var oTable = $('.eventTbl').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[ 1, "asc" ]]
});

$('#submit').click(function() {
$('#addEvent').slideUp();
$.post(
'ajax/event.add.php',
$('#event').serialize(),
function(data) {
$('#systemMessage').empty().append('Your upcoming event has been added!').fadeIn().delay(4000).fadeOut(function() {
$('#add').slideDown();
$(oTable).fnAddTr(data);
alert('Success!');
});
}
);
return false;
});
[/code]

Note the alert after the .fnAddTr. The alert is not popping up meaning the script is dying at .fnAddTr.

Thanks in advance!

wdollar

After reading through some other discussions, I was finally able to get it working.

Two issues with the above code:

1: Incorrect syntax at line 15.
2: Passing fnAddTr a string rather than node at line 15.

Correct these two issues as follows:
(note: I omitted where I setup var oTable from source below)

[code]
$('#submit').click(function() {
$('#addEvent').slideUp();
$.post(
'ajax/event.add.php',
$('#event').serialize(),
function(data) {
var row = data;
oTable.fnAddTr($(row)[0]);
$('#systemMessage').empty().append('Your upcoming event has been added!').fadeIn().delay(4000).fadeOut(function() {
$('#add').slideDown();
});
}
);
return false;
});
[/code]