Sending additional data through Ajax
Sending additional data through Ajax
misaizdaleka
Posts: 6Questions: 0Answers: 0
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...
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...
This discussion has been closed.
Replies
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
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!
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?
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).
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...
[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.]
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.
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.
P. S. I have just seen your last post, will try it now, definitely makes sense!
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