Question

我有一个使用pg_search gem的搜索表单。我基本上从Railscast＃343改编了它。

然而，无论我尝试什么，它总是在搜索页面上重新加载。

我尝试过添加：remote =＆gt;对表单执行true，并使用format.js放入控制器中的respond_to块。我也试过创建一个单独的＆＃39; /搜索＆＃39;路径中的路径只返回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 =＆gt; true选项在这里不会对你有帮助，它实际上根本不是很有用，但这将是一个单独的主题。

通常你可以通过以下方式处理：

https://github.com/waymondo/turboboost - ＆gt;非常容易在轨道中形成ajax
在jquery中使用ajax方法。示例：http://api.jquery.com/jquery.post/
如果要构建更大的东西，请使用一些像Ember或Angular这样的js框架。

Answer 2

我最近遇到了类似的问题，不得不从头开始编写AJAX API调用而不是使用remote =＆gt;真：

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();

搜索时触发AJAX（pg_search gem）

2 个答案: