how to send JSON with javascript from editor to Server?

bayeni

Showing that data in the dataTable works fine, but editing don't send the data as JSON:
I'm using stringify, but it seems not to work here:

   editor = new $.fn.dataTable.Editor( {
        ajax: { 
            dataSrc: "",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            processData: "false",
            //token for authentication
            headers: { "X-CSRF-TOKEN": token },
            data:  function ( d ) {
                return JSON.stringify(d)
        },
            create: {
                type:"POST",
                url: url
            },
            edit: {
                type: "PUT",
                url:  url+"/_id_"
            },
            remove: {
                type: "DELETE",
                url:  url+"/_id_"
            }
        },
        table: "#costcenterTable",
        idSrc: "id",
        fields: [
            { label: 'Id',  name: 'id', hidden: true },
            { label: 'Number',  name: 'number'},
            { label: 'Department',  name: 'department' },
            { label: 'Person', name: 'person' },
            { label: 'Company', name: 'companyid' }
        ],
        formOptions: { inline: { submitOnBlur: true } }
    } );

The input form after selectiong a line and pressing "edit" is ok.
But in TCP Monitor I see that it don't send JSON, it only sends it URL encoded:
action=edit&data%5B-1%5D%5Bid%5D=-1&data%5B-1%5D%5Bnumber%5D=0000%2F0001&data%5B-1%5D%5Bdepartment%5D=testDep&data%5B-1%5D%5Bperson%5D=test&data%5B-1%5D%5Bcompanyid%5D=35

In firebug I can see the following in PUT:
Parameter application/x-www-form-urlencoded
action edit
data[-1][companyid] 35
data[-1][department] testDep
data[-1][id] -1
data[-1][number] 0000/0001
data[-1][person] test
Quelle
action=edit&data%5B-1%5D%5Bid%5D=-1&data%5B-1%5D%5Bnumber%5D=0000%2F0001&data%5B-1%5D%5Bdepartment%5D
=testDep&data%5B-1%5D%5Bperson%5D=test&data%5B-1%5D%5Bcompanyid%5D=35

allan

Hi,

The issue here is that the create, edit and remove options are specified, so Editor is using those objects for your actions. i.e. the other parameters you specify are being ignored at the moment. You need to specify the options for each. It will probably be easiest to use a base object - e.g.

var ajaxBase = {
         contentType: "application/json; charset=utf-8",
         processData: "false",
         // etc
};

editor = new $.fn.dataTable.Editor( {
     ajax: {
         create: $.extend( true, {}, {
             type:"POST",
             url: url
         },
         // etc
     },

Allan

bayeni

thanks Allan, copiing the basic parameters to create, edit and delete works, it sends JSON! But I would like to understand using a variable with the basics. How knows the editor that it should use ajaxBase? This doesn't send JSON if I use it:

      var ajaxBase = {
            dataSrc: "",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            processData: "false",
            headers: { "X-CSRF-TOKEN": token },
            data:  function ( d ) {
                  return JSON.stringify(d)
            }
       };

       editor = new $.fn.dataTable.Editor( {
          ajax: {
                create: $.extend( true, {}, {
                    type:"POST",
                        url: url
                }),
                edit: $.extend( true, {}, {
                    type: "PUT",
                    url:  url+"/_id_"
                }),
                remove: $.extend( true, {}, {
                          type: "DELETE",
                          url:  url+"/_id_"
                })
           },
           ...
       } );

bayeni

and I have an addition question about the sent data. The editor sends the action and behind that the data record with the key at the beginning:

{"action":"edit","data":{"-1":{"id":"-1","number":"0000/0001","department":"testDep","person":"test"
,"companyid":"35"}}}

Can I change it/how can I change it, that it only sends the data record:

{"id":"-1","number":"0000/0001","department":"testDepartment","person"
:"test","companyid":"35"}?

I tried it with

        ...
   data:  function ( d ) {
        d.id = id,
        d.number = number,
        d.department = department,
        d.person = person,
        d.companyid = companyid
        return JSON.stringify(d)
    }

but it told be that "id" is not known (it seems to be not used from fields - name) and I'm not sure that it would result in the record without action, ...

allan

Oops! I missed using ajaxBase. The extend code should of course be:

$.extend( true, {}, ajaxBase, {

If you want to change the data format that Editor sends, then using the data function is the correct thing to do. You would probably need to use d.data.number to get the data since presumably just number (etc) will be giving a Javascript error atm.

Allan

bayeni

great!, using ajaxBase works now. For changing the data format you mean?:

   var ajaxBase = {
                     ...
        data:  function ( d ) {
             d.id = d.data.id,
             d.number = d.data.number,
             d.department = d.data.department,
             d.person = d.data.person,
             d.companyid = d.data.companyid
             return JSON.stringify(d)
        }
   };

Or misunderstood I your information? Trying with this don't change my format. It is the same if I only try it in the part of "edit".

allan

If you were to use simply:

data: function ( d ) {
  return JSON.stringify( d.data );
}

does that produce the data format you want?

Regards,
Allan

bayeni

that looks better, thanks, but at the beginning there is the additional id:
{"-1":{"id":"-1","number":"0000/0001","department":"testDep","person":"test","companyid":"35"}}

Can I cut that too, to send only the record:

{"id":"-1","number":"0000/0001","department":"testDep","person":"test","companyid":"35"
}

allan

That -1 is the row "id". If you only are going to be using single row editing then you could enable the legacyAjax option which will use the old style and that extra parameter won't be present.

Allan