Bootstrap модал не принимает правильный идентификатор динамически

У меня этот код написан на ruby ​​на рельсах и slim. В приведенном ниже коде я пытаюсь просмотреть все уроки, которые у меня есть, и отобразить их. Кроме того, в каждом уроке есть кнопка вопроса, которая генерирует всплывающее окно (модал начальной загрузки), которое принимает входные данные вопроса, lesson_id, связанный с этим вопросом, и сохраняет его в базе данных. Проблема с этим кодом состоит в том, что каждая кнопка вопроса берет lesson_id только первого урока. Независимо от того, на какой вопрос урока я нажимаю, он всегда имеет идентификатор первого урока. Теперь я думаю, что проблема здесь в том, что мод начальной загрузки - это javascript, поэтому он загружается после загрузки всего содержимого, поэтому я получаю эту ошибку. Но я не уверен, как мне решить это. Пожалуйста, помогите мне с этой проблемой. Спасибо.

`-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"  ×`

1 ответ

Ваша проблема id атрибут не изменяется после каждой итерации, что оставляет вас с несколькими элементами, имеющими один и тот же идентификатор, и, следовательно, со сломанными модальностями Bootstrap и неверным HTML

Вы должны изменить это:

#exampleModal2.reveal[data-reveal]

с чем-то вроде этого:

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

Не забудьте обновить a[data-open="exampleModal2"] соответственно. Я не помню, как Bootstrap открывает модалы, но если это через data-open атрибут, то это должно быть так.

Другие вопросы по тегам