Ransack Search Ajax in Application Layout Rails

I have a Rails 4.2 app in which I'm using Ransack mixed with Geocoder for search. I want to use an Ajax (remote: true) for my search to avoid pageloads and changing of the URL.

When I implement this in my index view it works great, but I want to abstract the search box to the application layout file so it's available site wide instead of just on the index view. When I do this (see code example) I'm able to search just fine, but the problem is I can't seem to figure out how to get the Ajax/Remote: True to work. Here is my code:

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

resources/index.js.erb

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

resources/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

resources/_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>

resources/_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>

resources/_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>

Again, I can get this working in the index view/controller with js and remote: true but when I implement the search box sitewide in the application layout file I cannot use JS/remote: true.

I'm sure I'm missing something simple in my implementation so if anyone has any advice, please let me know. If my question and/or code examples are not clear let me know and I'll explain in further detail.

Recommended topics

Hot tags