Rails：显示没有刷新选项卡的搜索结果

Question

我在form_tag内搜索bootstrap tab，我想在没有刷新页面和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

有任何想法如何解决这个问题？

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知道您要将数据提交到相应的网址search_term_path。

我认为它会起作用，你会保存一些代码。

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

我建议您阅读Working with javascript in Rails以获取更多信息。

并记得检查您的部分文件：'_ search_result.html.erb'没有错误。

祝好运！