动态加载搜索结果Rails

Question

我想实现一个简单的搜索表单，在提交搜索表单时，我想刷新一个特定的div，而不是整个页面。

这是我现在拥有的。

在home_controller/_sarch.html.erb中

<div class="search-form right">
<%= form_for :anything, url: "tourism_packages/search", remote: true, id: 'search-form' do |form| %>
<div class="search-fields">
<%= form.label 'From' %>
<%= form.select :starting_point, ['Chennai', 'Delhi'] %>
</div>
<div class="search-fields">
<%= form.label 'To' %>
<%= form.select :end_point, ['Mumbai', 'Pune'] %>
</div>
<div class="search-fields">
<%= form.label 'Start Date' %>
<%= form.date_field :start_date %>
</div>
<div>
<%= form.submit 'Search', class: 'action-btn', id: 'search-btn', remote: true %>
</div>
<% end  %>
</div>

在home_controller.js 中

document.addEventListener("turbolinks:load", function() {
$('#search-form').submit(function(e){
e.preventDefault();
$.post("/tourism_packages/search?");
return false;
})

})

在my_controller.rb 中

def search_packages
@packages = TourismPackage.search(params.require(:anything).
permit(:starting_point, :end_point, :start_date))
# render layout: false
respond_to do |format|
format.js       
end
end

在my_controller/views/search_packages.js.erb 中

$("#search-result").html("<%= escape_javascript(render partial: 'search-result', locals: { packages: @packages } ) %>"); 

实际情况是，

当我进行表单提交时，将发生Only rails表单提交。jquery.submit事件未被激发。只有在页面刷新时才执行jquery。根据我的研究，添加涡轮链接事件监听器应该可以解决这个问题。但即使添加了它，问题仍然存在。

同时指出我代码中的任何其他错误。

Answer 1

以下是您需要更改的内容

表单标记ID未设置。因此，将html属性添加到表单标记中。

还将按钮放在表单外，并单独处理按钮事件

<div class="search-form right">
<%= form_for :anything, url: "tourism_packages/search", html: { id: 'search-form' }, remote: true do |form| %>
<div class="search-fields">
<%= form.label 'From' %>
<%= form.select :starting_point, ['Chennai', 'Delhi'] %>
</div>
<div class="search-fields">
<%= form.label 'To' %>
<%= form.select :end_point, ['Mumbai', 'Pune'] %>
</div>
<div class="search-fields">
<%= form.label 'Start Date' %>
<%= form.date_field :start_date %>
</div>

<% end  %>
<div>
<%= button_tag "Search", data: { disable_with: "Please wait..." }, remote: true, class: 'submit' %>
</div>

你的javscript代码

$('.submit').on('click', function(){
$('#search-form').submit();
});