Rails：显示搜索结果而不刷新选项卡

Question

我在bootstrap tab有一个搜索form_tag ，我想显示结果而不刷新页面和tab 。

我将remote: true和form_tag一起添加到了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

任何想法如何解决此问题？

Answer 1

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

Answer 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不会“命中”控制器操作。

我建议阅读“ 在Rails中使用javascript”以获取更多信息。

并请记住检查您的部分文件：__search_result.html.erb是否没有错误。

祝好运！