0

I've created a comment system for blog posts in Django (the comments are stored in a Comments model) in which the author of the post or comment can delete a comment by clicking on the delete link below the comment, which results in a modal pop up asking for confirmation.

{% for comment in comments %}
<!-- Display comment -->
<a href="#" onclick="getCommentId(this)" data-id="{{ comment.id }}" data-toggle="modal" data-target="#exampleModalCenter">delete</a>
{% endfor %}

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Confirm Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete the comment?
            </div>
            <div class="modal-footer">
                <form id="confirm-delete-form" action="" method="POST">
                    {% csrf_token %}
                    <button id="confirm-delete-btn" class="btn btn-danger" type="submit">Yes, Delete</button>
                </form>
                <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

Corresponding views.py and urls.py sections:

class CommentDeleteView(DeleteView):
    model = Comments
    success_url = '/'

path('comment/<int:pk>/delete/', CommentDeleteView.as_view(), name='comment-delete')

I'm dynamically setting the action attribute of the form in jquery when delete is clicked to pass the unique comment id:

function getCommentId(comment) {
    var comment_id = $(comment).data("id");
    var url = "{% url 'comment-delete' " + comment_id + " %}"
    $("#confirm-delete-form").attr('action', url)
}

But when I click on 'Yes, Delete' button, I get:

404 Page not found

It can be seen that the url template tag hasn't been resolved & the current path has been prepended to it.

I've already tried this, same result.

Note: I tried hardcoding the comment id in the url template tag like this & it works.

<form id="confirm-delete-form" action="{% url 'comment-delete' 2 %}" method="POST">
    {% csrf_token %}
    <button id="confirm-delete-btn" class="btn btn-danger" type="submit">Yes, Delete</button>
</form>
Anubhav Das
  • 940
  • 1
  • 11
  • 16
  • 1
    The template tags are *rendered* at server side, not at client side, so indeed, you can not use the `{% url ... %}` template tag with (client-side) JavaScript. – Willem Van Onsem Aug 01 '19 at 08:49
  • @WillemVanOnsem I know that, but I'm setting the `action` attribute to `{% url ... %}` with JavaScript before the form submission takes place, so isn't it equal to just setting it in html? – Anubhav Das Aug 01 '19 at 08:59
  • 1
    @AnabhavDas: no! since the Django template tag is not part of the HTML that is passed to the browser. The `{% url ... %}` part is resolved by the template renderer, and replaced with a URL. In fact the browser is not aware at all that this has been rendered by Django's template tags. The browser does not understand these tags, it is the template renderer that filled in the corresponding values. So you never have *set* this in HTML in the first place. – Willem Van Onsem Aug 01 '19 at 08:59
  • @WillemVanOnsem Thanks a lot for the clarification! Can you suggest any alternative method of achieving this? – Anubhav Das Aug 01 '19 at 09:03
  • Please cut your problem into smaller pieces. What is the difference between the hardcoded url (works) and the url in the html (does not work)? – guettli Aug 01 '19 at 09:12
  • @guettli The reason for the problem is the one pointed out in the first comment. – Anubhav Das Aug 01 '19 at 09:20

0 Answers0