Delete element with ajax in django

Question

I am currently having some issue in deleting element with ajax in a Django Application. I have some pictures, each of them displayed in a bootstrap card. Basically, my code is kind of working, but I couldn't figure out why, for example, when I display the pictures in the card, in the first one of the list the Delete button doesn't work and, when I have multiple pictures, the delete button works but delete the first picture on the list and not the right one. I may have some mistake in fetching the IDs, but so far I couldn't find where the issue is. I post some code

views.py

def delete_uploaded_picture(request, pk):
picture = Picture.objects.get(id=pk)
if request.headers.get('x-requested-with') == 'XMLHttpRequest':
    picture.delete()
    return JsonResponse({})

js

const deleteForms = document.getElementsByClassName('delete_form')
deleteForms.forEach(deleteForm => deleteForm.addEventListener('click', (e)=>{
e.preventDefault();
let pk = deleteForm.getAttribute('data-pk')
const cardDiv = document.getElementById('card_div'+pk)
const clickedBtn = document.getElementById('clicked_btn'+pk)
$.ajax({
    type: 'POST', 
    url: $("#my-url-div").data('url'),
    data: {
        'csrfmiddlewaretoken': csrftoken,
        'pk': pk,
    }, 
    success: function(response){
        $('#card_div'+pk).hide();
        handleAlerts('success', 'Immagine Rimossa')
    }, 
    error: function(error){
        handleAlerts('danger', 'Ops qualcosa è andato storto!')
    }
})
}))

html

<div class="form-group mt-2">
                    <div class="row">
                    {% if question.picture_set.all %}
                        {% for pic in question.picture_set.all %}
                            <div class="col-lg-4 col-md-6" id="card_div{{pic.id}}">
                            <form action="" method="post" class="delete_form" data-pk="{{pic.id}}">
                                <div class="card picture_card" id="my-url-div" data-url="{% url 'main:delete_uploaded_picture' pk=pic.id %}">
                                    <img class="card-img-top img-fluid" src="{{ pic.picture.url }}" alt="">
                                    <div class="card-body">
                                        <button type="button" class="btn btn-danger btn-sm waves-effect waves-light delete_picture" id="clicked_btn{{pic.id}}">Elimina</button>
                                    </div>
                                </div>
                            </form>
                            </div>
                        {% endfor %}
                    {% endif %}
                    </div>
                </div>

I inspected the html and the IDs are right in the card, so it's something else.

try to debug in Function. print ids in django view and see if its correct or not. — Hemal Patel
– Hemal Patel, Commented Sep 15, 2022 at 8:44

Patryk Szczepański · Accepted Answer · 2022-09-15 09:55:52Z

1

Probably you should change this line:

let pk = deleteForm.getAttribute('data-pk');

To:

let pk = e.currentTarget.getAttribute('data-pk');

Generally in function are you querying objects using className, so it returns multiple object and overrides only one. In e.currentTarget you have element that you clicked, so it does not select it via random way.

Basically I am not sure if the forloop assign is working correctly, the javascript does it own magic in forloops (for example - it makes them asynchrous) so I would not be suprised it does not work as expected and the value you are getting into pk is not that you want.

answered Sep 15, 2022 at 9:55

Patryk Szczepański

7941 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahammadhusain kadiwala · Accepted Answer · 2022-09-15 07:58:00Z

0

// Delete Data

$("tbody").on("click", ".btn-del", function () {
    //console.log("Delete Button Clicked");
    let id = $(this).attr("data-sid");
    let csr = $("input[name=csrfmiddlewaretoken").val();
    //console.log(id);
    mydata = { sid: id, csrfmiddlewaretoken: csr };
    mythis = this;
    $.ajax({
        url: "{% url 'delete' %}",
        method: "POST",
        data: mydata,
        success: function (data) {
            //console.log(data);
            if (data.status == 1) {
                $("#msg").text("Data Deleted Successfully");
                $("#msg").show();
                $(mythis).closest("tr").fadeOut();
            }
            if (data.status == 0) {
                $("#msg").text("Unable to Delete Data");
                $("#msg").show();
            }
        },
    });
});

========= Output ==============

answered Sep 15, 2022 at 7:58

Mahammadhusain kadiwala

3,6702 gold badges9 silver badges17 bronze badges

1 Comment

Giorgio Scarso Over a year ago

Yeah but this actually doesn't reply to my question. I may have some error in my code. This is just another code of a table that doesn't have anything in common. Anyway, in the meantime I try do adjust mine one...

Collectives™ on Stack Overflow

Delete element with ajax in django

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related