0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-07-06

はじめに

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

現状

不具合

 以下の画像は1番という投稿の削除ボタンをクリックした時に出現するモーダルであるが対象の投稿が3番になっており「OK」をクリックすると3番の投稿が削除されてしまう。
スクリーンショット 2020-07-06 10.41.26.png
 

コード

{% 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を付与することが可能となり、指定した投稿を正しく削除することができた。
     
0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?