[英]How do I fix this broken JS ERB?
I am rendering a group of categories on my home#index
page like so:我在
home#index
页面上呈现一组类别,如下所示:
views/home/index.html.erb
<div class="content">
<div class="video-list">
<%= render "home/categories" %>
</div>
</div>
This is what my home/_categories.html.erb
looks like:这是我的
home/_categories.html.erb
样子:
<div class="list-section" id="categories">
<% @filter.each do |category| %>
<%= render partial: "categories/category", locals: { category: category } %>
<% end %>
</div>
This is my categories/_category.html.erb
:这是我的
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>
This is my HomeController#Index
:这是我的
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
This is my search form in my _navbar.html.erb
partial:这是我的
_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>
So all of the above works for normal form submissions.因此,以上所有内容都适用于正常表单提交。
However, I am trying to ajaxify
the entire thing.但是,我正在尝试对整个事情进行
ajaxify
。 I add remote: true
to my form and I created the following index.js.erb
, but it isn't working:我在表单中添加了
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 %>");
}
What I want to happen is when I click on any of the checkboxes, it refreshes the entire collection of categories on my home/_categories.html.erb
.我想要发生的是,当我单击任何复选框时,它会刷新
home/_categories.html.erb
上的整个类别集合。
How do I accomplish that?我如何做到这一点?
Turns out the issue was that I wasn't actually selecting the form & checkboxes properly in my JS.原来问题是我实际上并没有在我的 JS 中正确选择表单和复选框。
So I replaced:所以我替换了:
<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>
With:和:
<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>
And now it works.现在它起作用了。
It now has other issues, but I will work through those.现在还有其他问题,但我会解决这些问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.