[Django memo] Failure when installing modal

Introduction

While creating a photo posting site in Django, I implemented a modal for deleting posts using the CSS framework UIkit. However, the post that I originally wanted to be deleted did not disappear, and there was a problem that unrelated posts were posted, so I investigated the cause.

Current status

Bug

The image below is a modal that appears when you click the delete button for post No. 1, but the target post is No. 3 and clicking "OK" will delete the post No. 3.

code

{% for post in user_post %}
abridgement
  {#Delete button below#}
  <a uk-icon="icon: trash" href="#modal" uk-toggle></a>
    {#Modal below#}
    <div id="modal" uk-modal>
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">
Post deletion confirmation
        </h2>
        <p>
Post: {{ post.title }}To delete. Is it OK?
        </p>
        <p class="uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">
Cancel
          </button>
          <a href="{% url 'sns:my_page_remove' post.pk %}">
            <button class="uk-button uk-button-primary" type="button">
              OK
            </button>
          </a>
        </p>
      </div>
    </div>
{% endfor %}

• Associate with modal with id "modal" with href =" # modal " of delete button<a uk-icon="icon: trash" href="#modal" uk-toggle> </a> Be done.
• <div id =" modal "uk-modal> The following code implements the modal function.

Cause

The cause is that the delete button (or modal) corresponding to each different post is managed with the same id name such as ʻid = "modal" `, so the post that was just clicked when clicking the delete button is the number. It was unclear which modal it was associated with, and it would behave strangely. In other words, it is necessary to change the target id of the delete button and the modal id depending on the post.

solution

{% for post in user_post %}
abridgement
  {#Delete button below#}
  <a uk-icon="icon: trash" href="#modal{% post.pk %}" uk-toggle></a>             #Change
    {#Modal below#}
    <div id="modal{% post.pk %}" uk-modal>                                       #Change
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">
Post deletion confirmation
        </h2>
        <p>
Post: {{ post.title }}To delete. Is it OK?
        </p>
        <p class="uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">
Cancel
          </button>
          <a href="{% url 'sns:my_page_remove' post.pk %}">
            <button class="uk-button uk-button-primary" type="button">
              OK
            </button>
          </a>
        </p>
      </div>
    </div>
{% endfor %}

• Assign an id for each post by setting the target id of the delete button to href =" # modal {% post.pk%} " and setting the modal id to ʻid =" modal {% post.pk%} "` It became possible to delete the specified post correctly.