Rails 6 (и возможно Ajax?) Как добавить вопрос формы при выборе определенного выпадающего списка - PullRequest
Новая
       4

Rails 6 (и возможно Ajax?) Как добавить вопрос формы при выборе определенного выпадающего списка

1 голос
/ 15 января 2020

Вот что я пытаюсь сделать. На моем «Создать назначение» я хочу, чтобы вопрос «Ссылка» отображался ТОЛЬКО, если в раскрывающемся списке на типе подборки выбрано «Видео». 

<%= render 'shared/errors', obj: @assignment %>


<%= form_for(@assignment, :html => {class: "form-horizontal", role: "form"}) do  |f| %>
    <div class="form-group">
        <div class = "xtrapadding">
            <%=f.label "Select Unit(s) for Assignment"%>
            <%= f.collection_select(:unit_ids, Unit.all, :id, :name, {placeholder: "Units"}, {multiple: true} )%>

        </div>
          <div class="form-group">
            <%= f.label :assignment_type %>
            <%= f.select :assignment_type, options_for_select(Assignment.options, params[:type]), {}, required: true, class: 'form-control' %>
          </div>
        <div>
              <%= f.text_field :name, class:"form-control", placeholder: "Title of Assignment", autofocus: true %> 
        </div>
        <div class="field">
            <b><%= f.label :description %></b>
            <%= f.rich_text_area :description %>
        </div>
        <div>
            <%= f.text_field :duedate, class: "datepicker", placeholder: "Due Date"%>
        </div>
        <div>
              <%= f.text_field :link, class:"form-control", placeholder: "Insert video link", autofocus: true %> 
        </div>
        <div class="form-group" id="submitbutton">
            <div align = "center">
                <%= f.submit  class: "btn waves-effect waves-light" %>
            </div>
        </div>
    </div>
<%end%>

Это последний вопрос, который я хочу показать или скрыть на основе ссылки. Я хочу, чтобы по умолчанию он был скрыт, но был виден, когда выпадающий список выбран с определенным значением. Я вполне уверен, что мне нужно использовать Ajax, но кроме этого я не совсем уверен, с чего начать. Спасибо! Кстати, я использую Webpacker и Rails 6.

1 Ответ

1 голос
/ 15 января 2020

Когда вы хотите показать или скрыть что-то на странице, вы делаете , используете Javascript. Тем не менее, Ajax появится только в том случае, если вы захотите асинхронно извлечь данные на сервер, а затем перетащить результат этого запроса на вашу веб-страницу без повторного рендеринга всей страницы.

В вашем примере, когда страница загружается, у вас есть все, что вам нужно, уже на странице, поэтому нет необходимости в Ajax. Есть несколько способов решить вашу проблему, но версия td; dr - «Использовать Javascript».

Вероятно, это будет примерно так:

  1. Поместите прослушиватель событий в выпадающее меню: когда выбор сделан пользователем, он вызовет несколько различных javascript Мероприятия. Вам нужно определить «слушатель», который будет вызывать функцию (которую вы напишете), когда это событие сработает. В этом случае вы можете использовать что-то вроде object.addEventListener("select", myScript). Это будет go для каждого элемента в раскрывающемся списке, а затем функция myScript будет проверять значение или идентификатор выбранного элемента. Если это не «Видео», выйдите из функции. Если это IS 'Видео', go к шагу 2 ...
  2. Измените какой-либо атрибут скрытого элемента, чтобы он стал видимым. Если вы скрываете его с помощью класса, вы можете удалить этот класс. Или вы можете использовать атрибут HTML visible. Теперь ваш товар виден. Если кто-то снова меняет свой выбор, go на шаг 3 ...
  3. То же, что и раньше, слушатель события срабатывает, но теперь мы прячемся. Это может быть та же самая функция, которая скрывала ваш элемент, если вы хотите поместить туда условную логику c, или вы можете использовать другой листер с другой функцией. Затем он будет скрывать элемент, используя любую стратегию видимости, которую вы выбрали для своей страницы.

Это распространенная путаница для людей, изучающих Rails. Rails делает много, но Javascript по-прежнему работает с DOM. Важно понимать, где проходит граница между ними. Я разместил ответ на похожий вопрос здесь, проверьте его, если хотите больше контекста.

Также вам, возможно, придется поискать способ добавить / удалить значение скрытого поля. из вашей формы отправки. Перейдите по ссылке на мой другой ответ, и там есть примечание об этом.

...