【Djangoメモ】モーダルを設置する際の失敗

はじめに

　Djangoで写真投稿サイトを作成中、投稿を削除する際のモーダルをCSSフレームワークUIkitを用いて実装した。しかし本来削除されてほしい投稿が消えずに、関係ない投稿がされる不具合が生じたため、原因を調べてみた。

現状

不具合

　以下の画像は１番という投稿の削除ボタンをクリックした時に出現するモーダルであるが対象の投稿が３番になっており「OK」をクリックすると３番の投稿が削除されてしまう。

　

コード

{% for post in user_post %}
  省略
  {# 以下削除ボタン #}
  <a uk-icon="icon: trash" href="#modal" uk-toggle></a>
    {# 以下モーダル #}
    <div id="modal" uk-modal>
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">
          投稿削除確認
        </h2>
        <p>
          投稿: {{ post.title }} を削除します。よろしいですか？
        </p>
        <p class="uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">
            キャンセル
          </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 %}

• 削除ボタン<a uk-icon="icon: trash" href="#modal" uk-toggle></a>のhref="#modal"でidが"modal"であるモーダルと結び付けられる。
• <div id="modal" uk-modal>以下のコードでモーダル機能を実装している。

原因

　原因はそれぞれの異なる投稿に対応する削除ボタン（あるいはモーダル）がid="modal"というように等しいid名で管理されているため、削除ボタンをクリックした時に今クリックされた投稿が何番目の投稿なのか、加えて、どのモーダルと紐づけられているのかが不明であり、おかしな動きをしてしまうということであった。
　つまり削除ボタンの対象idとモーダルのidを投稿によって変える必要がある。

解決策

{% for post in user_post %}
  省略
  {# 以下削除ボタン #}
  <a uk-icon="icon: trash" href="#modal{% post.pk %}" uk-toggle></a>             #変更
    {# 以下モーダル #}
    <div id="modal{% post.pk %}" uk-modal>                                       #変更
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">
          投稿削除確認
        </h2>
        <p>
          投稿: {{ post.title }} を削除します。よろしいですか？
        </p>
        <p class="uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">
            キャンセル
          </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 %}

• 削除ボタンの対象idをhref="#modal{% post.pk %}"モーダルのidをid="modal{% post.pk %}"とすることで投稿別にidを付与することが可能となり、指定した投稿を正しく削除することができた。