converting form fields for use as aoData

jkrobbins

I'm struggling with how to collect form fields for ajax submission. The other postings I find talk about using serializeArray(), but the problem is, that function returns the fields as 'name="firstname", value="Bob"', while the aoData needs to be in the format of '"name":"firstname","value":"Bob"'.

I'm attempting to write some javascript to convert from one format to another, but maybe I'm trying to reinvent the wheel and someone else has already done this. I've never written a jQuery plugin but this looks like it's going to be my first one unless someone can point me to some existing code that accomplishes this.

fbas

the aoData is converted/serialized to a string by the $.ajax() routine. jQuery converts it to a query string. however if you pass a string as the "data" to $.ajax() it will use that string directly.

I recommend using the aoData because you want all the other params that DataTables sets.

allan

> while the aoData needs to be in the format of '"name":"firstname","value":"Bob"'.

I assume that you mean aoData in terms of what is used in fnServerData? Do you want to be submitting a full form in fnServerData, or is it a separate call? It is unfortunate that DataTables using name/value - its a hangover from the old jQuery days, when that was the way it works - but these days you can just give it an object. Come DataTables 2.0 this is what will happen in the core :-)

Allan

jkrobbins

Sorry, fbas, but I don't follow you. Allen, here's what I'm doing now.
[code]
$('#resulttable').dataTable({
'bFilter' : false,
'bSort' : false,
'bServerSide' : true,
'bProcessing': true,
'sAjaxSource' : '/mfgweb/DataTransferResults',
'bPaginate': false,
'sScrollY': '400px',
'sScrollX': '98%',
'bScrollCollapse': true,
'sDom' : 'Tirt',
'fnRowCallback' : function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
console.log(nRow, aData, iDisplayIndex, iDisplayIndexFull);
var rowID = 'row' + iDisplayIndex;
$('tr').attr('id', rowID);
return nRow;
},
'oTableTools' : {
'sSwfPath' : '/mfgweb/common/scripts/swf/copy_cvs_xls.swf',
'aButtons' : ['copy', 'xls', 'print']
},
'fnServerParams' : function(aoData) {
aoData.push(
{"name" : "optionselected", "value" : $('#optionselected').val()},
{"name" : "paraminput1", "value" : $('#paraminput1').val()},
{"name" : "paraminput2", "value" : $('#paraminput2').val()},
{"name" : "paraminput3", "value" : $('#paraminput3').val()},
{"name" : "paraminput4", "value" : $('#paraminput4').val()},
{"name" : "paraminput5", "value" : $('#paraminput5').val()},
{"name" : "daoname", "value" : $('#daoname').val()},
{"name" : "schemaname", "value" : $('#schemaname').val()},
{"name" : "viewname", "value" : $('#viewname').val()},
{"name" : "reporttitle", "value" : $('#reporttitle').val()}
//{"name" : "numcols", "value" : $('#numcols').val()}
);
},
"fnInitComplete" : function() {
$('table.datatable').show();
oTable.fnAdjustColumnSizing();
}
});
[/code]
Coding that aoData like that just won't work because this app has to work for dozens of stored procedures with the number and names of input fields unknown until run-time. I need to collect all the fields in the form and convert them into that same object format, but I can't seem to figure how to do that. Any examples you can point me to?

allan

There is an example here of how to submit form information from inside a table: http://datatables.net/release-datatables/examples/api/form.html - but note that this is different from fnServerParams which is used for modifying the request which is being sent to the server when getting the next page of data (when using server-side processing).

Perhaps you could explain a little bit about what you are trying to do?

Allan

jkrobbins

Maybe I'm taking the wrong approach by using fnServerParams instead of fnServerData. I'm not using filtering or pagination so fnSD is the better choice. I'll work on that approach today.

The app is pretty basic; the user provides some parameters that are passed to a stored procedure. The results are displayed by datatables, and tabletools provides the means to dump it all to a csv file for excel manipulation. The back-end is a java servlet that creates a DAO, passes the params, retrieves the results and sends it back to the page.

jkrobbins

Well, using fnServerData didn't work for me, but I think I'm getting closer. I've getting the form fields like this:
[code]
var fields = $('.inputfield').serializeArray();
[/code]
Then using json2.js like this:
[code]
'fnServerParams' : function(aoData) {
$.each(fields, function(){
var jsonStr = JSON.stringify(this);
aoData.push(jsonStr);
});
alert("aoData is \n" + aoData);
},
[/code]
The alert box show me that the objects have been added to aoData, unfortunately, it's still not working for some reason and firebug show this in the net panel:
[code]
_ 1318257643564
iColumns 11
iDisplayLength -1
iDisplayStart 0
mDataProp_0 0
mDataProp_1 1
mDataProp_10 10
mDataProp_2 2
mDataProp_3 3
mDataProp_4 4
mDataProp_5 5
mDataProp_6 6
mDataProp_7 7
mDataProp_8 8
mDataProp_9 9
sColumns
sEcho 1
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
undefined undefined
[/code]

Back to the drawing board.

allan

You need to add name/value pairs like this:

[code]
aoData.push( { "name": "more_data", "value": "my_value" } );
[/code]

So if you just modify your code to add name and value properties then that should do it. As you can see at the moment, you are just getting undefined because those properties don't exist on the objects you create.

Allan