Ransack在应用程序布局Rails中搜索Ajax

Question

我有一个Rails 4.2应用程序,其中我使用Ransack与Geocoder混合进行搜索.我想在搜索中使用Ajax(remote:true)来避免页面加载和更改URL.

当我在索引视图中实现它时,它工作得很好,但我想将搜索框抽象到应用程序布局文件,因此它可以在站点范围内使用,而不是仅在索引视图上.当我这样做(参见代码示例)我能够搜索得很好,但问题是我似乎无法弄清楚如何获得Ajax/Remote:True工作.这是我的代码:

application.html.erb

  <%= search_form_for(@search, url:"/resources", :method => :get, remote: true) do |f| %>
     <%= text_field_tag :location, params[:location], placeholder: "Houston, TX", class: "input-sm form-control" %>
      <%= f.submit "Find", class:'btn btn-sm btn-info' %>
  <% end %>

application_controller.rb

  before_action :build_search
  private
  def build_search
    if params[:location].present?
        @search = Resource.near(params[:location], 100).search(params[:q])
      else
            @search = Resource.search(params[:q])
      end
  end

资源/ index.js.erb的

$("#mapdisplay").html("<%= escape_javascript render("map") %>");
$("#results").html("<%= escape_javascript render("results") %>");

资源/ index.html.erb

<div id="mapdisplay">
    <%= render 'map' %>
</div>
<div id="results">
    <%= render 'results' %>
</div>

resources_controller.rb

before_action :set_search_results, only: [:show, :index, :new]
def index
        @hash = Gmaps4rails.build_markers(@resources) do |resource, marker|
        marker.lat resource.latitude
        marker.lng resource.longitude
        end
        respond_to do |format|
            format.html {}
            format.js {}
        end
  end
private
  def set_search_results
    @resources = @search.result(distinct: true)
  end

资源/ _map.html.erb

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<h4>Resources</h4>
<div id="search">
  <%= render 'search' %>
</div>
<div class="pull-right">
    <%= link_to "Add", new_resource_path, class: 'btn btn-info btn-medium' %>
</div>
<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script>
handler = Gmaps.build('Google');
handler.buildMap({
    provider: {
      disableDefaultUI: true
      // pass in other Google Maps API options here
    },
    internal: {
      id: 'map'
    }
  },
  function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  }
);
</script>

资源/ _search.html.erb

<div class="form-group">
  <%= search_form_for(@search, :id => "resource_search", remote: true) do |f| %>
    <%= text_field_tag :location, params[:location], placeholder: "Houston, TX", class: "input-sm form-control" %>
    <%= f.submit "Find", class:'btn btn-sm btn-info' %>
<% end %>
</div>

资源/ _results.html.erb

  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Notes</th>
      </tr>
    </thead>
    <tbody>
  <% @resources.each do |r| %>
      <tr>
        <td><%= link_to "#{r.name}", r %></td><td><%= r.address %></td><td><%= r.notes %></td>
      </tr>
  <% end %>
    </tbody>
  </table>

再次,我可以使用js和remote:true在索引视图/控制器中工作,但是当我在应用程序布局文件中实现站点范围内的搜索框时,我无法使用JS/remote:true.

我确定我在实施过程中遗漏了一些简单的内容,所以如果有人有任何建议,请告诉我.如果我的问题和/或代码示例不清楚,请告诉我,我会进一步详细解释.