轨道 4 - JS 用于具有简单形式的依赖字段
Rails 4 - JS for dependent fields with simple form
我正在尝试在Rails 4中制作一个应用程序。
我正在为表单使用简单的表单,并且刚刚尝试使用 gem "依赖字段-rails"来隐藏或显示基于主要问题的表单字段的子集问题。
我被卡住了。
我已将宝石添加到我的宝石文件中,用于:
gem 'dependent-fields-rails'
gem 'underscore-rails'
我已将我的申请更新.js为:
//= require dependent-fields
//= require underscore
我有一个表格,上面有:
<%= f.simple_fields_for :project_date do |pdf| %>
<%= pdf.error_notification %>
<div class="form-inputs">
<%= pdf.input :student_project, as: :radio_buttons, :label => "Is this a project in which students may participate?", autofocus: true %>
<div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="true">
<%= pdf.input :course_project, as: :radio_buttons, :label => "Is this a project students complete for credit towards course assessment?" %>
<%= pdf.input :recurring_project, as: :radio_buttons, :label => "Is this project offered on a recurring basis?" %>
<%= pdf.input :frequency, :label => "How often is this project repeated?", :collection => ["No current plans to repeat this project", "Each semester", "Each year"] %>
</div>
<div class='row'>
<div class="col-md-4">
<%= pdf.input :start_date, :as => :date_picker, :label => "When do you want to get started?" %>
</div>
<div class="col-md-4">
<%= pdf.input :completion_date, :as => :date_picker, :label => "When do you expect to finish?" %>
</div>
<div class="col-md-4">
<%= pdf.input :eoi, :as => :date_picker, :label => 'When are expressions of interest due?' %>
</div>
</div>
</div>
<% end %>
<script type="text/javascript">
$('.datetimepicker').datetimepicker();
</script>
<script>
$(document).ready(function() {
DependentFields.bind()
});
</script>
我对javascript了解不多。
我不确定最后的脚本段落是否必要,或者 gem 是否将其放入您的代码中。我不确定它是否应该在脚本标签中表达,我也不知道如何实现此要求(在依赖字段的 gem 页面上列出(:
"Be sure to include underscorejs and jquery in your page."
如何在页面中包含 underscorejs 和 jQuery?我在我的宝石文件中有它们。这是否足够,还是需要其他东西才能完成这项工作?
目前,当我尝试这种形式时,没有任何隐藏。我尝试将真实值交换为"是",但这也没有任何区别。
<div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="true">
<div class="js-dependent-fields" data-radio-name="project_date[student_project]" data-radio-value="yes">
谁能看出我哪里出错了?
我认为您在定义单选按钮时跳过了collection
属性。
如果您查看文档示例,您会发现他们使用 collection
来定义单选按钮的值。然后,他们使用定义的值之一来设置data-radio-value
属性。
试试这个,让我知道:
<div class="form-inputs">
<%= pdf.input :student_project, as: :radio_buttons, autofocus: true,
:label => "Is this a project?", :collection => ['Yes', 'No'] %>
<div class="js-dependent-fields" data-radio-value='Yes'
data-radio-name="project_date[student_project]">
...
</div>
</div>
更新
如果您查看此示例项目,则 application.js 文件包含所需库的顺序与您不同。这可能是错误。
请注意,您以这种方式需要库:
//= require dependent-fields
//= require underscore
虽然示例项目需要以下方式的库:
//= require underscore
//= require dependent-fields
希望这有帮助!
"Be sure to include underscorejs and jquery in your page."
Rails会自动执行此操作。它在设置时将 jQuery 添加到应用程序.js文件中,因此如果您尚未删除该行,我们可以跳到步骤 2:
您需要将application.js
脚本包含在页面中。您可以在正在处理的视图中执行此操作,但是如果您要在应用程序的其他位置使用 javascript,我建议将 javascript 添加到应用程序的布局中,以便将其应用于使用该布局的所有页面。
默认情况下,该文件位于 app/views/layouts/application.html.erb
下。
必须将这行代码(或类似的东西(添加到您的文件中,以便使用您的视图加载脚本:
<%= javascript_include_tag "application" %>
它将允许您访问所有JavaScript代码。
编辑:
除此之外,我注意到您缺少用于显示字段的子句。在依赖字段的文档中,声明您必须指定所依赖的字段以及元素类的值,如下所示:
<div class="js-dependent-fields[data-select-id='filing_<INPUT_ID>' data-option-value='<VALUE>']">
... fields ...
</div>
应将<INPUT_ID>
替换为这些字段所依赖的输入的 id,<VALUE>
替换为<INPUT_ID>
必须具有的相应值。
- 如何隐藏&使用jQuery禁用依赖于另一个字段值的字段
- Rails 4-具有依赖字段Rails的条件JS
- yii2:依赖于Action的条件显示/显示字段
- Ember-自定义计算属性,用于检查是否存在所有依赖字段
- AngularJS,如何使UI依赖于哪个字段具有焦点
- 角度 - 依赖字段验证
- 轨道 4 - JS 用于具有简单形式的依赖字段
- 在 Reactjs 中创建依赖字段
- 角度:验证多个依赖字段
- 可以't访问require.js中的依赖对象字段-无法读取未定义的属性
- Knockout.js text相互依赖的输入字段
- Rivets.js属性依赖于几个字段
- 在Ember控制器中使用依赖注入字段
- 在依赖于另一个字段选择的窗体中隐藏表的某个部分
- AngularJS中带依赖字段的表单验证
- LiveCycle -多个计算依赖于选中的复选框和输入字段
- 两个相互依赖的选择字段
- 添加相互依赖的签出字段
- 添加额外的字段依赖于其他查询的查询结果在mongodb中,使用mongojs
- 在我的表单中创建依赖字段