Sending additional data through Ajax

misaizdaleka

Hi all,

I have a datatable which is using ajax source:

[code]"sAjaxSource": "external/rep_processing.php", [/code]

Now, I have a div element in my html, which is supposed to pull some data from what is passed by this ajax call, and display some numbers. How to do this? How to get datatable data outside the datatable itself?

According to the forum, I should be using fnServerData ("post process the data from the server"), but I just don't know how to pull that off...

allan

Docs:
http://datatables.net/usage/callbacks#fnServerData

Examples:
http://datatables.net/examples/server_side/custom_vars.html
http://datatables.net/examples/server_side/post.html

:-)
Allan

misaizdaleka

Yes, yes, I knooow :) And I read those at least 10 times today, and still I don't know HOW to use it :(
OK, please take a look at my comment about fnCallback:
[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "my_field", "value": "my_value" } );
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback //How do I use this? And how can I call a particular JS function,
//which would exctract the data I am sending, and put it somewhere in DOM?
} );
}
[/code]


P. S. Thanks for quick response!

misaizdaleka

P. P. S.

I've been trying some things around, for example:

[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push(
{ "name": "filter_id", "value": "peraa" }
);
alert(aoData["filter_id"]); //RESULT - undefined
alert(aoData); //RESULT - [object Object],[object Object],[object Object]...
}
[/code]

Any suggestions?

GregP

I might be misunderstanding, but it sounds to me like you just need to grab some of the new data and 'copy' it into the other DIV for display. Is that correct? What's throwing me off is the post title, because you don't need to send any additional data to the server as I understand it.

I'm sure there are better ways of doing it (Allan is always showing me things that DataTables does natively) but I would use an appropriate callback (the ajax success would work fine) to trigger my own custom JS that grabs the piece of data and moves it into the desired location. It could use a function like jQuery's .clone() or .html() (a dual-purpose function that can both get and set HTML for elements).

misaizdaleka

Yes, that's exactly what I need. :)
And yes, the title turned out not to be appropriate, because the real problem is how to extract data from the ajax response, rather than sending additional data (which I managed to do somehow)...

So the problem is this "grabbing the data"... I also tried oTable.fnSettings().aoData, but I was getting undefined again...

GregP

Let me first warn you that I'm still kind of a hack. I find a technique that works, and tend to stick to it. In my case, that technique involves hooking not into the Ajax success callback, but rather the fnRowCallback or fnDrawCallback, which both have access to aData in their scopes. For example, fnRowCallback (which is part of the initialization): [edit: this code actually doesn't make total sense; I'll explain in a minute, but I'm at work and can't spend too much time on it]

[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var mySourceData = aData[2], // I want the third column of the original data set
targetElement = $('#displayDiv'); // jQuery object which is a div called 'displayDiv'

targetElement.text(mySourceData); // push it into the div as text
// *OR* (not both)
targetElement.html(''+mySourceData+''); // push it into the div as HTML with new paragraph tags
}
[/code]

[edit: the reason the code doesn't make sense is that it will update the div for every single row. Row 2 will overwrite what was put there by Row 1, etc. So the code should serve as a jumping off point for ideas, but it's not really practical.]

misaizdaleka

Great! Thanks! I think this'll do the trick!

GregP

Just wanted to post a new comment rather than edit the last one because it won't send out an email notification for an edit... the sample code actually isn't fully usable the way it's written; I just didn't realize it at the time because I was making it up on the fly. Have a close look and see if it's actually what you need.

If you do need information from each row of your table, you could set up a variable with the right scope (either global, which will offend purists, within the initialization object, or in your application's namespace) and collect your information that way. Then you would use fnDrawCallback instead to push the information from this "collector" variable into the div using a similar function.

GregP

[code]
var displayCollector = ""; // a new variable in a scope accessible to initialization object, cast as a string

// Now inside the initialization object...

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var mySourceData = aData[2]; // I want the third column of the original data set
displayCollector += ''+mySourceData+'';
},
"fnDrawCallback": function() {
$('#displayDiv').html(displayCollector);
}
[/code]

Haven't tested it, but something like this should theoretically work. You also don't really need to declare aData[2] as a variable, but I like doing that sort of thing for future-proofing. Easier to deal with mySourceData if the string you're building becomes more complex and/or the column changes.

misaizdaleka

Yes, I think I'd need fnDrawCallback to pull new data from new ajax response, but the thing is that aData is not visible from the inside of the fnDrawCallback function... fnRowCallback takes aData as an argument, so there's no problem with visibility there, but fnDrawCallback doesn't...

P. S. I have just seen your last post, will try it now, definitely makes sense!

ChrisGedrim

misaizdaleka

What version of jQuery are you using?

If you're on at least v1.5 you can pass an array of callbacks with the ajax success:

From http://api.jquery.com/jQuery.ajax/ -

"As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn"

Which means your code should look something like this:

[code]'fnServerData' : function(sSource, aoData, fnCallback ){
$.ajax({
'dataType': 'json',
'type': 'GET',
'url': sSource,
'data': aoData,
'success': [fnCallback, fnMyNewCallback]
});
}[/code]

With 'fnMyNewCallback' as:
[code]function fnMyNewCallback(json){
$('#displayDiv').text( json.mySourceData);
}[/code]

This is currently working in my code... hope it helps

Chris