Row disappears after Editor create/update

Row disappears after Editor create/update

macateemmacateem Posts: 10Questions: 3Answers: 0

Banging my head for days on this.

I'm using the json-api spec for my API. The request and response structure is basically like this:

{
    data: {
        type: 'widgets',
        id:  5,
        attributes: {
            key: 'abc',
            name: 'Blue Widget'
        }
    }
}

DataTable works great, I can retrieve a list of widgets with this:

 vm.dataTable = $('#gridFields').dataTable({
            ajax: {
                url: ENV_CONFIG.API + '/fields',
                dataSrc: 'data',
                contentType: 'application/vnd.api+json',
                headers: {
                    'Authorization': "Bearer " + $auth.getToken(),
                    'Accept': 'application/vnd.api+json'
                }
            },
            buttons: [
                {extend: 'create', editor: editor},
                {extend: 'edit', editor: editor},
                {extend: 'remove', editor: editor}
            ],
            rowId: 'id',
            responsive: true,
            columns: [
                {data: "id", title: "ID"},
                {data: "attributes.key", title: "Key Field"},
                {data: "attributes.name", title: "Name"},
            ],
            columnDefs: [
                {
                    className: "width-20",
                    "targets": 0
                }
            ],
            select: true,
            bStateSave: true,
            pageLength: 10,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            dom: 'Bflrtip'
        });

Editor works great, but row disappears after create or edit. Here is my editor and event:

editor = new $.fn.dataTable.Editor({
            ajax: {
                create: {
                    type: 'POST',
                    contentType: 'application/vnd.api+json',
                    url: ENV_CONFIG.API + '/fields',
                    headers: {
                        'authorization': "Bearer " + $auth.getToken(),
                        'accept': 'application/vnd.api+json'
                    },
                    url: ENV_CONFIG.API + '/fields',
                    data: function (d) {
                        id = Object.keys(d.data)[0];
                        var ownData = {
                            data: {
                                type: "fields",
                                attributes: d.data[id].attributes
                            }
                        };

                        return JSON.stringify(ownData);
                    }
                },
            /*
            //  Other methods omitted for readability
            */
            },
            table: '#gridFields',
            idSrc: 'id',
            fields: [
                {label: 'Field No', name: 'attributes.key'},
                {label: 'Field Name', name: 'attributes.name'},
            ]
        });
        editor.on('postSubmit', function (e, json, data, action) {
            if (action !== 'remove') {
                newJson = {};
                newJson.data = [{id: json.data.id, attributes: json.data.attributes}];
                json = newJson;
            }
        });

I'm at a loss. I'm pretty sure it's a mismatch in the structure but not sure. I don't think I have to have DT_RowId (I'm using "id"). I have read the server response spec, but I'm altering it to fit the DT column data.

Any ideas?

Replies

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Editor expects the data being returned from the server to look like this - i.e. it should have a data property which is an array of the rows that were created / edited.

    If the row's data isn't present, then it will be removed. That I suspect is what is happening.

    I see you've got postSubmit to try and workaround that, but the problem is json = newJson only assigns the new json data in the variable json locally (Javascript doesn't work like pointers in C)! You need to modify the original object that is passed in as json.

    Allan

  • macateemmacateem Posts: 10Questions: 3Answers: 0

    I got it figured out. Thanks.

  • XpenseOneXpenseOne Posts: 1Questions: 0Answers: 0

    @macateem what was the problem?

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Likely the JSON return from the server not being in the expected format. If you are having the same issue, can you show us the response from the server you are getting please?

    Allan

  • shatrughanshatrughan Posts: 85Questions: 15Answers: 0

    @macateem Please help me...I have also come across the same problem of row disappearing after being created/updated. What was the solution to get rid of it ?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @shatrughan ,

    It would be worth posting the server response, as Allan asked for in the previous comment,

    Cheers,

    Colin

  • shatrughanshatrughan Posts: 85Questions: 15Answers: 0

    Pl. find attached herewith the snapshot of server output.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited February 2019

    The server is returning an empty array which is why the row is not shown. Your server script is not responding with the expected data. The Editor Data doc describes the expected request/response for each type of Editor action.

    EDIT: The idea is that the server script will update the DB then execute a query for the new/updated record then return that data to the client. This way the client has exactly what is in the DB.

    Kevin

  • IdahoDixonIdahoDixon Posts: 7Questions: 2Answers: 0
    edited February 2019

    My MVC 5 solution - My table is initially hidden then is shown and populated as necessary using a javascript function - a click event. The server side is a JsonResult action method that returns JSON data - no need for JSON parsing on the client side. It's simple. It works:

    HTML:

    <div class="row" id="licLookupResults" style="display: none;">
        <table id="licLookupTable" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>License Number</th>
                    <th>Name</th>
                    <th>City</th>
                    <th>State</th>
                </tr>
            </thead>
        </table>
    </div>
    

    Javascript:

    $(document)
        .ready(function() {
            $('#licLookupTable').DataTable({
                data : null,
                columns: [
                    { data: "LicenseNumber" },
                    { data: "Name" },
                    { data: "City" },
                    { data: "State" }
                ]
            });
        });
    
    function LookupLicenseNumbers() {
        var url = '@Url.Action("LicenseNumberLookup", "Licensees")';
            $.ajax({
                url: url,
                type: 'GET',
                async: false,
                success: function(jsonData) {
                    $('#licLookupResults').show(); // Show table div
                    $('#licLookupTable').DataTable()
                        .clear()
                        .rows.add(jsonData)
                        .draw();
                    },
                    error: function() {
                        $('#licLookupTable').DataTable()
                            .clear()
                            .rows.add(null)
                            .draw();
                    }
             });
    }
    

    Server Side (action method):

    [HttpGet]
    public JsonResult LicenseNumberLookup()
    {
        List<LicenseNumberLookupItem> data = repository.GetLicenseNumberLookupItems();
    
        return Json(data, JsonRequestBehavior.AllowGet);
    }
    

    Enjoy!

This discussion has been closed.