Django: How can I delete specific records out of tables by using a view, a template and confirm in JavaScript in a django-template?

Question

I have a model named Actie in models.py.

The context I passed: {'actie': Actie.objects.all(), 'user': request.user}

This is my template I rendered by a view:

{% for actie in actie %}
            {% if actie.actie_gebruiker.id == user.id %}
                <tr onclick="window.location.href={{ actie.id }}">
                    <td>{{ actie.id }}</td>
                    <td>{{ actie.actie_naam }}</td>
                    <td>{{ actie.actie_status.status_naam }}</td>
                    <td>{{ actie.actie_aanmaakdatum|date:"d-m-y [ H:i ]" }}</td>
                    <td>{{ actie.actie_einddatum|date:"d-m-y" }}</td>
                    <td>{{ actie.actie_eindtijdstip|date:"[ H:i ]" }}</td>
                    <td>{{ actie.actie_gebruiker }}</td>
                </tr>
                <a id="verwijderenButton" href="" onclick="bevestigVerwijdering({{ actie_id }});"><img class="icontje"
                                                                                         src="{% static 'MyApp/verwijderen.png' %}"></a>
            {% endif %}
        {% endfor %}
{% endif %}
{% endfor %}
<script>
    function bevestigVerwijdering(id) {
        var actie_id = '{{ actie.id }}';
        var antwoord = confirm("Weet u zeker dat u deze actie wilt verwijderen?");
        if (antwoord == true) {
            document.getElementById('verwijderenButton').href = 'verwijderen/' + id + '/';
            alert(id);
            alert(document.getElementById('verwijderenButton').href);
            //window.location.href= 'verwijderen/' + id + '/';
        }
    }
</script>

Now what I want this code to do is that when I click on the image, that it deletes that specifc record out of the database.

It deletes nothing when I don't click on the first record but deletes the last record when I click on the first record.

This is my view:

def verwijderActie(request, id):
    Actie.objects.filter(id=id).delete()
    return HttpResponseRedirect('../../')

Answer 1

You are creating a list of elements with the same id, then, when you call the javascript function, it gets the first element with the called id.

I would make something like that:

{% for actie in actie %}
    {% if actie.actie_gebruiker.id == user.id %}
        <tr onclick="window.location.href={{ actie.id }}">
            <td>{{ actie.id }}</td>
            <td>{{ actie.actie_naam }}</td>
            <td>{{ actie.actie_status.status_naam }}</td>
            <td>{{ actie.actie_aanmaakdatum|date:"d-m-y [ H:i ]" }}</td>
            <td>{{ actie.actie_einddatum|date:"d-m-y" }}</td>
            <td>{{ actie.actie_eindtijdstip|date:"[ H:i ]" }}</td>
            <td>{{ actie.actie_gebruiker }}</td>
        </tr>
        <a id="verwijderenButton_{{ actie.id }}" href="#" onclick="bevestigVerwijdering({{ actie.id }});return false;"><img class="icontje" src="{% static 'MyApp/verwijderen.png' %}"></a>
    {% endif %}
{% endfor %}
<script>
    function bevestigVerwijdering(id) {
        var actie_id = id;
        var antwoord = confirm("Weet u zeker dat u deze actie wilt verwijderen?");
        if (antwoord == true) {
            document.getElementById('verwijderenButton_'+id).href = 'verwijderen/' + id + '/';
            alert(id);
            alert(document.getElementById('verwijderenButton').href);
            //window.location.href= 'verwijderen/' + id + '/';
       }
    }
</script>