Rails 4 - JS for dependent fields with simple form : <p>I am trying to make an app in Rails 4.</p>

<p>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.</p>

<p>I'm getting stuck.</p>

<p>I have added gems to my gem file for:</p>

<pre><code>gem 'dependent-fields-rails'
gem 'underscore-rails'
</code></pre>

<p>I have updated my application.js to:</p>

<pre><code>//= require dependent-fields
//= require underscore
</code></pre>

<p>I have a form which has:</p>

<pre><code>&lt;%= f.simple_fields_for :project_date do |pdf| %&gt;
  &lt;%= pdf.error_notification %&gt;

                &lt;div class="form-inputs"&gt;


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


                    &lt;div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="true"&gt;


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

                    &lt;%= pdf.input :recurring_project, as: :radio_buttons, :label =&gt; "Is this project offered on a recurring basis?" %&gt;

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

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

&lt;script type="text/javascript"&gt;
  $('.datetimepicker').datetimepicker();
&lt;/script&gt;

&lt;script&gt;
$(document).ready(function() {
    DependentFields.bind()
});
&lt;/script&gt;
</code></pre>

<p>I don't know much about javascript. </p>

<p>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):</p>

<pre><code>"Be sure to include underscorejs and jquery in your page."
</code></pre>

<p>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?</p>

<p>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.</p>

<pre><code>&lt;div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="true"&gt;

&lt;div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="yes"&gt;
</code></pre>

<p>Can anyone see where I've gone wrong?                           </p>
