Rails 4-jQuery(最初隐藏，然后切换)与javascript冲突 [英] Rails 4 - jQuery (initially hide, then toggle) conflicts with javascript
本文介绍了Rails 4-jQuery(最初隐藏，然后切换)与javascript冲突的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图弄清楚如何在我的Rails 4应用程序中合并jQuery和javascript.我正在挣扎.
I'm trying to figure out how to incorporate jQuery and javascript in my rails 4 app. I'm struggling.
我的宝石文件中包含以下所有宝石:
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'
我有很多冲突(我的问题的最后5个和最近的赏金都与这些冲突有关).查看附件链接:
I have a number of conflicts (the last 5 of my questions and most recent bounty all relate to these). 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
为了尝试解决这些问题的一个方面，我删除了从属Rails gem，并尝试编写自己的函数来隐藏我的项目/表单的一部分，直到通过检查回答该表单中的问题为止一个盒子(所以它的值为true).
In order to try to work around one aspect of these problems, I removed the dependent-rails gem and am trying to write my own function to hide a section of my projects/form until a question in that form is answered by checking a box (so its value is true).
我目前在我的app/assets/javascripts文件夹中有一个projects.js文件.它具有:
I currently have a projects.js file in my app/assets/javascripts folder. It has:
(function($){
$(document).ready(function() {
$("#check_project_milestones").hide()
});
})(jQuery);
尽管此公式(第一行和最后一行是新的)确实停止了一个错误(该错误在包括第一行和最后一行之前说:未捕获的TypeError:$不是函数(匿名函数)@ @ projects.self-9c019ba…". js?")，实际上无法将文本隐藏在id标签"check_project_milestones"中.
While this formulation (the first and last line are new) does stop one error (which before including the first and last line said "Uncaught TypeError: $ is not a function(anonymous function) @ projects.self-9c019ba….js?"), it doesnt actually work to hide the text inside the id tag 'check_project_milestones'.
该表单具有:
<%= 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>
我的application.js具有:
My application.js 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 have done wrong?
表格的第二部分
<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="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_new_milestones_title">Give this milestone a title</label><input class="string optional form-control" type="text" name="project[milestones_attributes][new_milestones][title]" id="project_milestones_attributes_new_milestones_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_new_milestones_completion_date_1i">When do you expect to reach this milestone?</label><div class="form-inline"><select id="project_milestones_attributes_new_milestones_completion_date_1i" name="project[milestones_attributes][new_milestones][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_new_milestones_completion_date_2i" name="project[milestones_attributes][new_milestones][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_new_milestones_completion_date_3i" name="project[milestones_attributes][new_milestones][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_new_milestones_description">Describe what will be required to complete it</label><textarea class="text optional form-control" name="project[milestones_attributes][new_milestones][description]" id="project_milestones_attributes_new_milestones_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_new_milestones_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][new_milestones][decision]" id="project_milestones_attributes_new_milestones_decision">
</textarea></div>
</div>
</div>
</div>
</div>
</div> " href="#">Add a milestone</a>
</div>
</div>
</div>
当前表单状态 <％= f.input:has_milestones，例如::boolean，boolean_style::inline，:label =>'此研究项目是否具有可识别的里程碑或决策点?'，id:'project_has_milestones_form'％>
CURRENT STATE OF FORM <%= f.input :has_milestones, as: :boolean, boolean_style: :inline, :label => 'Does this research project have identifiable 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>
推荐答案
我建议您执行以下操作:
I propose you to do like follows:
<%= 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 %>
将表单作为id复选框选中，然后使用另一个 id定义表单的其余部分.然后在复选框上定义单击手柄，只需在其余表单div中切换添加/删除hidden类部分.
Defice form as a checkbox with id, and define the rest of form with another id. Then define click handle on checkbox and just toggle add/remove hidden class part from the rest form div.
$(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');
}
});
});
如果jQuery名称冲突，则应将所有$替换为jQuery名称.
In case of jQuery name conflict you should replace all the $ with jQuery name.
这篇关于Rails 4-jQuery(最初隐藏，然后切换)与javascript冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
