[Mémo Django] Échec lors de l'installation de modal

introduction

Lors de la création d'un site de publication de photos avec Django, j'ai implémenté le mode de suppression des publications à l'aide du framework CSS UIkit. Cependant, le message que je voulais initialement supprimer n'a pas disparu et il y avait un problème avec la publication de messages sans rapport, alors j'ai enquêté sur la cause.

Statut actuel

Punaise

L'image suivante est un modal qui apparaît lorsque vous cliquez sur le bouton de suppression du poste n ° 1, mais le poste cible est le n ° 3 et si vous cliquez sur "OK", le poste n ° 3 sera supprimé. スクリーンショット 2020-07-06 10.41.26.png

code

{% for post in user_post %}
réduction
  {#Supprimer le bouton ci-dessous#}
  <a uk-icon="icon: trash" href="#modal" uk-toggle></a>
    {#Sous modal#}
    <div id="modal" uk-modal>
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">
Confirmation de suppression après
        </h2>
        <p>
Publier: {{ post.title }}Supprimer. Est-ce que c'est bon?
        </p>
        <p class="uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">
Annuler
          </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

La cause est que le bouton de suppression (ou modal) correspondant à chaque article différent est géré avec le même nom d'identifiant tel que ʻid = "modal" `, donc lorsque vous cliquez sur le bouton de suppression, quel numéro est le message sur lequel vous venez de cliquer? On ne savait pas s'il s'agissait d'un poste de, et à quel modal il était associé, et il se comporterait étrangement. En d'autres termes, il est nécessaire de changer l'id cible du bouton de suppression et l'id modal en fonction de la publication.

Solution

{% for post in user_post %}
réduction
  {#Supprimer le bouton ci-dessous#}
  <a uk-icon="icon: trash" href="#modal{% post.pk %}" uk-toggle></a>             #Changement
    {#Sous modal#}
    <div id="modal{% post.pk %}" uk-modal>                                       #Changement
      <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">
Confirmation de suppression après
        </h2>
        <p>
Publier: {{ post.title }}Supprimer. Est-ce que c'est bon?
        </p>
        <p class="uk-text-right">
          <button class="uk-button uk-button-default uk-modal-close" type="button">
Annuler
          </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

[Mémo Django] Échec lors de l'installation de modal
[Django] Mémo lorsque le journal n'était pas
Mémo d'apprentissage Django
mémo du didacticiel django
mémo de déploiement heroku (Django)
Essayez d'installer Sonnet (Remarque)
Trébuché lors de l'installation de PyOCR
Django memo n ° 1 à partir de zéro
Précautions lors de l'installation de fbprophet
Mémo quand Django est sorti sur VPS (préparation)
[Memo] Environnement de développement Django
Notes de travail lors de l'installation de mitmproxy
Paramètres de DEBUG lors de l'utilisation de Django
Erreur Polyfit lors de l'installation de matplotlib
[Mémo d'apprentissage] Résumé de la commande Django