Editor with custom ajax call: How?

danwos

Dear all,

I'm trying to use the dataTable Editor to send a custom ajax request after a user has filled out the related form.
For me custom means, that the payload is freely configurable.

For instance, the following data needs to be send inside the payload of a POST request

 {"value": 12.12, "timestamp": "2015-11-20 11:35:03.540351+01:00"}

I have tried the preSubmit event with the following code:
(preSubmit doc: http://editor.datatables.net/reference/event/preSubmit)

    editor.on('preSubmit', function(event, data, action) {
        // Example 1
        data.data = {"value": 12.12, "timestamp": "2015-11-20 11:35:03.540351+01:00"}

        // Example 2 (not working)
        data = {"value": 12.12, "timestamp": "2015-11-20 11:35:03.540351+01:00"}
    } );

Example 2 does not work, data can not be overriden.

Example 1 somehow works, but in the request, the payload is as follows:

action=create&data%5Bvalue%5D=12.12&data%5Btimestamp%5D=2015-11-20+11%3A35%3A03.540351%2B01%3A00

I see the following problems there:
1. The action parameter was added automatically, but I don't need this and it is not supported by my REST API
1. My data.data got somehow escaped and my dictionary entries ("value") were translated to data[value] and data[timestamp]
(%5B = [; %5D = ])

So there is happening a lot of magic after preSubmit, which i do not need and which makes it impossible to use custom REST APIs.

Maybe I have misunderstood something or used the wrong api calls.
Please help :-)

Daniel

allan

Hi Daniel,

So the problem with using data = is that you are only assigning the local variable that way - it doesn't effect what the original variable that Editor holds points to (it isn't a pointer like in C or C++).

What you need to do is modify the object that is passed in, which is why the data.data = works.

So you'd need to do something like:

data.value = ...
data.timestamp = ...

Or:

$.extend( data, {
  value: ...,
  timestamp: ...
} );

If you want to remove the properties Editor adds to the object, you'd need to delete them - e.g. delete data.action;.

Allan

danwos

Hi Allan,

thanks for the fast response.
Now I can manipulate the values, which should be part of the payload. That's working :)

But i'm still not able to use my own string-representation.
Everything is interpreted like URL parameters (escaped data, using ? to concatenate parameters, ... )

My goal is to send a clear JSON object.
Here is an example:

    editor.on('preSubmit', function(event, data, action) {
        data.value = 12;
        data.timestamp = "2015-11-20 11:35:03.540351+01:00";
        delete data.action;
        delete data.data;  // Deletes everything, which was added by editor form
        console.log(JSON.stringify(data));

The console output would be:

{"value":12,"timestamp":"2015-11-20 11:35:03.540351+01:00"}

And exact this is the string, which needs to be send to the server (without any manipulation) :-)

Is this somehow possible?

Another approach would be to use my own ajax-call and prohibit the editor to send its own one.
Do you think is is possible?

Thanks for the help,
Daniel

allan

Hi Daniel,

Just to confirm - you want to send a JSON string in the POST request's body? That absolutely can be done, but we need to use ajax.data for that (rather than preSubmit).

Have a look at the last example on the ajax.data page - it shows exactly what you are looking for.

Regards,
Allan

danwos

Hi Allan,

you are right. I don't know how I could miss this piece of documentation.
Everything is working now. Thanks for the great support.

For everyone else reading this topic, this is my final configuration:

var editor = new $.fn.dataTable.Editor( {
    ajax:  {
        url: 'http://my-company.com/api/entry',
        contentType: 'application/json',
        data: function ( d ) {
            var ownData = {value: d.data[0]["value"], timestamp: d.data[0]["timestamp"]}

            return JSON.stringify( ownData );
        }
    },
    table: '#my-table',
    fields: [ {
            label: "Timestamp:",
            name: "timestamp"
            }, {
            label: "Value:",
            name: "value"
            }]
    } );

Daniel