Row disappears after Editor create/update

macateem

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?

allan

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

macateem

I got it figured out. Thanks.

XpenseOne

@macateem what was the problem?

allan

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

shatrughan

@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 ?

colin

Hi @shatrughan ,

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

Cheers,

Colin

shatrughan

Pl. find attached herewith the snapshot of server output.

kthorngren

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

IdahoDixon

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!