文章/答案/技术大牛

发布

社区首页 >问答首页 >动态加载搜索结果Rails

问动态加载搜索结果Rails
EN

Stack Overflow用户

提问于 2018-07-29 06:07:46

回答 1查看 188关注 0票数 0

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

这是我现在所拥有的。

家庭控制器/_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_控制器/视图/search_Packages.js.erb中

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

实际上发生的是，

当我做表单提交时，只有rails表单提交才会发生。jquery .submit事件不会触发。只有在页面刷新时，jquery才会被执行。根据我的研究，添加turbolinks事件侦听器可以解决这个问题。但即使在加入之后，问题依然存在。

还指出了我代码中的其他错误。

javascript

jquery

ruby-on-rails

ajax

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-29 08:37:01

这里是你需要改变的东西

没有设置表单标记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();
      });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51577702

复制

相似问题

问动态加载搜索结果Rails
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态加载搜索结果RailsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态加载搜索结果Rails
EN