搜索時觸發AJAX（pg_search gem）

Question

我有一個使用pg_search gem的搜索表單。 我基本上從Railscast＃343改編了它。

但是，無論我嘗試什么，它總是重新加載搜索頁面。

我嘗試在表單中添加：remote => true，並使用format.js放入控制器中的respond_to塊。 我還嘗試在僅返回js的路由中創建單獨的“ /搜索”路徑，但我的頁面始終使用url中的參數重新加載。

這是相關的代碼：

形成：

  <div id="search_controls">
    <form class="form-inline">
      <div class="form-group">
        <%= form_tag discover_path, :method => 'get', id: "tapes_search" do %>
          <%= text_field_tag :query, params[:query], :autocomplete => :off, id: 'search_field', class: "form-control" %>
          <%= submit_tag "Search", :name => nil, id: 'search_submit', class: 'btn btn-default' %>
        <% end %>
      </div>
    </form>
  </div>
</div>

控制器：

def index
  if params[:query]
    @tapes = Tape.search(params[:query]).order("release_date DESC", :id).paginate(:page => params[:page], :per_page => 15)
  else
    @tapes = Tape.order("release_date DESC", :id).paginate(:page => params[:page], :per_page => 15)
  end
end

莫代爾：

include PgSearch
pg_search_scope :search, against: [:album_name, :artist_name], 
    using: {tsearch: {dictionary: "english"}},
    ignoring: :accents

def self.text_search(query)
    search(query)
end

路線

match '/discover', to: 'tapes#index', via: 'get'

這顯然是因為它沒有任何ajax功能。 有人會介意告訴我如何謹慎地提交參數而無需重新加載頁面和響應來觸發js嗎？

我在我的網站上使用了ajax，不知道是什么讓我抱​​在這里:(謝謝！

Answer 1

：remote => true選項在這里沒有幫助，它實際上根本不是很有用，但這將是一個單獨的主題。

通常你可以通過以下方式處理：

1. https://github.com/waymondo/turboboost - >很容易在rails中形成ajax
2. 在jquery中使用ajax方法。 示例： http ： //api.jquery.com/jquery.post/
3. 如果要構建更大的東西，請使用Ember或Angular之類的js框架。

Answer 2

我最近遇到了類似的問題，不得不從頭開始編寫AJAX API調用，而不是使用remote => true：

jQuery(function() {
  $('form').submit(function(e) {
    var getData = $(this).serialize(); //grabs data from form input
    var formURL = $(this).attr('action'); 
    $.ajax({
      url: formURL,
      type: 'GET',
      data: getData,
      success: function(data, textStatus, jqXHR){
        $('search_controls').append(data); //this is the JS that gets triggered in response to a successful return. Data is what was returned.
      },
      error: function(jqXHR, textStatus, errorThrown){}
    });
    e.preventDefault();
  });
});

$(document).submit();