Как я могу исправить это сломанное JS ERB? - PullRequest
Новая
       9

Как я могу исправить это сломанное JS ERB?

0 голосов
/ 19 января 2020

Я отображаю группу категорий на моей 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.

Как мне сделать sh это?

1 Ответ

0 голосов
/ 20 января 2020

Оказывается, проблема заключалась в том, что я на самом деле неправильно выбирал форму и флажки в моем 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>

И теперь это работает.

Теперь у него есть другие проблемы, но я буду работать над ними.

...