django delete object using AJAX or javascript with confirm

Question

hello I want to delete a Django object using AJAX or JavaScript with confirm message on clicking delete but I don't know how to complete AJAX request.

views.py

def delete(request,id):
    try:
        inta = work.objects.get(pk=id)
        inta.delete()
    except:
        pass
    return HttpResponseRedirect(reverse('home'))

urls.py

url(r'^delete/(?P<id>\d+)/$',views.delete, name='delete')

html :

{& for app in apps &}
<p>{{ app.item0 }}</p>
<p>{{ app.item1 }}</p>
<p>{{ app.item2 }}</p>
<button  data-object-id="{{ app.id }}">remove</button>
{% endfor %}

$('button').on('click', function(){
    var confirmation = confirm("are you sure you want to remove the item?");
    if (confirmation) {
     // execute ajax
        alert('removed');
    }
})

Mikey · Accepted Answer · 2019-04-09 21:31:21Z

3

There is more convinient way to write AJAX code:

$('button').on('click', function(){
    let confirmation = confirm("are you sure you want to remove the item?");
    if (confirmation) {
        let object_id = $(this).attr('data-object-id');
        let url = `delete/${object_id}/`;
        $.ajax({
           url: "example.html/my/example",
           data: {
               'csrfmiddlewaretoken': "{{ csrf_token }}"
           },
           type: "DELETE",
           dataType: "json"
         }).done(
              function(){alert("Deleted");}
            ).fail(
              function(){alert("Error");}
            ) 
       });
    }
})

edited Apr 9, 2019 at 21:31

answered Apr 9, 2019 at 21:14

Mikey

4481 gold badge5 silver badges11 bronze badges

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

3 Comments

Mar Over a year ago

I get this error Forbidden (CSRF token missing or incorrect.):

Mikey Over a year ago

I forgot about csrf token in data. Now it should work ;)

Mar Over a year ago

I change some lines in your code and now if I try to delete some itam then I take fail (alert error) but the item delete it and I can see that only if I refresh the page here the snippet: var object_id = $(this).attr('data-object-id'); console.log(object_id); //var url = 'delete/${object_id}/'; $.ajax({ url: 'delete/'+object_id+'/', data: { }, beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");

DeepSpace · Accepted Answer · 2019-04-09 20:03:51Z

0

Assuming that

The delete view excepts a DELETE request
The javascript code is contained in the HTML

$('button').on('click', function(){
    let confirmation = confirm("are you sure you want to remove the item?");
    if (confirmation) {
        let object_id = $(this).attr('data-object-id');
        let url = `delete/${object_id}/`;
        $.delete(url, {csrfmiddlewaretoken: '{{ csrf_token }}'}, function(){
                alert('removed');
        })
    }
})

If the javascript code is in a separate file you will have to find another way to get the csrf-token, perhaps from a hidden input somewhere on the page.

edited Apr 9, 2019 at 20:03

answered Apr 9, 2019 at 19:37

DeepSpace

82.1k12 gold badges119 silver badges166 bronze badges

5 Comments

Mar Over a year ago

but I need first to agree to confirm message before delete object some like this ` var confirmation = confirm("are you sure you want to remove the item?"); ` I am confused now

DeepSpace Over a year ago

The code you posted already handles the confirmation... Anyway I updated the answer to make it clearer

Mar Over a year ago

I try to test it now but don't work if I put code in <script></script> then show me error in ` let` I thing because have red line.

DeepSpace Over a year ago

@Mar You are probably using an older version of JS. Try to replace all let with var

Mar Over a year ago

I take now error : (index):679 Uncaught TypeError: $.delete is not a function at HTMLButtonElement.<anonymous> ((index):679) at HTMLButtonElement.dispatch (jquery-1.12.4.min.js:3) at HTMLButtonElement.r.handle (jquery-1.12.4.min.js:3)

Collectives™ on Stack Overflow

django delete object using AJAX or javascript with confirm

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related