Editor buttons don't make API calls (Python server)

Crlotron

I'm implementing DataTables Editor in a self-hosted Python project. I have server side data working properly with DataTables, including pagination etc. The Editor buttons are appearing as expected, with Edit/Delete becoming active once a row is selected. I used the example from REST interface as a template to set up the buttons. However, clicking them doesn't appear to do anything. I don't see any API calls being made and the code isn't triggering - at this time, it's just a placeholder function, but it works as expected when I make manual calls.

As a test, I made a custom button to test the API and it triggers as expected from there, using the info as in Editor. Can anyone help me see what syntax I'm missing or the (probably totally obvious) mistake? The code is slightly simplified to removed formatting and special field handling, but is functionally identical.

$(document).ready(function () {
    var editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                url:  '/api/transactions/create',
            },
            edit: {
                type: 'PUT',
                url:  '/api/transactions/edit/{id}'
            },
            remove: {
                type: 'DELETE',
                url:  '/api/transactions/delete/{id}'
            }
        },
        table: '#data',
        fields: [
            {label: 'Transaction Date', name: 'transaction_dt'},
            {label: 'Account From', name: 'account_from'},
            {label: 'Account To', name: 'account_to'},
            {label: 'Description', name: 'description'},
            {label: 'Amount', name: 'amount'}],
            } );

    var table = $('#data').DataTable({
        ajax: '/api/data',
        serverSide: true,
        select: 'single',
        columns: [
            {data: 'transaction_dt'},
            {data: 'account_from'},
            {data: 'account_to'},
            {data: 'description'},
            {data: 'amount'},
        ],
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "selectedSingle",
                text: "Test API",
                action: function ( e, dt, node, config ) {
                    $.ajax({
                        type: 'POST',
                        url: '/api/transactions/create',
                    })
                }
            },
            { extend: "remove", editor: editor }
        ],
    });

TLDR: The "Test API" button works and I see the API call. New, Edit, and Delete appear to do nothing.

kthorngren

Just to make sure I understand the problem. You can select a row but when clicking the Editor button you don't see the editor form?

When clicking the delete button you don't see an XHR request sent to the sever using the browser's network inspector?

Do you get errors in the browser's console?

There is nothing obvious in the code snippet as to the problem. Can you post a link to your page or a test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Crlotron

I see the editor form just fine. All buttons appear correctly. Edit/Delete are grayed out until a row is selected (correctly).

When clicking "New" a downward facing caret image is loaded. There's no other network activity in the inspector. No action with Edit/Delete. My "Test API" button receives the expected response.

Browser console throws a "row identifier" error but that's not surprising since I haven't set it. That shouldn't impact "New" at all, which is also experiencing the issue. I've since fixed this without impact. Inline editing correctly triggers the API as well.

Unfortunately I'm not sure I can post a test case since it's API related and I can't open up ports for this. I'm new to jQuery and can't even get Editor to properly show up on the linked test case. Error says

"TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous>"

I understand that may mean I'm stuck. Thanks

kthorngren

I copied most of your code into this test case. Changed the fields to match what the server is sending. I added idSrc for the last_name as the unique field. The network inspector shows the calls to the ajax API definitions. The edits don't work because the server script is not setup to work with the Editor updates.
http://live.datatables.net/guwafemu/236/edit

When clicking "New" a downward facing caret image is loaded.

There is no console error when this happens?

can't even get Editor to properly show up on the linked test case. Error says

If you are using live.datatables.net then you will need to add the Editor library and select extension by using the JS Bin menu option Add library.

Kevin

Crlotron

After adding idSrc to your linked example, edits worked just fine. The code bypasses what I thought was the riskiest part (setting API calls to the buttons) but naturally that won't work in a test environment. I'd added Editor and Select from the "Add Library" section but must've done something else wrong.

No console errors currently happening on my code.

I was hoping I'd made a syntax error but it's likely some kind of interference between Editor and another js. I'm using Bootstrap 5 with a UI package I picked up. I'll try stripping everything away other than DataTables and Editor and see if the issue persists.

Thanks again for your help. Sounds like the issue is solidly on my end somewhere. If I can't get it, I'll just make my own buttons since the API will be doing all the work.

kthorngren

I'd added Editor and Select from the "Add Library" section but must've done something else wrong.

You need to move them below the datatables.js include.

Sounds like something out of the ordinary is happening on your page. I've not heard of this type issue before. The developers may have some ideas for you.

Let us know what you find.

Kevin

Crlotron

My framework styling was causing the forms to appear under another element. /facepalm

API calls were not being seen because Editor first makes the form appear and doesn't call the API until it's submitted. Since the form was popping under other elements, the call never happened. I'll look into using a modal window instead to ensure it appears on top.

kthorngren

causing the forms to appear under another element.

Sounds like a z-index issue. You can inspect the Editor BS 5 example to see the z-index. This is from inspecting the Edit modal:

You can compare this with other elements on the page. Maybe you need to increase the z-index of the Editor modals using CSS.

Also make sure you are using the Datatables Bootstrap 5 integration files for the styling to be correct. Click the CSS tab of the example to see what is needed. Use the Download Builder to get the correct files.

Yes the API call is executed when the submit button is clicked to send the updated data to the server.

Kevin

Crlotron

I had included "dataTables.editor.min.js" but not "editor.bootstrap5.min.js" which was causing the form to appear flatly on the page instead of correctly as a modal. Your most recent post called that one out more clearly than I'd seen and I was able to get it fixed.

Comedy of errors. Except for the comedy part.

Not sure how to close out a question, but I consider this complete. If (when) I run into issues, they'd be best served in a fresh question for clarity. Thank you again for all your help.