Rails 4 - JS for dependent fields with simple form

Question

I am trying to make an app in Rails 4.

I am using simple form for forms and have just tried to use gem 'dependent-fields-rails' to hide or show subset questions based on the form field of a primary question.

I'm getting stuck.

I have added gems to my gem file for:

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

I have updated my application.js to:

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

I have a form which has:

<%= 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>

I don't know much about javascript.

I"m not sure if the final script paragraph is necessary or if the gem puts that into the code for you. I'm not sure if it's supposed to be expressed inside script tags and I also don't know how to give effect to this requirement (which is set out on the gem page for dependent-fields):

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

How do you include underscorejs and jQuery in a page? I have them in my gem file. Is that enough or is something else required to make this work?

Currently, when I try this form, nothing is hidden. I have tried swapping the true value to 'yes' but that doesnt make any difference either.

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

Can anyone see where I've gone wrong?

Answer 1

I think that you are jumping the collection attribute when you define the radio button.

If you look at the documentation example, you will see that they use the collection to define the values of the radio button. Then they use one of the values defined to set data-radio-value attribute.

Try this and let me know:

<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>

Update

If you look at this example project, the application.js file includes the required libraries in a different order than you. This could be the error.

Note that you are requiring the libraries in this way:

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

While the example project require the libraries in this way:

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

Hope this help!

Answer 2

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

Rails does this automatically. It adds jQuery to the application.js file on setup, so if you haven't deleted that line, we can jump to step 2:

You need to include the application.js script to your page. You can do that in the view you're working on, but if you'll use javascript somewhere else on your app, I recommend adding the javascript to your application's layout, so it will be applied to all pages using that layout.

That file is located under app/views/layouts/application.html.erb, by default.

This line of code (or something like this) must be added to your file in order to load the scripts with your views:

<%= javascript_include_tag "application" %>

It will allow you to access all the javascript code.

Edit:

Besides that, I noticed you're missing the clauses for displaying your fields. In the documentation of dependent-fields, it's stated that you have to specify on what field you depend and what the value is on the class of your element, something like this:

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

You should replace <INPUT_ID> with the id of the input that these fields depend on and <VALUE> with the corresponding value that <INPUT_ID> must have.