remote => true, demystified

In my previous post, I discussed the mechanics of an ajax post request. Now that we understand how to distrup the usual behavior of a link or form submit button, allow ajax to take over and send that post request to the controller and manipulate the response body with a callback function, we're going to abstract it all away with the magic of remote: true!

Remote true handles nearly all of the above-mentioned ajax steps, all in one line. Let's take a look at remote: true in action in a simple rails app, www.amiruby.com, that allows you to input a website and find if it utilizes Ruby.
you should be ruby

1. Add :remote => true to your form

 <%= form_for(@search, remote: true) do |f| %>
     <%= f.text_field :keyword, id: 'keyword' %>
     <%=f.submit "Search", class: "search-btn"%>
    <% end %>

What does remote: true do?

remote: true abstracts away the need to add an event listener on your submit button, prevent the default behavior of hitting that submit button (i.e., the redirect or page refresh) and define an ajax post request.

By adding remote: true to our form_for tag, we are carrying out the post request to the create action of our searches controller without ever leaving the page. That brings us to step two...

2. The controller In this case, our search request sends a post request to the create action of our searches controller:

class SearchesController < ApplicationController

  def index
    @search = Search.new
  end

  def show
  end

  def create

    @result = Search.new.am_i_ruby(search_params)    
    respond_to do |f|
      f.html
      f.js 
    end
  end

  private

  def search_params
    params[:search][:keyword]
  end

end

Here, we sanitaize our search terms with the private method search_params, and call the .am_i_ruby method (defined in our Search model), on a new instance of our Search class. The Search class scrapes the results page of the builtwith site and our .am_i_ruby method parses the builtwith results and returns 'Yes' for sites built with ruby on rails and 'Nope' for sites built with other (lesser) programming languages.

Lastly, we've told our create action to respond to requests for both html and js formats. The create method in a rails controller with implicitly look for a create view to render. On to step 3!

3. Create.js.erb

Our create.js.erb file will render a partial of just the response to the question: Am I ruby? (i.e. "Yes", or "Nope"). This will have the effect of appearing just the response below the search bar on our index page when a user inputs a search query.

var result = $('#result')

result.hide().html('<%= j @result %>').fadeIn(250);

The above code hides the div with an id of "result" on document ready and then replaces the content of that div with the javascript rendering of @result--the end product of the create method in our controller. We also fade it in to be pretty.

The javascript in our create.js.erb file takes over the responsiblities of the callback function in an ajax request.

subscribe and never miss a post!

Blog Logo

Sophie DeBenedetto

comments powered by Disqus
comments powered by Disqus