Rails 4 - JS для зависимых полей с простой формой

Я пытаюсь сделать приложение в Rails 4.

Я использую простую форму для форм и просто пытаюсь использовать gem-зависимые поля-рельсы, чтобы скрыть или показать вопросы подмножества на основе поля формы основного вопроса.

Я застреваю.

Я добавил драгоценные камни в свой файл gem для:

gem 'dependent-fields-rails'
gem 'underscore-rails'

Я обновил приложение application.js:

//= require dependent-fields
//= require underscore

У меня есть форма, которая имеет:

<%= f.simple_fields_for :project_date do |pdf| %>
  <%= pdf.error_notification %>

                <div class="form-inputs">


                    <%= pdf.input :student_project, as: :radio_buttons, :label => "Is this a project in which students may participate?", autofocus: true %>


                    <div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="true">


                    <%= pdf.input :course_project, as: :radio_buttons, :label => "Is this a project students complete for credit towards course assessment?" %>

                    <%= pdf.input :recurring_project, as: :radio_buttons, :label => "Is this project offered on a recurring basis?" %>

                    <%= pdf.input :frequency,  :label => "How often is this project repeated?", :collection => ["No current plans to repeat this project", "Each semester", "Each year"] %>
                    </div>

                    <div class='row'>
                        <div class="col-md-4">
                            <%= pdf.input :start_date, :as => :date_picker, :label => "When do you want to get started?"  %>
                        </div>  
                        <div class="col-md-4">
                            <%= pdf.input :completion_date,  :as => :date_picker, :label => "When do you expect to finish?" %>
                        </div>
                        <div class="col-md-4">          
                            <%= pdf.input :eoi, :as => :date_picker, :label => 'When are expressions of interest due?' %>
                        </div>
                    </div>
                </div>  
        <% end %>

<script type="text/javascript">
  $('.datetimepicker').datetimepicker();
</script>

<script>
$(document).ready(function() {
    DependentFields.bind()
});
</script>

Я не знаю много о javascript.

Я не уверен, нужен ли последний script абзац или если камень помещает это в код для вас. Я не уверен, что он должен быть выражен внутри тегов script, и я также не знаю, t знать, как реализовать это требование (которое указано на странице gem для зависимых полей):

"Be sure to include underscorejs and jquery in your page."

Как вы включаете underscorejs и jQuery на странице? Я имею их в своем файле gem. Это достаточно или что-то еще требуется для выполнения этой работы?

В настоящее время, когда я пробую эту форму, ничего не скрывается. Я попытался заменить истинное значение на "да", но это тоже не имеет никакого значения.

<div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="true">

<div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="yes">

Кто-нибудь может увидеть, где я ошибся?

Ответ 1

Я думаю, что вы перескакиваете атрибут collection при определении переключателя.

Если вы посмотрите на пример документации, вы увидите, что они используют collection для определения значений переключателя. Затем они используют одно из значений, определенных для установки атрибута data-radio-value.

Попробуйте это и сообщите мне:

<div class="form-inputs">

  <%= pdf.input :student_project, as: :radio_buttons, autofocus: true,
      :label => "Is this a project?", :collection => ['Yes', 'No'] %>

  <div class="js-dependent-fields" data-radio-value='Yes' 
       data-radio-name="project_date[student_project]">
    ...
  </div>

</div>

Обновление

Если вы посмотрите на этот проект, application.js содержит требуемые библиотеки в другом порядке, чем вы. Это может быть ошибка.

Обратите внимание, что вам требуются библиотеки следующим образом:

//= require dependent-fields
//= require underscore

В то время как проект проекта требует библиотеки таким образом:

//= require underscore
//= require dependent-fields

Надеюсь на эту помощь!

Ответ 2

"Be sure to include underscorejs and jquery in your page."

Rails делает это автоматически. Он добавляет jQuery в файл application.js при настройке, поэтому, если вы не удалили эту строку, мы можем перейти к шагу 2:

Вам нужно включить application.js script на свою страницу. Вы можете сделать это в представлении, над которым работаете, но если вы будете использовать javascript где-то еще в своем приложении, я рекомендую добавить javascript к вашему макету приложения, поэтому он будет применяться ко всем страницам, использующим этот макет.

Этот файл находится под app/views/layouts/application.html.erb, по умолчанию.

Эта строка кода (или что-то вроде этого) должна быть добавлена в ваш файл, чтобы загрузить сценарии с вашими представлениями:

<%= javascript_include_tag "application" %>

Он позволит вам получить доступ ко всему javascript-коду.

Edit:

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

<div class="js-dependent-fields[data-select-id='filing_<INPUT_ID>' data-option-value='<VALUE>']"> 
   ... fields ...
</div>

Вы должны заменить <INPUT_ID> на идентификатор ввода, на который эти поля зависят, и <VALUE> с соответствующим значением, которое должно иметь <INPUT_ID>.