Edit button modal dialog not displaying. How to find the problem?

mgpearce48

I'm using Datatables Editor with Django Rest Framework (based on the REST Interface example). Whilst I have the create button working perfectly, the edit and delete buttons are not working (just stalls after submit).

I think it may have something to do with the ajax url but I'm having difficulty understanding how the modal dialog is launched. I have assumed the dialog is launched from within the Editor app and only relies on the server to act after submit, although I'm not sure how the primary key is obtained (i.e. the app displays the modal with data populated from the table?).

How to I trace the fault? My code:

  <script type="text/javascript">

    var editor;
    $(document).ready(function() {

        editor = new $.fn.dataTable.Editor( {
            table: "#object-table",
            ajax: {
                create: {
                    type: 'POST',
                    url:  "{% url 'facility-list' format='datatables' %}",
                    headers: {'X-CSRFToken': '{{ csrf_token }}'}
                },
                edit: {
                    type: 'PUT',
                    url:  "{% url 'facility-detail' format='datatables' %}",
                    headers: {'X-CSRFToken': '{{ csrf_token }}'}
                },
                remove: {
                    type: 'DELETE',
                    url:  "{% url 'facility-list' format='datatables' %}"
                }
            },

            fields: [
                { label: "Building Code:", name: "bldgcode" },
                { label: "Name:", name: "name" },
                {
                    label: "Category:",
                    name: "category",
                    type: "select",
                    options: []
                },
                {
                    label: "Location:",
                    name: "location",
                    type: "select",
                    options: []
                }
            ],

            i18n: {
                create: {
                    button: "Add",
                    title:  "Add new facility",
                    submit: "Add"
                },
                edit: {
                    button: "Edit",
                    title:  "Edit facility details",
                    submit: "Edit"
                },
                remove: {
                    button: "Delete",
                    title:  "Delete facility",
                    submit: "Delete",
                    confirm: {
                        _: "Etes-vous sûr de vouloir supprimer %d lignes?",
                        1: "Etes-vous sûr de vouloir supprimer 1 ligne?"
                    }
                }
            }

        } );

        $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn btn-sm btn-primary';
        var table = $('#object-table').DataTable( {

            pageLength: 10,
            order: [[ 0, 'asc' ]],
            processing: true,
            serverSide: true,
            dom: "lBfrtip",
            ajax: "{% url 'facility-list' format='datatables' %}",
            select: 'single',

            columns: [
                { data: "bldgcode" },
                { data: "name" },
                { data: "category_label" },
                { data: "location_name" }
            ],

            buttons: [
                { extend: "create", editor: editor},
                { extend: "edit",   editor: editor},
                { extend: "remove", editor: editor}
            ]

        });

        table.buttons().container()
            .appendTo($('.col-md-6:eq(0)', table.table().container()));

        editor.field('category').input().addClass('form-control');
        editor.field('location').input().addClass('form-control');

    });

  </script>

kthorngren

The more important thing to understand is the expected client / server protocol used by the Editor. See this doc:
https://editor.datatables.net/manual/server#Example-data-exchanges

The easiest way to see this is using the browser's Developer Tools to look at the XHR request and response in the Network tab. Instructions can be found in this technote if needed. Likely the response is invalid.

Also check the browser's console for errors.

Kevin

mgpearce48

Thanks Kevin, I understand the data exchange requirements however doesn't this occur only after submit on the modal dialog? I have assumed that the Editor app initially launches the dialog after selecting a row and pressing the edit button?

kthorngren

Sorry, misunderstood the problem description. Yes, when clicking Edit there should be a modal dialog. Is the Select extension installed and working? You should see thee row highlighted when selected and the info at the bottom will indicate the number of rows selected.

There isn't anything obvious in your code that would indicate a problem. Do you see errors in the browser's console?

Kevin

mgpearce48

Yes I have found the following error in the browser console:
"Uncaught Unable to find row identifier For more information, please refer to https://datatables.net/tn/14"
From this it would appear that the table may not have a primary key?
Thanks,
mgpearce48

kthorngren

Does your DB not have a unique field that can be fetched with the Datataables data?

Kevin

mgpearce48

I have had some success. I added the idSrc paramater with the bldgcode field (which is unique) and now working. Many thanks you Kevin for your help with this.
Regards,
mgpearce48