Not able to pass value from editor.field

Muhammad Izzat

Hello everyone. I'm having issue passing my data from the editor.field. I have a working code to create, edit and delete my table data from REST API using ajax in $.fn.dataTable.Editor, but now its unable to do multi editing because it passing an incorrect URL in AJAX. Therefore I've created another formButtons inside my editor and onclick it will run a loop to get the id of each selected row and send the URL 1 by 1. The URL issue is fixed but now I'm not getting the data from the editor.field. Can anyone help me with this? Any help is much appreciated

Below is my code, I've attached my working delete function as well as reference :

Javascript :

function getDataTableButtons() {
        return [{
                extend: 'edit',
                editor: content_editor,
                formButtons: ['Edit',
                {label: 'Multi Edit',
                fn : function(){
                        var ids = content_table.api().rows({ selected: true }).data().pluck('id');
                        for(var i=0; i < content_table.api().rows({ selected: true }).count(); i++) {
                            selected_content_id = ids[i]
                            $.ajax({
                                type: 'PUT',
                                url: '/api/dashboard/content_detail/' + selected_content_id + '/',
                                data: function (content_data) {
                                    var updated_data = {};
                                    $.each(content_data.data, function (id, value) {
                                        updated_data['search_type'] = searchid;
                                        updated_data['project'] = projectid;
                                        updated_data['description'] = value['description'];
                                        updated_data['category'] = value['category']['name'];
                                        updated_data['name'] = value['name'];
                                        updated_data['parent'] = value['parent'];
                                    });
                                    return updated_data;
                                },
                                success: function () {
                                    content_table.api().ajax.reload();
                                    }
                            })
                        }
                }
                },
                {label: 'Cancel', fn: function () {this.close();}}],
                className: 'btn btn-success btn-outline btn-small'
            }
}

 content_table = $('#project-content-datatable').dataTable({
    dom: 'Blfrtip',
    JQueryUI: true,
    bPaginate: false,
    sScrollX: "100%",
    scrollY: '200vh',
    scrollCollapse: true,
    paging: false,
    destroy: true,
    columnDefs: [
        {width: 1, targets: 0},
        {width: 1, targets: 1},
    ],
    responsive: false,
    select: true,
    buttons: getDataTableButtons(),
    ajax: {
        url: content_path,
        dataSrc: ''
    },
    columns: [
        {"data": "id", "class": "content_id id_padding-right ", "width": "5px"},
        {
            "data": "thumb",
            "class": "preview_padding-right ",
            "visible": false,
            "render": function (data, type, row) {
                return `<a href=` + data + ` data-fancybox> <img onerror="this.src='/media/dashboard/default/photo.png'" src=` + data + ` width="80" height="45"> </a>`;
            }
        },
        {"data": "parent", "visible": false},
        {"data": "name", "class": "content_name", "visible": true},
        {"data": "description", "class": "content_description", "visible": true},
        {
            "data": "category", "class": "", "visible": true, "render": function (data, type, row) {
            if (data != null) {
                return data.name;
            }
            else {
                return 'None';
            }
        }
    ]
});

$('#content_delete').click(function () {
    var confirmation = confirm("are you sure you want to remove the item?");
    if (confirmation) {
        var ids = content_table.api().rows({ selected: true }).data().pluck('id');
        for(var i=0; i < content_table.api().rows({ selected: true }).count(); i++) {
            selected_content_id = ids[i]
            $.ajax({
                type: "DELETE",
                url: '/api/dashboard/content_detail/' + selected_content_id,
                success: function () {
                    content_table.api().ajax.reload();
                    }
            })
        }
    }
});

HTML :

<input type="button", value="Multi delete" id="content_delete" class="content_delete">
<table id="project-content-datatable" class="display table table-hover table-responsive" width="100%">
    <thead>
    <tr>
        <th class="small text-muted text-uppercase"><strong>ID</strong></th>
        <th class="small text-muted text-uppercase"><strong>Parent</strong></th>
        <th class="small text-muted text-uppercase"><strong>Name</strong></th>
        <th class="small text-muted text-uppercase"><strong>Description</strong></th>
        <th class="small text-muted text-uppercase"><strong>Category</strong></th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

allan

Therefore I've created another formButtons inside my editor and onclick it will run a loop to get the id of each selected row and send the URL 1 by 1.

I fear that is not going to work because you are not calling Editor's own success function for an Ajax submit. Moreover, for every row that is edited the ajax.reload() method is being executed. So if you had 100 rows being edited, you would have 100 Ajax requests for the edit and 100 Ajax reloads. 200 requests when a single one could do it!

My suggestion would be to have a proxy script on the server which would accept a multi-row edit from Editor without needing to parse it into individual requests.

If that isn't possible use the ajax option as a function and override Editor's default Ajax so that you can do a single Ajax request at a time. I would suggest that you use a Promise so that only a single request is performed at a time (to avoid overloading your server).

Allan