Просмотр фильтра с использованием gem ransack с флажком

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 (и я бы предложил нечто более общее). Ransack - это слой вспомогательных инструментов для поиска. Ваш javascript предполагает, что он возвращает динамический контент (т. Е. Через Ajax), который он не изначально. Ваш контроллер может реализовать правильный тип ответа JS или другое действие предоставляет только содержимое HTML, но это не указано в вашем тексте выше.

Вам нужно либо:

1. отправить форму из вашего JavaScript с чем-то вроде

   $(this).parent('form').submit(); 
   

   который представит форму и обновить страницу, или

2. вам нужно интегрировать поведение Ajax в форму. Это сделает динамическую форму (т. Е. Изменяется только некоторое содержимое страницы без необходимости полного обновления страницы). Когда событие change запущено, ваше событие должно отправить форму в действие Rails (независимо от индекса, поиска и т. Д.) И вернуть только контент, который будет отправлен в #index. Это можно сделать разными способами - либо свое собственное уникальное действие (возможно, конечная точка search), возвращающее только HTML для рендеринга без макета, либо с использованием шаблона js.erb и надлежащего respond_to в контроллере, чтобы отображать только частичное заполнение #index с помощью правильное содержание.

Если вы не знакомы с Ajax (который не кажется, как вы, основываясь на своем условие Javascript), я бы рекомендовал полную перезагрузку страницы, если вам нужно, чтобы получить что-то быстро, и Я бы посоветовал вам изучить тему. Слишком много возможностей для покрытия в простой реакции переполнения стека.

Форма submit будет самым простым способом для достижения того, чего вы хотите, и это можно сделать, упростив 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.Если кто-то изменит два варианта, это означает, что они должны сидеть через два обновления страницы, вместо простого нажатия двух флажков и нажатия кнопки.