Rails 4 - jQuery (hide first, then switch) conflicts with javascript

Question

I am trying to figure out how to include jQuery and javascript in my rails 4 application. I am trying.

I have each of these gems in my gem file:

gem 'sass-rails', '~> 5.0' gem 'bootstrap-sass', '~> 3.3.5.1' gem 'jquery-rails' gem 'jquery-ui-rails' 

I have a number of conflicts (the last 5 of my questions and the last generosity relate to them). See Attached Links:

 http://stackoverflow.com/questions/36734854/rails-4-jquery-conflicts-with-javascript http://stackoverflow.com/questions/36832276/rails-4-jquery-conflicts-and-function-error http://stackoverflow.com/questions/36831987/rails-4-jquery-to-hide-initially-then-toggle-with-click http://stackoverflow.com/questions/36614651/rails-4-conditional-js-with-dependent-fields-rails 

To try to get around one aspect of these problems, I removed the pearl of the dependent rails and try to write my own function to hide the section of my projects / forms until the question is answered in this form (therefore its value is true).

I currently have a projects.js file in the app / assets / javascripts folder. He has:

 (function($){ $(document).ready(function() { $("#check_project_milestones").hide() }); })(jQuery); 

While this wording (the first and last line is new) stops one error (which before including the first and last line says "Uncaught TypeError: $ is not a function (anonymous function) @ projects.self-9c019ba .... js? "), it actually does not work to hide the text inside the id tag 'check_project_milestones'.

The form has:

 <%= f.input :has_milestones, as: :boolean, boolean_style: :inline, :label => 'Does this research project have identifiable milestones or decision points?', id: 'check_project_milestones' %> <%= content_tag :div, 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 %> <div class="row"> <div class="col-md-6"> <%= link_to_add_association 'Add a milestone', f, :milestones, partial: 'milestones/milestone_fields' %> </div> </div> 

My .js application has:

 //= require jquery //= require jquery-ui //= require bootstrap-sprockets //= require jquery_ujs //= require html.sortable //= require disqus_rails //= require moment //= require bootstrap-datetimepicker //= require pickers //= require main //= require hammer.min //= require jquery.animate-enhanced.min //= require jquery.countTo //= require jquery.easing.1.3 //= require jquery.fitvids //= require jquery.magnific-popup.min //= require jquery.parallax-1.1.3 //= require jquery.properload //= require jquery.shuffle.modernizr.min //= require jquery.sudoSlider.min //= require jquery.superslides.min //= require masonry.pkgd.min //= require rotaterator //= require smoothscrolljs //= require waypoints.min //= require wow.min //= require gmaps/google //= require chosen-jquery //= require cocoon //= require imagesloaded.pkgd.min //= require isotope.pkgd.min //= require jquery.counterup.min //= require jquery.pjax //= require custom.js //= require slider //= require underscore //= require bootstrap-slider //= require_tree . 

Can anyone see what I did wrong?

SECOND PART OF FORM

 <div id="check_project_milestones" class="hidden"> <div class="intpol2"> Milestones </div> <div class="nested-fields"> <div class="container-fluid"> <div class="form-inputs"> <div class="row"> <div class="col-md-7"> <div class="form-group string optional project_milestones_title"><label class="string optional control-label" for="project_milestones_attributes_0_title">Give this milestone a title</label><input class="string optional form-control" type="text" name="project[milestones_attributes][0][title]" id="project_milestones_attributes_0_title"></div> </div> <div class="col-md-4 col-md-offset-1"> <div class="form-group date optional project_milestones_completion_date"><label class="date optional control-label" for="project_milestones_attributes_0_completion_date_1i">When do you expect to reach this milestone?</label><div class="form-inline"><select id="project_milestones_attributes_0_completion_date_1i" name="project[milestones_attributes][0][completion_date(1i)]" class="date optional form-control"> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016" selected="selected">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> </select> <select id="project_milestones_attributes_0_completion_date_2i" name="project[milestones_attributes][0][completion_date(2i)]" class="date optional form-control"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4" selected="selected">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select id="project_milestones_attributes_0_completion_date_3i" name="project[milestones_attributes][0][completion_date(3i)]" class="date optional form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26" selected="selected">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> </div></div> </div> </div> <div class="row"> <div class="col-md-10"> <div class="form-group text optional project_milestones_description"><label class="text optional control-label" for="project_milestones_attributes_0_description">Describe what will be required to complete it</label><textarea class="text optional form-control" name="project[milestones_attributes][0][description]" id="project_milestones_attributes_0_description"></textarea></div> </div> </div> <div class="row"> <div class="col-md-10"> <div class="form-group text optional project_milestones_decision"><label class="text optional control-label" for="project_milestones_attributes_0_decision">Will project parties make a decision as to whether to take the project further at this time? If so, what are the relevant considerations?</label><textarea class="text optional form-control" name="project[milestones_attributes][0][decision]" id="project_milestones_attributes_0_decision"></textarea></div> </div> </div> </div> </div> </div> <br> <div class="row"> <div class="col-md-6"> <a class="add_fields" data-association="milestone" data-associations="milestones" data-association-insertion-template=" <div class=&quot;nested-fields&quot;> <div class=&quot;container-fluid&quot;> <div class=&quot;form-inputs&quot;> <div class=&quot;row&quot;> <div class=&quot;col-md-7&quot;> <div class=&quot;form-group string optional project_milestones_title&quot;><label class=&quot;string optional control-label&quot; for=&quot;project_milestones_attributes_new_milestones_title&quot;>Give this milestone a title</label><input class=&quot;string optional form-control&quot; type=&quot;text&quot; name=&quot;project[milestones_attributes][new_milestones][title]&quot; id=&quot;project_milestones_attributes_new_milestones_title&quot; /></div> </div> <div class=&quot;col-md-4 col-md-offset-1&quot;> <div class=&quot;form-group date optional project_milestones_completion_date&quot;><label class=&quot;date optional control-label&quot; for=&quot;project_milestones_attributes_new_milestones_completion_date_1i&quot;>When do you expect to reach this milestone?</label><div class=&quot;form-inline&quot;><select id=&quot;project_milestones_attributes_new_milestones_completion_date_1i&quot; name=&quot;project[milestones_attributes][new_milestones][completion_date(1i)]&quot; class=&quot;date optional form-control&quot;> <option value=&quot;2011&quot;>2011</option> <option value=&quot;2012&quot;>2012</option> <option value=&quot;2013&quot;>2013</option> <option value=&quot;2014&quot;>2014</option> <option value=&quot;2015&quot;>2015</option> <option value=&quot;2016&quot; selected=&quot;selected&quot;>2016</option> <option value=&quot;2017&quot;>2017</option> <option value=&quot;2018&quot;>2018</option> <option value=&quot;2019&quot;>2019</option> <option value=&quot;2020&quot;>2020</option> <option value=&quot;2021&quot;>2021</option> </select> <select id=&quot;project_milestones_attributes_new_milestones_completion_date_2i&quot; name=&quot;project[milestones_attributes][new_milestones][completion_date(2i)]&quot; class=&quot;date optional form-control&quot;> <option value=&quot;1&quot;>January</option> <option value=&quot;2&quot;>February</option> <option value=&quot;3&quot;>March</option> <option value=&quot;4&quot; selected=&quot;selected&quot;>April</option> <option value=&quot;5&quot;>May</option> <option value=&quot;6&quot;>June</option> <option value=&quot;7&quot;>July</option> <option value=&quot;8&quot;>August</option> <option value=&quot;9&quot;>September</option> <option value=&quot;10&quot;>October</option> <option value=&quot;11&quot;>November</option> <option value=&quot;12&quot;>December</option> </select> <select id=&quot;project_milestones_attributes_new_milestones_completion_date_3i&quot; name=&quot;project[milestones_attributes][new_milestones][completion_date(3i)]&quot; class=&quot;date optional form-control&quot;> <option value=&quot;1&quot;>1</option> <option value=&quot;2&quot;>2</option> <option value=&quot;3&quot;>3</option> <option value=&quot;4&quot;>4</option> <option value=&quot;5&quot;>5</option> <option value=&quot;6&quot;>6</option> <option value=&quot;7&quot;>7</option> <option value=&quot;8&quot;>8</option> <option value=&quot;9&quot;>9</option> <option value=&quot;10&quot;>10</option> <option value=&quot;11&quot;>11</option> <option value=&quot;12&quot;>12</option> <option value=&quot;13&quot;>13</option> <option value=&quot;14&quot;>14</option> <option value=&quot;15&quot;>15</option> <option value=&quot;16&quot;>16</option> <option value=&quot;17&quot;>17</option> <option value=&quot;18&quot;>18</option> <option value=&quot;19&quot;>19</option> <option value=&quot;20&quot;>20</option> <option value=&quot;21&quot;>21</option> <option value=&quot;22&quot;>22</option> <option value=&quot;23&quot;>23</option> <option value=&quot;24&quot;>24</option> <option value=&quot;25&quot;>25</option> <option value=&quot;26&quot; selected=&quot;selected&quot;>26</option> <option value=&quot;27&quot;>27</option> <option value=&quot;28&quot;>28</option> <option value=&quot;29&quot;>29</option> <option value=&quot;30&quot;>30</option> <option value=&quot;31&quot;>31</option> </select> </div></div> </div> </div> <div class=&quot;row&quot;> <div class=&quot;col-md-10&quot;> <div class=&quot;form-group text optional project_milestones_description&quot;><label class=&quot;text optional control-label&quot; for=&quot;project_milestones_attributes_new_milestones_description&quot;>Describe what will be required to complete it</label><textarea class=&quot;text optional form-control&quot; name=&quot;project[milestones_attributes][new_milestones][description]&quot; id=&quot;project_milestones_attributes_new_milestones_description&quot;> </textarea></div> </div> </div> <div class=&quot;row&quot;> <div class=&quot;col-md-10&quot;> <div class=&quot;form-group text optional project_milestones_decision&quot;><label class=&quot;text optional control-label&quot; for=&quot;project_milestones_attributes_new_milestones_decision&quot;>Will project parties make a decision as to whether to take the project further at this time? If so, what are the relevant considerations?</label><textarea class=&quot;text optional form-control&quot; name=&quot;project[milestones_attributes][new_milestones][decision]&quot; id=&quot;project_milestones_attributes_new_milestones_decision&quot;> </textarea></div> </div> </div> </div> </div> </div> " href="#">Add a milestone</a> </div> </div> </div> 

CURRENT STATUS OF FORM <% = f.input: has_milestones, as :: boolean, boolean_style :: inline ,: label => "Does this research project have specific milestones or decision points?", Id: 'project_has_milestones_form'%>

  <div id="check_project_milestones" class="hidden"> <div class="intpol2"> Milestones </div> <%= f.simple_fields_for :milestones do |f| %> <%= render 'milestones/milestone_fields', f: f %> <% end %> <br> <div class="row"> <div class="col-md-6"> <%= link_to_add_association 'Add a milestone', f, :milestones, partial: 'milestones/milestone_fields' %> </div> </div> </div> 

Answer 1

I suggest you do the following:

 <%= f.input :has_milestones, as: :boolean, boolean_style: :inline, :label => 'Does this research project have identifiable milestones or decision points?' %> <div class="content hidden"> <div class="intpol2"> Milestones </div> <%= f.simple_fields_for :milestones do |f| %> <%= render 'milestones/milestone_fields', f: f %> <%- end %> </div> <div class="row"> <div class="col-md-6"> <%= link_to_add_association 'Add a milestone', f, :milestones, partial: 'milestones/milestone_fields' %> </div> </div> <%- end %> 

Define the form as a flag with id and define the rest of the form with a different id . Then define the click marker on the checkbox and simply toggle the addition / removal of the hidden parts of the class from the rest of the div form.

 $(document).ready(function() { $("#project_has_milestones").on('click', function() { if ($(this)[0].checked) { $('#project_has_milestones .content').addClass('hidden'); } else { $('#project_has_milestones .content').removeClass('hidden'); } }); }); 

In the event of a jQuery name conflict, you must replace all $ with jQuery .