Undefined key for sending additional data to server

learner91

Hi,

I'm trying to send additional data to server to return my json data.

[code]
$('#submit').click(function(){
var from = $('#from').val();
var to = $('#to').val();
var loadURL = 'queryAJAX.php';

oTable = $('#specificDateTable').dataTable({
"bProcessing": true,
"sAjaxSource": loadURL,
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push(
{"key":"from_date","value":from},
{"key":"to_date","value":to}
);

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

When I check with firebug, I noticed that the value is sent, but the key show undefined
[code]
undefined 2011-07-05
undefined 2011-08-09
[/code]

Could you help me where did I go wrong?

Thanks

Regards,

allan

You need to use "name" rather than "key", as required by jQuery and shown here: http://datatables.net/release-datatables/examples/server_side/custom_vars.html

Allan

learner91

Thank you so much for your help, i can send the data to server now.

My problem now is

[code]$('#submit').click(function(){

var from = $('#from').val();
var to = $('#to').val();
var loadURL = 'queryAJAX.php';

if(typeof oTable == 'undefined'){
oTable = $('#specificDateTable').dataTable({
"bProcessing": true,
"bRetrieve": true,
"sAjaxSource": loadURL,
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push(
{"name":"from","value":from},
{"name":"to","value":to}
);

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
}else{
//Reload the table with new data

}
});[/code]

I'm thinking of using fnReloadAjax to reload the table, my question is within the code of fnReloadAjax
[code]oSettings.fnServerData( oSettings.sAjaxSource, [], function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );

/* Got the data - add it to the table */
for ( var i=0 ; i

fbas

if you use fnDraw() it will requery your server side and will use all the aoData parameters you specify.

Move your 'from' and 'to' code into the fnServerData so that it grabs the current value each time this server call is made.
[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push(
{"name":"from","value":$('#from').val()},
{"name":"to","value":$('#to').val()}
);
[/code]

[code]
// make sure your oTable variable is defined globally or otherwise some way you can retrieve it rather than just defining it within your event handler
var oTable;


$(document).ready(function() { // initialize the oTable as soon as the DOM is ready

oTable = $('#specificDateTable').dataTable({
// ...
});


$('#submit').click(function(){ oTable.fnDraw() }); // or simply $('#submit').click(oTable.fnDraw);
});

[/code]

learner91

Thank you fbas!

My table needs data from click submit button to be displayed at the 1st time.

From your suggestion, I change the order of the code

[code]
var oTable;

$(document).ready(function() {

$('#submit').click(function(){
if(typeof oTable == 'undefined'){
var loadURL = 'queryAJAX.php';

oTable = $('#specificDateTable').dataTable({
"bProcessing": true,
"bRetrieve": true,
"sAjaxSource": loadURL,
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push(
{"name":"from","value":$('#from').val()},
{"name":"to","value":$('#to').val()}
);

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
}else{
alert("Test");
oTable.fnDraw();
}


});
});
[/code]

When the submit button is clicked, browser alerts "test", but I see no data being sent from Firebug, can you help me with this?

Thank you so much!

Best Regards,

Gerard.

fbas

Can you post a link to your page?

Or view the debugger under XHR. You can view the headers, response, JSON, etc. to see what's up
http://i.imgur.com/VnNXs.png (screen capture of FireBug)

allan

It would be worth adding in an alert or console.log just before your $.ajax call to see what value $('#from').val() and its friend are.

Allan

learner91

Thank you allan and fbas!

I'm currently doing the code in localhost.

I did try to alert and log the value of 'from' and 'to' to the console, all are displayed
[code] alert($('#from').val());
alert($('#to').val());
console.log($('#from').val());
console.log($('#to').val());[/code]

http://i179.photobucket.com/albums/w293/blackstorm_9x/log-1.jpg

Like I said, the table did display for the 1st round, from 2nd round, there is no data sent to the server

Thank you for helping me!

Gerard.

allan

Erm - what second time? You aren't reloading the Ajax data in that code, nor are you using server-side processing? It's just a one shot Ajax pull of all the data required - so a second Ajax request isn't needed. fnDraw in this case just redraws that table - it doesn't get new data (for that you would want the fnReloadAjax plug-in).

Allan

learner91

I can reload my data with fnReloadAjax now.

Thank you so much!

Best Regards,

Gerard.