title: Delete Model object in django Using jquery Ajax
body: <p>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.</p>
  
  <p><strong>Template for objects' table is :</strong></p>
  
  <pre><code>&lt;table class="table table-striped table-bordered table-list"&gt;
      &lt;thead&gt;
       &lt;tr&gt;
          &lt;th&gt;&lt;em class="fa fa-cog"&gt;&lt;/em&gt;&lt;/th&gt;
          &lt;th class="hidden-xs"&gt;ID&lt;/th&gt;
          &lt;th&gt;Patient Name&lt;/th&gt;
          &lt;th&gt;Day&lt;/th&gt;
          &lt;th&gt;Time&lt;/th&gt;
          &lt;th&gt;Location&lt;/th&gt;
       &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          {% for appointment in appointments %}
              &lt;tr&gt;
                  &lt;td align="center"&gt;
                      &lt;button class="delete_button" id="{{ appointment.id }}"&gt;
                          &lt;em class="fa fa-trash"&gt;&lt;/em&gt;
                      &lt;/button&gt;
                  &lt;/td&gt;
                    &lt;td&gt;1&lt;/td&gt;
                  &lt;td class="hidden" id="appointment_id"&gt;{{ appointment.id }}&lt;/td&gt;
                  &lt;td&gt;{{ appointment.patient }}&lt;/td&gt;
                  &lt;td&gt;{{ appointment.day }}&lt;/td&gt;
                  &lt;td&gt;{{ appointment.time }}&lt;/td&gt;
                  &lt;td&gt;{% if appointment.clinic %}
                        {{ appointment.clinic }}
                        {% endif %}
                        {% if appointment.hospital %}
                        {{ appointment.hospital }}
                        {% endif %}
                  &lt;/td&gt;
              &lt;/tr&gt;
          {% endfor %}
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Javascript is as below :</strong></p>
  
  <pre><code>$(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){
              }
          });
      });
  });
  </code></pre>
  
  <p>Nothing is happening when I click on the delete button. What am I doing wrong here ?</p>
  
  <p><strong>EDIT 2</strong>
   <strong>This is going on in ajax request :</strong>
  Syntaxerror in console :</p>
  
  <pre><code>beforeSend: function(xhr) {
        xhr.setRequestHeader("X-CSRFToken", &lt;input type='hidden' name='csrfmiddlewaretoken' value='LUgmNbcWfkIR9KpLi7lzsn0QOk' /&gt; );
                  },
  </code></pre>
  
  <p>How do I prevent csrftoken tag to render the whole input field here ?</p>