How to make Ajax delete Django's object instance?

Question

There is a list generated in HTML, that represents all objects (Cards). There is already a delete button, but it's using Django functionality, and it requires a page to reload to take effect. Is there a simple way to include AJAX into the program?

I am a beginner to JavaScript and AJAX. I have tried some copy-paste solutions. I even tried to deconstruct a simple Django Ajax CRUD app, but it has too many functionalities, and it seemed like an overkill for my app (i would have to rewrite all the views, templates and urls). So I decided to ask a question over here with my own code.

views.py (List objects view)

def all_cards(request):
    cards = Card.objects.all()
    return render(request, 'all_cards.html', {'cards':cards})

all_cards.html

 <body>
    {% if cards %}
    <table class="table" id="card-table">
      <tr>
        <th>Card owner name</th>
        <th>Card balance</th>
      </tr>
      {% for card in cards %}
      <tr>
        <td>{{ card.cardholders_name }}</td>
        <td>{{ card.card_balance }}€</td>
        <td><form action="{% url 'card_delete' card.id %}" method="post">
            {% csrf_token %}
          <input type="submit" value='Delete'>
      </form></td>
      </tr>
      {% endfor %}
      {% else %}
      <p>There are no cards registered.</p>
      {% endif %}
    </table>
  </body>

urls.py

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

views.py (Delete object view)

def card_delete(request, id):
    card_that_is_ready_to_be_deleted = get_object_or_404(Card, id=id)
    if request.method == 'POST':
        card_that_is_ready_to_be_deleted.delete()

    return HttpResponseRedirect('/all_cards')

As you can see, the form's input( <input type="submit" value='Delete'> )calls Django's view via URL.

I expect the delete button to call an AJAX functionality, that will do a similar thing.

How should I go about writing that functionality?

P.S.: This is my first StackOVerflow question, I'm open for constructive criticism.

is any error appear ?if not , you need debug it.first try to found def card_delete(request, id): is calling when you press button or not.for this you can adding print("I am in view") to above of code in card_delete function. — mehdi
– mehdi, Commented Jul 16, 2019 at 12:17
@mehdi The above code works. My question was about writing the same functionality in AJAX. Check out Saeed Alijani's answer to clarify. — Rok Klancar
– Rok Klancar, Commented Jul 16, 2019 at 12:57

Saeed Alijani · Accepted Answer · 2019-07-16 12:12:10Z

3

You should add id to your form and table row first

<form action="{% url 'card_delete' card.id %}" method="post" id="delete_form_{{ card.id }}">

.

<tr id="card_{{card.id}}">

And change button code to:

<input type="button" onclick="submit_delete({{ card.id }})" value="delete">

And use this function to send AJAX request:

<script>
  function submit_delete(id) {
      $.ajax({
          type: $('#delete_form_'+id).attr('method'),
          url: $('#delete_form_'+id).attr('action'),
          data: $('#delete_form_'+id).serialize(),
          success: function (data) {
              $('#card'+id).remove()
          }
      });
  }
</script>

answered Jul 16, 2019 at 12:12

Saeed Alijani

3132 silver badges13 bronze badges

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

3 Comments

Rok Klancar Over a year ago

But now I have ran into a new problem. The AJAX does delete the database object, but I still have to refresh the page, to see the changes in HTML. Are there any known solutions? Like, for example, putting the whole table inside a container that refreshes after AJAX submit...

mehdi Over a year ago

in success part in ajax add this line: location.reload(); .so your success part should be like this :` success: function (data) { $('#card'+id).remove();location.reload(); } `

Rok Klancar Over a year ago

@mehdi I used ``` $("#all_cards_table").load("all_cards.html #all_cards_table") ``` in the script, and it works too! But still, thanks for the input, It helped alot!

Collectives™ on Stack Overflow

How to make Ajax delete Django's object instance?

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