Datatables doesn't want to cooperate with my returned data.

IsaacBen

I'm using the editor with Laravel and I can update a row, but where I fail is in the return part. No matter what I return the row never gets updated.

Here is the editor part

        var editor = new $.fn.dataTable.Editor( {
            ajax: {
                create: '/client',
                edit: {
                    type: 'PUT',
                    url:  '/client/22',
                    dataType: 'JSON',
                    beforeSend: function (xhr) {
                        var token = $('meta[name="csrf_token"]').attr('content');
                        if (token) {
                            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                        }
                    },
                    success: function (json) {
                        toastr.success("Client has been updated successfully!");
                        console.log("json is");
                        console.log(json);
                    },
                    error: function (xhr, error, thrown) {
                        console.log(error);
                    }
                },
                remove: {
                    type: 'DELETE',
                    url:  '/client'
                }
            },
            table: '.table',
            idSrc:  'id',
            fields: [
                { label: 'Name', name: 'name' },
                { label: 'Email',  name: 'email'  },
                { label: 'Headquarters',  name: 'headquarters' },
                { label: 'Phone',  name: 'phone'  },
                { label: 'Fax',  name: 'fax'  },
            ]
        });

        $('.table').on( 'click', 'tbody td:not(:first-child)', function (e) {
            editor.inline( this );
        } );

The Laravel part. The 'id' is for the idSrc.

        $success['data'][] = [
            'id' => $client->id,
            'name' => $client->name,
            'email' => $client->email,
            'headquarters' => $client->headquarters,
            'phone' => $client->phone,
            'fax' => $client->fax
        ];
        return response()->json($success);

The returned data format is shown in the image.

What am I doing wrong?

allan

I don't immediately see what the issue is there I'm afraid. I'm slightly concerned about the table: '.table' selector since that might select something other than the actual target DataTable if you have more than one element with the .table class (which will happen if you use scrolling in DataTables for example, or have more than one table).

Beyond that, I'd need a link to the page showing the issue please.

Allan

IsaacBen

Sorry, don't have a link.
Am I supposed to do something in the success AJAX function? Should I render the table manually somehow?

IsaacBen

So I added this part to the success function, but then I lose the ability to edit again. I will need to refresh the page.

$('table.card').DataTable()
.rows().invalidate('data')
.draw(false);

allan

Am I supposed to do something in the success AJAX function?

Ah! I missed that. That's the problem. You can't provide a success or error function for the ajax option. As its documentation nodes:

Please note that the success and error options should not be overridden as these are used by Editor.

Allan

IsaacBen

God bless you
Thank you very much.

bvelasquez

In any version after 1.6, this would be OK?

allan

Yes - Editor 1.6 uses the jQuery complete callback rather than success.

Allan