Simple Ajax Example For Ruby On Rails

Simple
Ajax Example for Ruby on Rails
Simple Ajax Example for Ruby on Rails

When pressing the Add to Cart button, we want the cart contents to be displayed to
the left, on the side bar, instead of in a new window.

Here’s what it looks like after “Add to Cart” is pressed. Only the upper portion of the
sidebar is refreshed when the cart contents are added.

1
Implementation

../app/views/layouts/store.html.erb
• In the layout for the store, ensure that the JavaScript libraries are sent to the
browser. Note that downloading these libraries can impact page load
performance.
o <head>
o <title>Karen Sherman Art Online Store</title>
o <!-‐-‐ START:stylesheet -‐-‐>
o <%= stylesheet_link_tag "depot", :media => "all" %>
o <!-‐-‐ END:stylesheet -‐-‐>
o <%= JavaScript_include_tag :defaults %>
o </head>
..app/views/store/Index.html.erb
• The table of paintings for the store is generated in a view. Using Ruby
conventions, the store view is called index.html.erb.
• The highlighted Ruby code is to generate a remote procedure call to the
add_to_cart action on the web server, when the Add to Cart button is pressed
for a particular store item.
o <!-‐-‐ START_HIGHLIGHT -‐-‐>
o <h1><%= I18n.t 'main.title' %></h1>
o <!-‐-‐ END_HIGHLIGHT -‐-‐>
o <% @products.each do |product| -‐%>
o <div class="entry">
o <%= image_tag(product.image_url) %>
o <h3><%=h product.title %></h3>
o <%= product.description %>
o <div class="price-‐line">
o <span class="price"><%= number_to_currency(product.price) %></span>
o <!-‐-‐ START:form_remote_tag -‐-‐>
o <% form_remote_tag :url => {:action => 'add_to_cart', :id => product} do %>
o <%= submit_tag "Add to Cart" %>
o <% end %>
o <!-‐-‐ END:form_remote_tag -‐-‐>
o </div>
o </div>
o <% end %>
• Here’s the HTML snippet for the Ajax request, generated by rendering the
index.html.erb view and executing the Ruby code highlighted above. The
add_to_cart method in the controller is specified in the form action, along
with the product id to be added to the cart on the server.
o <form action="/store/add_to_cart/6" method="post" onsubmit="new
Ajax.Request('/store/add_to_cart/6', {asynchronous:true, evalScripts:true,
parameters:Form.serialize(this)}); return false;"><div
style="margin:0;padding:0"><input name="authenticity_token" type="hidden"
value="3f45149cab8ee6f5199d7ae334a61532c7aa1a84" /></div>
o <input name="commit" type="submit" value="Add to Cart" />
o </form>
2
../app/controllers/store_controller.rb
• Here’s the code on the server for the store controller action add_to_cart. The
highlighted code creates the appropriate response type, depending on
whether the incoming request was identified as being Ajax (request_xhr? =
true).
• The respond_to method is defined in ActionController, the superclass of our
controller. The format.js method in the block will result in the .js method
being called on the Responder object, which is passed into the block by
respond_to, and results in the RJS template being rendered for this action, i.e.
add_to_cart.js.rjs.
o def add_to_cart
o product = Product.find(params[:id])
o @current_item = @cart.add_product(product)
o respond_to do |format|
o format.js if request.xhr?
o format.html {redirect_to_index}
o end
../app/views/store/add_to_cart.js.rjs
• This template uses the cart partial to format the cart contents and then
specifies JavaScript special effects for displaying the cart in the side bar.
o #START_HIGHLIGHT
o page.select("div#notice").each { |div| div.hide }
o #END_HIGHLIGHT
o page.replace_html("cart", :partial => "cart", :object => @cart)
o page[:cart].visual_effect :blind_down if @cart.total_items == 1
o page[:current_item].visual_effect :highlight,
o :startcolor => "#88ff88",
o :endcolor => "#114411"
../app/views/store/_cart.html.erb
• This partial renders the cart contents, invoked from add_to_cart.js.rjs
o <div class="cart-‐title"><%= I18n.t 'layout.cart.title' %></div>
o <table>
o <%= render(:partial => "cart_item", :collection => cart.items) %>
o <tr class="total-‐line">
o <td colspan="2">Total</td>
o <td class="total-‐cell"><%= number_to_currency(cart.total_price) %></td>
o </tr>
o </table>
o <%= button_to I18n.t('layout.cart.button.checkout'), :action => 'checkout' %>
o <%= button_to I18n.t('layout.cart.button.empty'), :action => :empty_cart %>
../app/views/store/_cart_item.html.erb
• This partial renders the cart item, invoked from _cart.html.erb
3
o <% if cart_item == @current_item %>
o <tr id="current_item">
o <% else %>
o <tr>
o <% end %>
o <!-‐-‐ #END_HIGHLIGHT -‐-‐>
o <td><%= cart_item.quantity %>×</td>
o <td><%=h cart_item.title %></td>
o <td class="item-‐price"><%= number_to_currency(cart_item.price) %></td>
o </tr>

4

Simple Ajax Example For Ruby On Rails

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Simple Ajax Example For Ruby On Rails

Uploaded by

Copyright:

Available Formats

Simple

Ajax Example for Ruby on Rails

Simple Ajax Example for Ruby on Rails

You might also like