Rails：在不刷新选项卡的情况下显示搜索结果答案

【问题标题】：Rails: Show search results without refreshing tabRails：在不刷新选项卡的情况下显示搜索结果
【发布时间】：2017-12-19 09:10:12
【问题描述】：

我在bootstrap tab 内搜索form_tag，我想在不刷新页面的情况下在tab 内显示结果。

我将remote: true 添加到form_tag 以及respond_to do |format| 到控制器内的搜索操作中，但是当我提交搜索时，页面仍然会重新加载。

这是我目前的设置吗？

search.html.errb

<div class="container">
<div id="tabs">
  <ul class="nav nav-tabs" id="prodTabs">
    <li class="active"><a href="#nsearch">Search</a></li>
    <li><a href="#other">Other</a></li>
    <li><a href="#about">About</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="search">

      <%= render 'pages/search' %>

      <% if params[:search].present? %>
          <% if @items.blank? %>

              <div class="centerList">
                <p>No results found</p>
              </div>

          <% else %>

              <h5> Result:</h5>
              <% @items.each do |item|%>

                 <% unless item.attachments.blank? %>
                 <%= image_tag item.attachments.first&.url(:mini) %>
                            <% end %>

                  <%= link_to item.title, items_show_path(item) %></h4>
                  <strong>Price: </strong><%= number_to_currency item.price %>


<script>
  $('#tabs').on('click','.tablink,#prodTabs a',function (e) {
      e.preventDefault();
      var url = $(this).attr("data-url");

      if (typeof url !== "undefined") {
          var pane = $(this), href = this.hash;

          // ajax load from data-url
          $(href).load(url,function(result){
              pane.tab('show');
          });
      } else {
          $(this).tab('show');
      }
  });

_search.html.erb

<%= form_tag search_items_path, remote: true, :method => "get" do %>
    <%= text_field_tag :search, params[:search], autofocus: true,
                   class: "search-query search_size",
                   placeholder: "Enter keyword to search" %>
<%= submit_tag "Search", name: nil, :style => "display: none;" %>
<%end%>

控制器动作：

def search
  if params[:search]
    @items = Item.search(params[:search]).order("created_at DESC")

     respond_to do |format|
      format.js
      format.html
     end
  end
end

有什么办法可以解决这个问题吗？

【问题讨论】：

控制器中的一切是否正常运行？在respond_to do ... 之前是否有有效的@items？如果，您需要将数据附加到您的erb。现在您只是显示选项卡，但没有附加数据。
感谢@Peter Andersen 的回复！是的，一切正常，我得到了一个有效的@items，因此我的搜索结果出现了，我只是没有赢得它来刷新页面。另外，我有一个search.js.erb，里面有这个$("#items").innerHTML += "<%= escape_javascript(render(:partial => 'search')) %>"
Rails 控制台和浏览器控制台有错误吗？

标签： javascript jquery ruby-on-rails ruby

【解决方案1】：

我认为问题在于 jquery 对象上的 innerHTML。您应该使用 append 而不是 innerHTML。打开控制台并检查您可能会收到 innerHTML is not a function 的错误。并将return false 放在$('#tabs').on('click','.tablink,#prodTabs a',function (e) { 代码的末尾。

【讨论】：

感谢@Manishh 的回复！我将innerHTML 更改为$("#items").append("<%= escape_javascript(render partial: 'search_results', locals: { items: @items } ) %>");，但页面仍会在搜索时重新加载！
我在浏览器检查器和终端中也没有收到任何错误......奇怪！我还添加了return false

【解决方案2】：

您需要将数据附加到您的视图中，但是您的 jQuery 中有问题。

那么，让我们试试 Rails 的方式吧。

当你使用时

respond_to do |format|
  format.html
  format.js 
end

您有search.js.erb 来处理相应视图文件夹views/controller_name/search.js.erb 中的变量

如果您创建该文件并执行与之前编写的相同的操作：

顺便说一句 - 如果你愿意，你可以使用快捷方式：<%=j(...) %> 而不是 <%= escape_javascript(..) %>

$("#items").append("<%=j(render partial: 'search_results', locals: { items: @items } ) %>");
// show something

您可以删除您的 jQuery。当您点击“搜索”时，Rails 知道您要将数据提交到相应的 url search_term_path。

我认为它会起作用，而且你会节省一些代码。

但您需要确保您的 search_terms_path 设置正确，否则 form_tag 将不会“命中”控制器操作。

我建议阅读Working with javascript in Rails 了解更多信息。

记得检查您的部分文件：“_search_result.html.erb”是否没有错误。

祝你好运！

【讨论】：