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?

I don't have a line in my underscore.js that has "sourceMapping" in it — Mel
– Mel, Commented Apr 23, 2016 at 6:16
The error is very clear, something is referencing the map file whether you like it or not. — prusswan
– prusswan, Commented Apr 23, 2016 at 9:12

SimranTea · Accepted Answer · 2016-04-23 05:52:07Z

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:

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

answered Apr 23, 2016 at 5:52

SimranTea

1141 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mel Over a year ago

I didn't add the production version (minified) of underscore.js to my javascript folder. I added the dev version, which I understand has not been minifed. Do you think your answer is relevant given I don't have the min file in my project?

Mel Over a year ago

Do I need to save underscore-min.map with a .js extension? Presumably I also need to add it to application.js?

Mel Over a year ago

I tried adding underscore-min.map file to my vendor/javascripts and then precompiling assets. I tried again, but the js dependent fields still doesnt work

Mel Over a year ago

When I try requiring that file to app/assets/javascripts/application.js, I get an error that says: couldn't find file 'underscore-min.map' with type 'application/javascript'

SimranTea Over a year ago

install gem 'underscore-rails' and then bundle it and restart the rails server.

|

Community · Accepted Answer · 2017-05-23 11:52:43Z

0

Did you also added the min maps on vendor?

The source maps are used for javascript debugging on your browser

You can download it on underscore js as well: where is written

source map

or: http://underscorejs.org/underscore-min.map

See also: Rails Assets - 404 with .map extension

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Apr 20, 2016 at 11:19

AndreDurao

5,8557 gold badges46 silver badges66 bronze badges

Collectives™ on Stack Overflow

Rails 4 - Conditional JS with dependent-fields-rails

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related