[PYTHON] [Django-Memo] Fehler bei der Installation von Modal

Einführung

Beim Erstellen einer Fotoposting-Site mit Django habe ich das Modal zum Löschen von Posts mithilfe des CSS-Framework-UIkits implementiert. Der Beitrag, den ich ursprünglich löschen wollte, verschwand jedoch nicht, und es gab ein Problem, dass nicht verwandte Beiträge veröffentlicht wurden, sodass ich die Ursache untersuchte.

Aktueller Status

Fehler

Das folgende Bild ist ein Modal, das angezeigt wird, wenn Sie auf die Schaltfläche "Löschen" von Beitrag Nr. 1 klicken. Der Zielbeitrag ist jedoch Nr. 3. Wenn Sie auf "OK" klicken, wird der Beitrag Nr. 3 gelöscht.

Code

{% for post in user_post %}
Kürzung
  {#Schaltfläche Löschen unten#}
  <a uk-icon="icon: trash" href="#modal" uk-toggle></a>
    {#Unten modal#}
    <div id="modal" uk-modal>
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">
Bestätigung nach dem Löschen
        </h2>
        <p>
Post: {{ post.title }}Löschen. Ist es o.k?
        </p>
        <p class="uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">
Stornieren
          </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 %}

• Löschen Sie die Schaltfläche <a uk-icon="icon: trash" href="#modal" uk-toggle> </a> href =" # modal " und verknüpfen Sie sie mit Modal, dessen ID "modal" ist. Getan werden.
• <div id =" modal "uk-modal> Der folgende Code implementiert die Modalfunktion.

Ursache

Die Ursache ist, dass die Schaltfläche zum Löschen (oder Modal), die den einzelnen Posts entspricht, mit demselben ID-Namen wie "id =" modal "" verwaltet wird. Der Beitrag, auf den gerade beim Klicken auf die Schaltfläche "Löschen" geklickt wurde, ist also die Nummer Es war unklar, ob es von gepostet wurde und mit welchem Modal es verbunden war, und es würde sich seltsam verhalten. Mit anderen Worten, es ist notwendig, die Ziel-ID der Schaltfläche "Löschen" und die modale ID je nach Beitrag zu ändern.

Lösung

{% for post in user_post %}
Kürzung
  {#Schaltfläche Löschen unten#}
  <a uk-icon="icon: trash" href="#modal{% post.pk %}" uk-toggle></a>             #Veränderung
    {#Unten modal#}
    <div id="modal{% post.pk %}" uk-modal>                                       #Veränderung
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">
Bestätigung nach dem Löschen
        </h2>
        <p>
Post: {{ post.title }}Löschen. Ist es o.k?
        </p>
        <p class="uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">
Stornieren
          </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 %}

• Weisen Sie jedem Beitrag eine ID zu, indem Sie die Ziel-ID der Schaltfläche "Löschen" auf "href =" # modal {% post.pk%} "und die modale ID auf" id = "modal {% post.pk%}" setzen Es wurde möglich, den angegebenen Beitrag korrekt zu löschen.