[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. スクリーンショット 2020-07-06 10.41.26.png

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 %}

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 %}

Recommended Posts

[Django memo] Failure when installing modal
[Django] A memo when log was not
Django Learning Memo
django tutorial memo
heroku deployment memo (Django)
Try installing Sonnet (memo)
Stumbled when installing PyOCR
Django memo # 1 from scratch
Precautions when installing fbprophet
A memo when Django was released on VPS (preparation)
[Memo] Django development environment
Work memo when introducing mitmproxy
DEBUG settings when using Django
polyfit error when installing matplotlib
[Learning memo] Django command summary