Bootstrap modal ne prend pas l'id correcte dynamiquement

Question

J'ai ce code écrit en ruby ​​sur les rails et mince. Dans le code ci-dessous, j'essaie de boucler toutes les leçons que j'ai et de les afficher. En outre, chaque leçon a un bouton de question qui génère une boîte de dialogue (bootstrap modal) qui prend l'entrée de question, l'identifiant de leçon lié à cette question et l'enregistre dans la base de données. Le problème avec ce code est que chaque bouton de question prend le lesson_id de la première leçon seulement. Peu importe la question sur laquelle je clique, elle prend toujours l'identifiant de la première leçon. Maintenant, je pense que le problème ici est bootstrap modal est javascript donc il charge après que le contenu entier est chargé, c'est pourquoi je reçois cette erreur. Mais je ne suis pas sûr de savoir comment résoudre ce problème. S'il vous plaît aidez-moi avec ce problème. Je vous remercie.

`-lessons.each do |lesson| 
    span.pull-right 
    a[data-open="exampleModal2"] 
     i.fa.fa-question[aria-hidden="true"] 
    #exampleModal2.reveal[data-reveal] 
     h1 
     center 
      | Ask question 
     = simple_form_for Question.new, url: lesson_questions_path(lesson.id), method: :post do |f| 
      = lesson.name 
      = f.input :title, label: "Question" 
      = f.input :content, label: "Question Description" 
      = f.button :submit 
      button.close-button aria-label=("Close modal") data-close="" type="button" 
      span aria-hidden="true" ×` 

Answer 1

Votre problème est id attribut pas changé après chaque itération qui vous laisse avec plusieurs éléments partageant le même identifiant et donc avec modaux brisé Bootstrap et HTML invalide.

Vous devez changer ceci:

#exampleModal2.reveal[data-reveal] 

avec quelque chose comme ceci:

.reveal[data-reveal id=lesson.id] 

Ne pas oublier de mettre à jour a[data-open="exampleModal2"] en conséquence. Je ne me souviens pas comment Bootstrap ouvre les modaux, mais si c'est par l'attribut data-open, alors ça devrait l'être.