Rails 4 - 具有简单形式的依赖字段的 JS

Posted 2023-05-09

【中文标题】Rails 4 - 具有简单形式的依赖字段的 JS

【英文标题】：Rails 4 - JS for dependent fields with simple form

【发布时间】：2016-05-16 01:42:59

【问题描述】：

我正在尝试在 Rails 4 中制作应用程序。

我正在使用简单的表单表单，并且刚刚尝试使用 gem 'dependent-fields-rails' 根据主要问题的表单字段隐藏或显示子集问题。

我卡住了。

我已将 gem 添加到我的 gem 文件中：

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

我已将我的 application.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 page 上为依赖字段列出）：

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

如何在页面中包含 underscorejs 和 jQuery？我的 gem 文件中有它们。这是否足够或需要其他东西才能完成这项工作？

目前，当我尝试这种形式时，没有任何隐藏。我尝试将真实值交换为“是”，但这也没有任何区别。

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

谁能看到我哪里出错了？

【参考方案1】：

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

如果您查看documentation example，您会看到他们使用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>

更新

如果您查看 this 示例项目，application.js 文件包含所需库的顺序与您不同。这可能是错误。

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

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

虽然示例项目以这种方式需要库：

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

希望对您有所帮助！

【讨论】：

嗨丹尼尔，我试过了（如果答案是否定的，用我想隐藏的字段替换 ... - 但 ti 不起作用。这些字段不会隐藏/显示基于问题。

@user2860931 嗯，这很奇怪。您在浏览器的控制台中看到任何错误吗？也许该控制器的方法使用了与应用程序不同的另一种布局，但我在黑暗中拍摄。如果该视图中不需要jQuery 或underscoreJS，它应该在浏览器控制台或服务器日志中显示错误消息。你能检查一下吗？所以我可以帮你！

@user2860931 我只是意识到您的代码可能无法工作，因为您需要application.js 中的库的顺序。我将更新我的答案以深入了解它。

嗨，Daniel，我尝试更改 application.js 中的顺序。感谢您的建议，但我仍然遇到同样的问题

@user2860931 在乔纳斯的回答中，您评论说您已经在您的application.html.erb 中包含了application.js，但是您确定控制器中使用的布局是应用程序吗？...再次，也许您应该使用日志更新您的问题以帮助您

【参考方案2】：

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

Rails 会自动执行此操作。它会在设置时将 jQuery 添加到 application.js 文件中，因此如果您还没有删除该行，我们可以跳转到第 2 步：

您需要将application.js 脚本包含到您的页面中。您可以在您正在处理的视图中执行此操作，但如果您将在应用程序的其他位置使用 javascript，我建议您将 javascript 添加到应用程序的布局中，以便将其应用于使用该布局的所有页面。

默认情况下，该文件位于app/views/layouts/application.html.erb 下。

必须将这行代码（或类似的代码）添加到您的文件中，以便使用您的视图加载脚本：

<%= javascript_include_tag "application" %>

它将允许您访问所有的 javascript 代码。

编辑：

除此之外，我注意到您缺少用于显示字段的子句。在依赖字段的documentation 中，声明您必须指定您依赖的字段以及元素类的值，如下所示：

<div class="js-dependent-fields[data-select-id='filing_<INPUT_ID>' data-option-value='<VALUE>']"> 
   ... fields ...
</div>

您应该将<INPUT_ID> 替换为这些字段所依赖的输入的ID，并将<VALUE> 替换为<INPUT_ID> 必须具有的相应值。

【讨论】：

非常感谢您的解释。我的 application.html.erb 中已经有： false %>，所以看起来不需要更改。但是，肯定有其他问题，因为隐藏显示功能不起作用

嗨乔纳斯，这正是我的形式。我也尝试过改变真/是值 - 但它没有任何区别，这些字段不会隐藏，直到它们所依赖的那个是真的

你认为可能是这样的：$(document).ready(function() DependentFields.bind() );

不需要在脚本标签中。或者也许我不需要自己插入（也许 gem 会自己插入）？

或者 - 也许我的意思是在脚本标签中指定一个脚本类型 - 例如：