Rails 4 - Conditional JS with dependent-fields-rails

Question

I'm trying to figure out how to use dependent-fields-rails gem with my Rails 4 app.

I'm lost.

I have included underscore.js in my vendor javascripts folder and updated my application.js to include (right at the bottom, just above require tree):

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


$(document).ready(function() {
    DependentFields.bind()
});

In my simple form, I have:

<%= f.input :has_milestones, as: :boolean, boolean_style: :inline, :label => 'Any decision points?', id: 'check_project_milestones' %>

<%= content_tag :div, class: 'js-dependent-fields', data: {'checkbox-id': 'check_project_milestones', 'checkbox-value': 'true' } do %>        

  <div class="intpol2">
    Milestones
  </div>

  <%= f.simple_fields_for :milestones do |f| %>
    <%= render 'milestones/milestone_fields', f: f %>
  <% end %>
<% end %>

However, when I restart the server and render the form, the first question which has the div id, is shown (which the check box unticked) and the content inside the content tag is also showing. I want it to be hidden until the checkbox is checked.

I found a tutorial on driftingruby.com which shows how to set this up. The only thing I can guess is that maybe turbo links is required to make this work?? I have it disabled because I use olark.

When I inspect the console for errors, I can see this one, which appears to be relevant:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (underscore-min.map, line 0)

I should also add that I tried everything suggested in answer to my earlier question on this problem, but wasn't able to find a solution: Rails 4 - JS for dependent fields with simple form

Can anyone see what I've done wrong?

Answer 1

What you're experiencing is source mapping. This allows you to debug with readable code in your browser's developer tools when working with minified JS files.

The minified version of Underscore has this line at the end of the file:

//# sourceMappingURL=underscore-min.map

Your browser's developers tools will try to download underscore-min.map when encountering this line.

If you want to get rid of the error, either:

1. Remove that line from underscore-min.js
2. Add underscore-min.map and underscore.js to your project.