AJAX Delete: Delete all rows on "Select All"?

markMathews1989

Hello,

I am deleting my rows via Ajax outside of my datatable definition. I am able to delete 1 or multiple rows on a checkbox selection. I also display a modal on a successful delete. I currently face 2 problems:

1. When I delete more than 1 row, I get a pop-up modal for each row that is being deleted ( I should only get the modal once, but it is handling each request separately).
   *** For Ex:** I've checked 5 rows and clicked the delete button. I will get my first success modal, close it out, and the process will repeat 4 more times. Once for each record deleted.
2. When I click the select all button, none of my variables are being recognized and therefore, I get no response. I haven't found out a way to extract data from the select all for all rows. My html table has a <th> element for select all (select-all). Below is the following ajax request as well as my datatable:

$(document).ready(function() {    
    var table = $('#table').DataTable( {
        ajax: {
            url: '/files?departmentType=accounting&category=finance',
            dataSrc: ''
        },
        info: false,
        order: [[ 2, "asc" ]],
        paging: false,
        searching: true,
        scrollCollapse: true,
        columns: [
            {
                data: "id",
                    'render': function (data, type, full, meta){
                        return '<input class="select" name="selected-row" type="checkbox">';
                    },              
            },
            {
                data: "date"
            },
            {
                data: "salary"
            },
            {
                data: "accountType"
            },
            {
                data: "department"
            }
        ]
    } );

    $(document).on('click', '.select', function(data, type, row){

        var id = table.row($(this).parent()).data().id;
        var date = table.row($(this).parent()).data().date;
        var accountType = table.row($(this).parent()).data().accountType;
        
        var uri = id + "/" + date + "/" + accountType;

        $(document).on('click', '#delete', function () {
            $.ajax({
                type: "DELETE",
                url: "/files/" + uri,
                beforeSend: function (xhr) {
                    xhr.overrideMimeType("text/plain; charset=x-user-defined");
                },
                success: function () {
                    UIkit.modal.alert("Your file(s) were deleted successfully.");
                },
                error: function () {
                    UIkit.modal.alert("Error occurred while trying to delete your file(s).");
                }
            });
        })
    }); 
} );

allan

When I delete more than 1 row, I get a pop-up modal for each row that is being deleted

This isn't really a DataTables issue, but rather how you are adding your events. You have:

$(document).on('click', '#delete', function () {

inside

$(document).on('click', '.select', function(data, type, row){

So every time you select a row, you add another Ajax request. So yes, you will always get one model per row selection. Even more interesting is that if you select, unselect and then select again the same row, you'll get three confirms that it was deleted.

You want to bind to your delete button just once.

When I click the select all button, none of my variables are being recognized and therefore, I get no response

The key is going to be getting the selected row's data. The documentation here will help with that.

Allan

markMathews1989

@allan Thanks For your response Allan. The problem I was facing was in the Java and the way everything was being sent to me. Our java developer reformatted the api.