动态加载搜索结果 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 未设置。所以给form标签添加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();
      });