AJAX delete function not working properly

Question

I'm using AJAX to delete a listing in my app with the help of data-id which is a number for each listing on the page. The problem is that every Delete button has the same class i.e. delete-file and I always get the data-id of the first listing on the page. Is there a way to fix this?

function ajax(){
        button =  $('.delete-file');
        var id = button.attr("data-id");
        console.log(id);
        bootbox.confirm("Are you sure you want to delete this file?",
            function (result) {
                if (result) {
                    $.ajax({
                        method: "DELETE",
                        url: "delete/" + id,
                        beforeSend: function(xhr) {
                            xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
                            },
                            success: function(){
                            $('.posts').load(' .posts', function(){$(this).children().unwrap()})
                            $('.tags').load(' .tags', function(){$(this).children().unwrap()})
                             }
                          });
                        }
                    });
        }

                                

<button data-id="{{ file.pk }}" onclick="ajax()" class="btn btn-primary btn-sm file-buttons delete-file">Delete</button>

If you want to keep using the inline onclick, change it to pass the id in on the method call. And then use it. — Taplar, Oct 02 '20 at 16:56
as above or use `this`: `onclick="ajax(this)"` with `function ajax(el) {` — freedomn-m, Oct 02 '20 at 16:57
I've changed it to pass the id in the function ajax({{ file.pk }}) but the same thing is happening. — BoostedAnimal, Oct 02 '20 at 17:54

AJAX delete function not working properly

0 Answers0