动态加载搜索结果Rails

Question

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

这就是我现在所拥有的。

在home_controller / _search.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 } ) %>"); 

实际发生的是

当我进行表单提交时，仅发生Rails表单提交。 不会触发jquery .submit事件。 仅在刷新页面时才执行jquery。 根据我的研究，添加turbolinks事件侦听器应该可以解决此问题。 但是即使添加了它，问题仍然存在。

还要指出我代码中的任何其他错误。

Answer 1

这是您需要更改的东西

未设置表格标签ID。 因此，将html属性添加到form标签。

还要将按钮放在表单外部并分别处理按钮事件

  <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>

您的脚本代码

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