我该如何修复这个损坏的 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>

现在可以了。

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

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

How do I fix this broken JS ERB?

javascript

ruby-on-rails

ruby-on-rails-6