Как заставить все теги delete href работать с java-скриптами, если щелкнуть в Django - PullRequest
Новая
       50

Как заставить все теги delete href работать с java-скриптами, если щелкнуть в Django

0 голосов
/ 29 мая 2019

Я написал java-скрипт для поля подтверждения перед удалением комментариев. Если пользователь нажимает кнопку «Удалить», должен появиться флажок для подтверждения удаления. Если у меня есть серия комментариев одного и того же пользователя, поскольку я печатаю комментарии в цикле, логика сценария Java остается с первым комментарием удаления, пока я его не удалю. Если я говорю «нет» и пытаюсь удалить второй комментарий, логика java-скрипта не работает. Может ли кто-нибудь помочь мне с этим вопросом. Если мне нужно разместить логику Java-сценария где-то еще в коде. Это признает? 

<div class="container">
<h2 class="text-center">User Comments</h2>

{% for comment in comments%}
   <p class="text-secondary text-center">{{ comment.created }}</p>
   <p> {{ comment.body }} </p>
   {% if comment.user == request.user.username %}
      <a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'comment-update' comment.id %}">Update Comment</a>
      <a class="btn btn-danger btn-sm mt-1 mb-1"  id="delete-object" >Delete Comment
      <script type="text/javascript">
         document.getElementById("delete-object").onclick = function(){
            if (confirm('Delete the comment')){
                alert('hi');
                #Link to delete comment}}
      </script>

    {% endif %}

1 Ответ

0 голосов
/ 29 мая 2019

Вы присваиваете один и тот же id нескольким тегам a.id должно быть уникальным в документе.

Попробуйте добавить что-то вроде 

<div class="container">
<h2 class="text-center">User Comments</h2>

{% for comment in comments%}
   <p class="text-secondary text-center">{{ comment.created }}</p>
   <p> {{ comment.body }} </p>
   {% if comment.user == request.user.username %}
      <a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'comment-update' comment.id %}">Update Comment</a>
      <a class="btn btn-danger btn-sm mt-1 mb-1"  data-action="delete-object" >Delete Comment
      <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            deleteLinks = document.querySelectorAll('[data-action="delete-object"]')
            deleteLinks.forEach(link => {
                link.addEventListener('click', function() {
                    if (confirm('Delete the comment')) {
                        alert('hi')
                        # link to the comment
                    }
                })
            })
        })
      </script>
    {% endif %}
{% endfor % }
...