Web Forms and Ruby on Rails - 15.17 Creating an Ajax Form (Page 2 of 4 )
You want to build a web application that's responsive and easy to use. You don't want your users to spend lots of time waiting around for the browser to redraw the screen.
Let's change the application from Recipe 15.16 so that the new action is AJAX-enabled (if you followed that recipe all the way through, and made the edit action use new.rhtml instead of edit.rhtml, you'll need to undo that change and make edit use its own view template).
We'll start with the view template. Edit app/views/items/new.rhtml to look like this:
Those small changes make a standard HTML form into an Ajax form. The main difference is that we call form_remote_tag instead of form_tag. The other differences are the arguments we pass into that method.
The first change is that we put the :action parameter inside a hash passed into the :url option. Ajax forms have more options associated with them than a normal form, so you can't describe its form action as simply as you can with form_tag.
When the user clicks the submit button, the form values are serialized and sent to the destination action (in this case, create) in the background. The create action processes the form submission as before, and returns a snippet of HTML.
What happens to this HTML? That's what the :update option is for. It tells Rails to take the result of the form submission, and stick it into the element with the HTML ID of "show_item". This is why we added that <div id="show_item"> tag to the top of the template: that's where the response from the server goes.
That's the view. We also need to modify the create action in the controller so that when you make an Ajax form submission, the server returns a snippet of HTML. This is the snippet that's inserted into the "show_item" element on the browser side. If you make a regular (nonAjax) form submission, the server can behave as it does in Recipe 15.16, and send an HTTP redirect.* Here's what the controller class needs to look like:
class ItemsController < ApplicationController def new @item = Item.new end
def create @item = Item.create(params[:item]) if request.xml_http_request? render :action => 'show', :layout => false else redirect_to :action => 'edit', :id => @item.id end end
def edit @item = Item.find(params[:id])
if request.post? @item.update_attributes(params[:item]) redirect_to :action => 'edit', :id => @item.id end end end
This code references a new view, show. It's the tiny HTML snippet that's returned by the server, and stuck into the "show_element" tag by the web browser. We need to define it:
<!-- app/views/items/show.rhtml -->
Your most recently created item:<br /> Name: <%= @item.name %><br /> Value: <%= @item.value %><br /> <hr>
Now when you use http://localhost:3000/items/new to add new items to the data base, you won't be redirected to the edit action. You'll stay on the new page, and the results of your form submission will be displayed above the form. This makes it easy to create many new items at once.
Recipe 15.16 shows how to submit data to a form in the traditional way: the user clicks a "submit" button, the browser sends a request to the server, the server returns a response page, and the browser renders the response page.
Recently, sites like Gmail and Google Maps have popularized techniques for sending and receiving data without a page refresh. Collectively, these techniques are called Ajax. Ajax is a very useful tool for improving your application's response time and usability.
An Ajax request is a real HTTP request to one of your application's actions, and you can deal with it as you would any other request. Most of the time, though, you won't be returning a full HTML page. You'll just be returning a snippet of data. The web browser will be sending the Ajax request in the context of a full web page (which you served up earlier) that knows how to handle the response snippet.
Called when the web browser begins to load the remote document.
Called when the browser has finished loading the remote document.
Called when the user can interact with the remote document, even if it has not finished loading.
Called when the XMLHttpRequest is completed, and the HTTP status code is in the 2XX range.
Called when the XMLHttpRequest is completed, and the HTTP status code is not in the 2XX range.
Called when the XMLHttpRequest is complete. If :success and/or :failure are also present, runs after they do.