Editor with custom ajax call: How?

Editor with custom ajax call: How?

danwosdanwos Posts: 7Questions: 2Answers: 0
edited April 2016 in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,353Questions: 1Answers: 10,444 Site admin

    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

  • danwosdanwos Posts: 7Questions: 2Answers: 0
    edited April 2016

    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

  • allanallan Posts: 63,353Questions: 1Answers: 10,444 Site admin
    Answer ✓

    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

  • danwosdanwos Posts: 7Questions: 2Answers: 0

    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

This discussion has been closed.