Rails создает динамический модальный шаблон

У меня есть страница со списком кнопок с упражнениями (упражнение 1, упражнение 2 и т. д.)

Когда вы нажимаете одну кнопку, появляется модальное окно, информирующее вас о деталях упражнения + кнопка отправки.

У меня вопрос: могу ли я создать модальный шаблон с динамическими URL-адресами для каждого упражнения? Я не хочу создавать одно и то же модальное окно для каждого упражнения.

Модальный пример:

<%= form_for @db, url: start_db_path, validate: true, :html => { :id => "startDb" } do |f| %>
<div class = "modal fade" id = "StartDBModal" tabindex = "-1" role = "dialog" aria-labelledby = "StartDBModal" aria-hidden = "true">
      <div class = "vertical-alignment-helper">
        <div class = "modal-dialog vertical-align-center">
           <div class = "modal-dialog" role = "document">
               <div class = "modal-content">
                   <div class = "modal-header text-center">
                       <h4 class = "modal-title modalText title_bold">Start your Oracle Database</h4>
                   </div>
                   <div class = "modal-body">
                       <div class = "md-form mb-5" style = "text-align: center;">
                           <i class = "fa fa-database icon-sizeB"><label class = "modalText">Your database is:</label></i>
                           <% if $personal_db.nil? %>
                              <%= f.text_field :linuxuser, autofocus: true, :class => "form-controlS", value: "DB does not exist yet", readonly: true, :id => "nodbId" %>
                           <% else %>
                              <%= f.text_field :linuxuser, autofocus: true, :class => "form-controlS", value: $personal_db.dbname, readonly: true, :id => "startId" %>
                           <% end %> 
                       </div>
                    </div>
                          <div class = "modal-footer" style = "text-align: center;">
                             <%= f.button "Start Database", :class => "btn btn-warning", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Starting the database..."} %>
                          </div>
                      </div>

           </div>
        </div><!-- /.vertical-align-center -->
      </div><!-- /.alignment-helper -->
</div><!-- /.modal -->
<!-- /.Start Oracle Database Modal -->
<% end %>

Я хочу, чтобы этот URL-адрес был динамическим и одинаковым для каждой кнопки упражнения, но с разными URL-адресами.

Спасибо, Разван

Да, ты можешь. Большинство лайтбоксов / модальных реализаций, которые я видел, включая бутстрап (который, похоже, вы здесь используете) поддерживают включение динамического контента. Обратитесь к документации.

Sergio Tulentsev 25.06.2018 14:18

Привет, то, что я пытаюсь сделать, можно каким-то образом сделать с помощью javascript. Но мне интересно, есть ли другой способ (более простой)

Razvan Vasile 25.06.2018 16:50
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
2
81
0

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