Question

我应该有3个复选框OP，SE和PM。如果选中一个或两个，或者甚至全部三个，视图将根据检查的值进行过滤。这些是employee_type，如果我检查OP，将显示属于OP类型的所有员工。我在gem 'ransack'

上使用ruby on rails获得此代码

在我的index.html.erb

上

<%= search_form_for @filter do |f| %>
    <%= f.check_box :employee_type, :value => 'OP', :id => 'checkOP' %>
    <%= f.check_box :employee_type, :value => 'SE', :id => 'checkSE' %>
    <%= f.check_box :employee_type, :value => 'PM', :id => 'checkPM' %>
    <%= f.submit 'Filter' %>
<% end %>

  <script type="text/javascript">
      $('#checkOP').on('change', function() {
          var val = this.checked ? this.value : '';
          $('#index').html(val);
      });
      $('#checkSE').on('change', function() {
          var val = this.checked ? this.value : '';
          $('#index').html(val);
      });
      $('#checkPM').on('change', function() {
          var val = this.checked ? this.value : '';
          $('#index').html(val);
      });
  </script>

在我的employees_controller上

  def index
    @filter = Employee.search(params[:q])
    @employees = @filter.result
  end

应该没有按钮，因为它应该在选中或取消选中复选框的时候进行过滤，但我使用按钮进行测试，因为我的代码出现问题，如果选中复选框则不会自动检测不

互联网似乎没有解决方案，或者我找不到合适的搜索词。非常感谢任何帮助。

Answer 1

您的代码实际上并没有执行任何操作，只需使用复选框的值填充#index。您应确保内容区域（您的问题中未提供）实际上具有#index的ID（我建议不那么通用）。 Ransack是帮助搜索的辅助工具层。你的javascript假设它返回动态内容（即通过Ajax），它本身不是。您的控制器可能会实现正确的JS响应类型，或者不同的操作只提供HTML内容，但在上面的文本中没有指定。

您需要：

使用您的javascript提交表单，例如
```
$(this).parent('form').submit();
```
将提交表单并刷新页面，或
您需要将Ajax行为集成到表单中。这将使表单动态化（即，仅更改某些页面内容而无需完整页面刷新）。触发change事件时，您的事件需要将表单提交给Rails操作（无论是索引，搜索还是其他），并仅返回#index中的内容。这可以通过多种方式完成 - 要么是自己的独特操作（可能是search端点），只返回要在没有布局的情况下呈现的HTML，或者使用js.erb模板和正确的respond_to in控制器仅使用适当的内容呈现部分填充#index。

如果您不熟悉Ajax（基于您提供的Javascript，它看起来不像您），如果您需要快速获取内容，我建议您重新加载整页，我会鼓励您调查这个主题。在简单的堆栈溢出响应中有太多的理由要覆盖。

表单提交是实现您想要的最简单的方法，它可以通过非常简单地简化您的Javascript来完成（并且您应该使用资产，而不是内联JS，如果您使用的是Rails）：

# index.html.erb
# give the ID a better, and more specific name:
<%= search_form_for @filter, html: { id: 'controller-action-index' } do
  ... maintain initial content
<% end %>

// in a JS file in app/assets/javascripts that is required in your application.js file
$(function() { // ensure jQuery has loaded
  // replace the ID below with whatever you use on the form above
  $('form#controller-action-index input[type="checkbox"]').on('change', function (event) {
    $(this).parent('form').submit();
  });
}

然而，就是说，我会鼓励你，有多种选择，而且不使用Ajax，添加按钮，完全忘记Javascript。如果有人更改了两个选项，则表示他们必须完成两次页面刷新，而不是只需单击两个复选框并单击“提交”。

使用带有复选框的gem ransack过滤视图

1 个答案: