Rails 4 - 具有简单形式的依赖字段的JS [英] Rails 4 - JS for dependent fields with simple form

问题描述

我正在尝试在Rails 4中创建一个应用程序。

I am trying to make an app in Rails 4.

我使用简单的表单形式，并且刚尝试使用gem'inpendent-fields-rails'隐藏或显示基于主要问题的表单字段的子集问题。

I am using simple form for forms and have just tried to use gem 'dependent-fields-rails' to hide or show subset questions based on the form field of a primary question.

我卡住了。

我已经为我的宝石文件添加了宝石：

I have added gems to my gem file for:

gem 'dependent-fields-rails'
gem 'underscore-rails'

我已将我的application.js更新为：

I have updated my application.js to:

//= 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了解不多。

I don't know much about javascript.

我不确定最终的脚本段落是否必要，或者宝石是否将其放入代码中。我不确定它是否应该被表达内部脚本标签，我也不知道如何实现这个要求（在依赖字段的宝石页面上设置）：

I"m not sure if the final script paragraph is necessary or if the gem puts that into the code for you. I'm not sure if it's supposed to be expressed inside script tags and I also don't know how to give effect to this requirement (which is set out on the gem page for dependent-fields):

"Be sure to include underscorejs and jquery in your page."

如何做你在一个页面中包含了下划线和jQuery吗？我将它们放在我的宝石文件中。这还不够或需要其它东西才能使这个工作吗？

How do you include underscorejs and jQuery in a page? I have them in my gem file. Is that enough or is something else required to make this work?

目前，当我尝试这个形式，没有隐藏。我已经尝试将真值交换为'是'，但这也没有任何区别。

Currently, when I try this form, nothing is hidden. I have tried swapping the true value to 'yes' but that doesnt make any difference either.

<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">

谁能看到我出错的地方？

Can anyone see where I've gone wrong?

推荐答案

我认为您在定义时跳过集合属性单选按钮。

I think that you are jumping the collection attribute when you define the radio button.

如果你看一下文档示例，您将看到他们使用集合来定义单选按钮的值。然后他们使用一个定义的值来设置 data-radio-value 属性。

If you look at the documentation example, you will see that they use the collection to define the values of the radio button. Then they use one of the values defined to set data-radio-value attribute.

试试这个让我知道：

<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 文件包含所需的库与你不同的顺序。这可能是错误。

If you look at this example project, the application.js file includes the required libraries in a different order than you. This could be the error.

请注意，您需要这样的库：

Note that you are requiring the libraries in this way:

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

虽然示例项目需要这样的库：

While the example project require the libraries in this way:

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

希望这有帮助！

这篇关于Rails 4 - 具有简单形式的依赖字段的JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！