[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é.

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

• Supprimer le bouton <a uk-icon="icon: trash" href="#modal" uk-toggle> </a> href =" # modal " et associer au modal dont l'identifiant est "modal" Être terminé.
• <div id =" modal "uk-modal> Le code suivant implémente la fonction modale.

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

• Attribuez un identifiant pour chaque message en définissant l'identifiant cible du bouton de suppression sur href =" # modal {% post.pk%} " et en définissant l'identifiant modal sur ʻid = "modal {% post.pk%}" ` Il est devenu possible de supprimer correctement le message spécifié.