Rails/AJAX: Partial not displaying?

Question

Background (changed after correspondance with @TomLord):

I am building a simple site with only a index page and no subpages. The index page has a "search" field that takes input (id) and sends a GET request to a RESTful API running in the background. The response from the API is JSON {"market price": "4306057.0", "retail price": "4995000.0"}.

I want to display this result on the index page, together with the search field. However, when I press the button the result is not displayed anywhere.

---

Code:

index.html.erb

<section id="search">
  <div class="container">
    <%= form_tag({controller: "model_request", action: "result"}, method: "get", remote: true) do %>
      <%= label_tag(:q, "Search for") %>
      <%= text_field_tag(:q, "913384637") %>
      <%= submit_tag("Get the price!") %>
    <% end %>
  </div>
</section>

<section id="display_result">
  <div class="container">
  </div>
</section>

And the modelrequest_controller.rb looks like this:

class ModelrequestController < ApplicationController

  def result
    id = params['q'].capitalize
    response = RestClient::Request.execute(
      method:  :get,
      url:     "http://0.0.0.0:80/?id=#{id}")
    @result = JSON.parse response

    respond_to do |format|
      format.js {render layout: false}
    end
  end

  end

My routes.rb

Rails.application.routes.draw do

  root 'index#index'

  match "/modelrequest", to: "modelrequest#result", via: 'get'

end

The javascript for results looks like this:

result.js.erb

$("#display_result").html("<%= escape_javascript(render partial: 'modelrequest/result', locals: { result: @result } ) %>");

And the simple _result.html.erb for displaying the partial is

<div id="display_result">
  <%= @result %>
</div>

---

Output:

Started GET "/model_request?utf8=%E2%9C%93&q=913384637&commit=Get%20the%20price!" for 127.0.0.1 at 2018-12-19 20:55:33 +0100
Processing by ModelRequestController#result as JS
  Parameters: {"utf8"=>"✓", "q"=>"913384637", "commit"=>"Get the price!"}
  Rendering model_request/result.js.erb
  Rendered model_request/_result.html.erb (0.8ms)
  Rendered model_request/result.js.erb (6.8ms)
Completed 200 OK in 383ms (Views: 11.6ms | ActiveRecord: 0.0ms)

Answer 1

In a "normal" rails site, a search form works as follows -

You define a form in the view. This will, by default, POST data to an endpoint - but you can also do this via a GET request. In your case, you originally chose:

form_tag("/search", method: "get")

This will send the form data to GET /search, synchronously, and therefore perform a full page reload.

This is a perfectly valid thing to do. However, you wanted to remain on the index page - therefore the request needs to be asynchronous:

form_tag("/search", method: "get", remote: true)

...But now, that endpoint needs to do something different. Instead of rendering a new page, it needs to partially update the current page.

The standard approach for this in a rails application is to do something along the lines of:

# In the controller action, e.g. SearchController
def show
  @results = # ...

  respond_to do |format|
    format.js {render layout: false}
  end
end

# In the view, e.g. `search/show.js.erb`
$("#display_result").html("<%= escape_javascript(render partial: 'results', locals: { results: @results } ) %>");

# In an HTML partial, e.g. `search/_results.html.erb`
<% results.each do %>
  ...

The key idea is that on your main page (index.html.erb?), you must have a container to display the results. Then, rather than rendering a new page, you are merely rendering an HTML update inside that container.

---

This is, of course, not the only way of doing it. Modern websites will often instead fetch JSON data for a search result and then determine how to display that via JavaScript.

However, the above approach is the most "minimal" change from your current design - without needing to add additional design patterns, you can leave most of your existing haml/erb templates as-is, and just add a little code to render the results as a partial.