Rails, Simple Form and Javascript show/hide script

Question

Im using simple form with my Rails 4 app.

I have a projects model, a scope model and a data model.

Projects accept nested attributes for scopes. Scopes accept nested attributes for data.

In the new project form, I have a question asking users to specify the scope of their project. If they check data as true (being required within the scope), then I want to show another set of questions about the data.

In my new projects form I have this question (nested for scopes) to check whether the project scope includes data:

 <%= f.simple_fields_for :scopes do |s| %>
                        <%= s.input :data, :as => :boolean, :label => false, :inline_label => true, { :class => 'toggle_div', target: 'div id="datarequest"'}   %>

            <%= s.input :materials, :as => :boolean, :label => false,  inline_label: 'Equipment or materials' %>

            <% end %>

I then have a div id="datarequest", which I want to target the javascript on the above :data question so that if data is checked, then the questions inside this div are shown. if it is unchecked, then they are hidden. The attributes for these questions are in the data table:

<div id="datarequest">
        <div class="headerquestion-project">Data request</div>

        <%= f.simple_fields_for :datum do |d| %>
            <% render %>
            <%= d.input :prim_sec, label: 'What sort of data do you want?', label_html: {class: 'dataspace'}, collection: ["Primary", "Secondary", "Both" ], prompt: "Choose one" %>
            <%= d.input :qual_quant, label: 'Do you need qualitative or quantitative data?', label_html: {class: 'dataspace'}, collection: ["Qualitative", "Quantitative", "Both" ], prompt: "Choose one" %>

        <% end %>
</div

I have a file in my js coffee folder called form-helper. It contains:

$ ->
  $(document).on 'change', 'input.toggle_div', ()->
    $($(this).attr('target')).toggle this.checked      

  $(document).on 'change', 'input.toggle_radio', ()->
    reverse = $(this).attr('toggle_reverse')
    if reverse
      toggle_value = ($(this).val() == 'false')
    else
      toggle_value = ($(this).val() == 'true')
    target = $(this).attr('target')
    $(target).toggle toggle_value

Can anyone see what i've done wrong in the :data line? It seems my errors start there.

Thank you

Answer 1

Your selector in target looks wrong. Change div id="datarequest" to #datarequest . If there is something else, please post the outputted HTML.

For reference, to toggle a div based on checkbox state you could do the following quite simply:

 $('.checkbox-class').change(function(e) { $($(this).data('toggle-div')).toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="form-group"> <div class="checkbox"> <label><input type="checkbox" class="checkbox-class" data-toggle-div="#div-id">Toggle #div-id</label> </div> </div> <div id="div-id" style="display:none"> Lorem ipsum dolor sit amet, justo tamquam vix et, nec ut illum omnesque consequat. Sea ex idque placerat. Has no admodum pericula sapientem. Sit mollis noluisse definitionem ei. Ea illud discere deleniti qui, verear eruditi dissentiunt in pri. </div>