Scribd
Upload
2K views

Simple Ajax Example For Ruby On Rails

This document describes all the steps and files that must be changed when adding client side Javascript functionality to a Ruby on Rails application.

Uploaded by

Mike Sherman
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Simple Ajax Example For Ruby On Rails

This document describes all the steps and files that must be changed when adding client side Javascript functionality to a Ruby on Rails application.

Uploaded by

Mike Sherman
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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  
Simple  Ajax  Example  for  Ruby  on  Rails  
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  
Simple  Ajax  Example  for  Ruby  on  Rails  
../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 <!-­‐-­‐  START_HIGHLIGHT  -­‐-­‐>  
o <div  class="cart-­‐title"><%=  I18n.t  'layout.cart.title'  %></div>  
o <!-­‐-­‐  END_HIGHLIGHT  -­‐-­‐>  
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 <!-­‐-­‐  START_HIGHLIGHT  -­‐-­‐>  
o <%=  button_to  I18n.t('layout.cart.button.checkout'),  :action  =>  'checkout'  %>  
o <!-­‐-­‐  END_HIGHLIGHT  -­‐-­‐>  
o <!-­‐-­‐  START_HIGHLIGHT  -­‐-­‐>  
o <%=  button_to  I18n.t('layout.cart.button.empty'),  :action  =>  :empty_cart  %>  
o <!-­‐-­‐  END_HIGHLIGHT  -­‐-­‐>  

../app/views/store/_cart_item.html.erb  
• This  partial  renders  the  cart  item,  invoked  from  _cart.html.erb  

  3  
Simple  Ajax  Example  for  Ruby  on  Rails  
o <!-­‐-­‐  START_HIGHLIGHT  -­‐-­‐>  
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  %>&times;</td>  
o    <td><%=h  cart_item.title  %></td>  
o    <td  class="item-­‐price"><%=  number_to_currency(cart_item.price)  %></td>  
o </tr>  
 

  4  

You might also like