Delete Model object in django Using jquery Ajax

Question

Having a hard time deleting an object using jquery/ajax. I have implemented a table that has rows containing a list of objects from Appointment model. There is a delete button in each row.

Template for objects' table is :

<table class="table table-striped table-bordered table-list">
    <thead>
     <tr>
        <th><em class="fa fa-cog"></em></th>
        <th class="hidden-xs">ID</th>
        <th>Patient Name</th>
        <th>Day</th>
        <th>Time</th>
        <th>Location</th>
     </tr>
    </thead>
    <tbody>
        {% for appointment in appointments %}
            <tr>
                <td align="center">
                    <button class="delete_button" id="{{ appointment.id }}">
                        <em class="fa fa-trash"></em>
                    </button>
                </td>
                  <td>1</td>
                <td class="hidden" id="appointment_id">{{ appointment.id }}</td>
                <td>{{ appointment.patient }}</td>
                <td>{{ appointment.day }}</td>
                <td>{{ appointment.time }}</td>
                <td>{% if appointment.clinic %}
                      {{ appointment.clinic }}
                      {% endif %}
                      {% if appointment.hospital %}
                      {{ appointment.hospital }}
                      {% endif %}
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

Javascript is as below :

$(document).ready(function(){
    $(".delete_button").click(function() {
        var id = $(this).attr('id');
        $.ajax({
            url: "{% url 'deleteappointment' %}",
            data: { 'id' : id },
            beforeSend: function(xhr) {
                xhr.setRequestHeader("X-CSRFToken", {% csrf_token %} );
            },
            success: function(response){
            }
        });
    });
});

Nothing is happening when I click on the delete button. What am I doing wrong here ?

EDIT 2 This is going on in ajax request : Syntaxerror in console :

beforeSend: function(xhr) {
      xhr.setRequestHeader("X-CSRFToken", <input type='hidden' name='csrfmiddlewaretoken' value='LUgmNbcWfkIR9KpLi7lzsn0QOk' /> );
                },

How do I prevent csrftoken tag to render the whole input field here ?

I'd imagine its because you don't declare its a post request but hard to say without more info, if it is then use $.post instead of $.ajax — Sayse
– Sayse, Commented Nov 29, 2016 at 9:00
@Manu uncaughtsyntax error in csrf token header. django's {% csrf_token %} is giving an input field in the header. — blueChair
– blueChair, Commented Nov 29, 2016 at 9:07
Found Error in header : The header is looking like this : beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRFToken", <input type='hidden' name='csrfmiddlewaretoken' value='LUgmNbcWfkIR9KpLi7lzsn0QOkREPZmxABWf' /> ); }, — blueChair
– blueChair, Commented Nov 29, 2016 at 9:12

Sayse · Accepted Answer · 2016-11-29 09:29:37Z

6

You're using the {% csrf_token %} template tag which inserts the token in a html format for a form. You can use the other type of brackets (inside quotes)

xhr.setRequestHeader("X-CSRFToken", {% csrf_token %} );

should be

xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");

answered Nov 29, 2016 at 9:29

Sayse

43.4k14 gold badges85 silver badges150 bronze badges

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

3 Comments

blueChair Over a year ago

Already did this. Now getting this : "Uncaught ReferenceError : l3ts9IEg7JfopQmeb0xiGq5AgPoHFVLjaK.. is not defined." The random string is the csrf token.

Sayse Over a year ago

Did you forget the quotes around the tag?... Although this is verging into a separate issue..

blueChair Over a year ago

Replacing {% csrf_token %} with "{{ csrf_token }}" worked like a charm!

Collectives™ on Stack Overflow

Delete Model object in django Using jquery Ajax

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related