如何修复这个损坏的 JS ERB？

Question

我在home#index页面上呈现一组类别，如下所示：

views/home/index.html.erb

<div class="content">
  <div class="video-list">
    <%= render "home/categories" %>
  </div>
</div>

这是我的home/_categories.html.erb样子：

<div class="list-section" id="categories">
  <% @filter.each do |category| %>
    <%= render partial: "categories/category", locals: { category: category } %>
  <% end %>
</div>

这是我的categories/_category.html.erb ：

<h3 class="video-list-title"><%= category %></h3>
<div class="video-list-carousel-con scroll">
  <div class="items">
    <% Program.tagged_with(category).each do |program| %>
      <div class="video-list-thumbnail-con">
        <%= image_tag program.header_image_url %>
        <div class="thumbnail-overlay">
          <span>Plus Icon</span>
          <span>i Icon</span>
        </div>
        <p><strong><%= program.name %></strong></p>
        <p><%= program.airs_at.strftime("%b %d, %Y") %></p>
      </div>
    <% end %>
  </div>
</div>

这是我的HomeController#Index ：

  def index
    @all_tags = ActsAsTaggableOn::Tag.all.map(&:name)
    if params["search"]
      @filter = params["search"]["categories"].flatten.reject(&:blank?)
      @programs = Program.all.global_search("#{@filter}")
      @recommendations = @filter.empty? ? Program.all : Program.all.tagged_with(@filter, any: true)
    else
      @filter = ActsAsTaggableOn::Tag.all.map(&:name)
      @recommendations = Program.all
    end

    respond_to do |format|
      format.html
      format.js
    end
  end

这是我的_navbar.html.erb部分中的搜索表单：

 <%= simple_form_for :search, url: root_path, method: "GET" do |f| %>
     <%= f.input :categories, label: "Category", collection: @all_tags, as: :check_boxes %>
     <%= f.submit "Search", class: "btn btn-primary" %>
     <%= link_to "Reset", root_path %>
  <% end %>

<script type="text/javascript">
  var checkBoxes = document.querySelectorAll(".form-check-input");
  var form = document.querySelector('form');

  for (const check of checkBoxes) {
  check.addEventListener( 'change', function() {
    console.log('checked');
    Rails.fire(form, 'submit');
  });
  }
</script>

因此，以上所有内容都适用于正常表单提交。

但是，我正在尝试对整个事情进行ajaxify 。 我在表单中添加了remote: true并创建了以下index.js.erb ，但它不起作用：

function replacePrograms (innerHTML) {
  const categories = document.getElementById('categories');
  categories.innerHTML = innerHTML;
}

if ('<%= @filter %>' === "[]") {
  replacePrograms("<%= j render 'home/categories', categories: Program.all %>");
}
else {
  replacePrograms("<%= j render 'home/categories', categories: @filter %>");
}

我想要发生的是，当我单击任何复选框时，它会刷新home/_categories.html.erb上的整个类别集合。

我如何做到这一点？

Answer 1

原来问题是我实际上并没有在我的 JS 中正确选择表单和复选框。

所以我替换了：

<script type="text/javascript">
  var checkBoxes = document.querySelectorAll(".form-check-input");
  var form = document.querySelector('form');

  for (const check of checkBoxes) {
  check.addEventListener( 'change', function() {
    console.log('checked');
    Rails.fire(form, 'submit');
  });
  }
</script>

和：

<script type="text/javascript">
  var checkBoxes = document.querySelectorAll("div.filters input.check_boxes");
  var form = document.querySelector('div.filters form.simple_form.search');

  for (const check of checkBoxes) {
  check.addEventListener( 'change', function() {
    Rails.fire(form, 'submit');
  });
  }
</script>

现在它起作用了。

现在还有其他问题，但我会解决这些问题。