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.
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 %>%>%=f.submit>%=>%=>
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.
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!
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);%=>
create method in our controller. We also fade it in to be pretty.