Javascript, AJAX and scriptaculous on Rails
or 'All that Web 2.0 stuff '
Rob Lee
monkeyhelper labs
Slides available at: http://www.monkeyhelper.com
Before we begin
- Show FP site
Javascript and Rails
- Prototype AJAX, DOM manipulation and manages browser quirks
- Prototype - 2 sets of helpers AJAX and DOM
- Scriptaculous builds on top of prototype - visual effects, draggable and sortable elements
First things first
- Remember to include the libraries !
<%= javascript_include_tag :defaults %> or <%= javascript_include_tag :prototype %> <script src="/javascripts/prototype.js" type="text/javascript"></script> <script src="/javascripts/effects.js" type="text/javascript"></script> <script src="/javascripts/dragdrop.js" type="text/javascript"></script> <script src="/javascripts/controls.js" type="text/javascript"></script> <script src="/javascripts/application.js" type="text/javascript"></script>
Prototype and Rails
- Prototype AJAX helpers
- Prototype DOM manipulation helpers
- Hands up for who knows what AJAX is
- AJAX - Asynchronous Javascript and XML
- Live search example
- DEMO feedplanet
Prototype - Live search example
<%= text_field_tag :searchQuery %>
<%= observe_field( :searchQuery,
:frequency => 0.5,
:update => :searchResults,
:url => { :action => :search },
:loading => "Element.show('search-indicator')",
:complete => "Element.hide('search-indicator')") %>
<%= image_tag("indicator.gif",
:id => 'search-indicator',
:style => 'display:none;') %>
- This is a view or a partial in a view
Prototype - Live search example
<%= text_field_tag :searchQuery %>
<%= observe_field( :searchQuery,
:frequency => 0.5,
:update => :searchResults,
:url => { :action => :search },
:loading => "Element.show('search-indicator')",
:complete => "Element.hide('search-indicator')") %>
<%= image_tag("indicator.gif",
:id => 'search-indicator',
:style => 'display:none;') %>
Prototype - Live search example
<%= text_field_tag :searchQuery %>
<%= observe_field( :searchQuery,
:frequency => 0.5,
:update => :searchResults,
:url => { :action => :search },
:loading => "Element.show('search-indicator')",
:complete => "Element.hide('search-indicator')") %>
<%= image_tag("indicator.gif",
:id => 'search-indicator',
:style => 'display:none;') %>
Prototype - Live search example
<%= text_field_tag :searchQuery %>
<%= observe_field( :searchQuery,
:frequency => 0.5,
:update => :searchResults,
:url => { :action => :search },
:loading => "Element.show('search-indicator')",
:complete => "Element.hide('search-indicator')") %>
<%= image_tag("indicator.gif",
:id => 'search-indicator',
:style => 'display:none;') %>
Prototype - Live search example
<%= text_field_tag :searchQuery %>
<%= observe_field( :searchQuery,
:frequency => 0.5,
:update => :searchResults,
:url => { :action => :search },
:loading => "Element.show('search-indicator')",
:complete => "Element.hide('search-indicator')") %>
<%= image_tag("indicator.gif",
:id => 'search-indicator',
:style => 'display:none;') %>
Prototype - Live search example
<%= text_field_tag :searchQuery %>
<%= observe_field( :searchQuery,
:frequency => 0.5,
:update => :searchResults,
:url => { :action => :search },
:loading => "Element.show('search-indicator')",
:complete => "Element.hide('search-indicator')") %>
<%= image_tag("indicator.gif",
:id => 'search-indicator',
:style => 'display:none;') %>
- Mention domain limitation
Prototype - Live search example
def search
@raw_phrase = request.raw_post
@posts = []
@posts_pages = []
unless @raw_phrase == ""
@phrase = "%" + @raw_phrase + "%"
@post_pages,@posts = paginate(:entries,
:per_page => 12,
:order => "time DESC",
:conditions => ["content like ?", @phrase])
end
respond_to do |wants|
wants.html { render :partial => "search"}
wants.js { render :partial => "search"}
wants.xml { render :xml => @posts.to_xml }
end
end
- Mention respond_to and ajax Accepts HTTP header
- DEMO XML example
Prototype - Live search example
<%= text_field_tag :searchQuery %>
<%= observe_field( :searchQuery,
:frequency => 0.5,
:update => :searchResults,
:url => { :action => :search },
:loading => "Element.show('search-indicator')",
:complete => "Element.hide('search-indicator')") %>
<%= image_tag("indicator.gif",
:id => 'search-indicator',
:style => 'display:none;') %>
- statuses : loading,loaded,interactive,success,failure,complete
Prototype - Live search example
<%= text_field_tag :searchQuery %>
<%= observe_field( :searchQuery,
:frequency => 0.5,
:update => :searchResults,
:url => { :action => :search },
:loading => "Element.show('search-indicator')",
:complete => "Element.hide('search-indicator')") %>
<%= image_tag("indicator.gif",
:id => 'search-indicator',
:style => 'display:none;') %>
Generic Ajax Process
- Use a Rails helper like observe_field or link_to_remote
- Rails helper generates javascript
- User initiates Javascript which (via prototype libs) calls a controller action
- Action returns partial (with no layout) and replaces/appends to element in DOM
Scriptaculous
- A library built on top of Prototype - supports:
- Visual effects
- Draggable elements
- Sortable elements
- Rails provides helpers to encapsulate scriptaculous methods
- Written by Thomas Fuchs - one of the Rails Core Team
Visual effects with Scriptaculous
- An example - using the blindup/blinddown effect to hide and show an element
<%= link_to_function "[Show|Hide]",
visual_effect(:toggle_blind, :links, :duration => 1) %>
- Generates :
<a href="#" onclick="Effect.toggle("links",'blind',
{duration:1});; return false;">[Show|Hide]</a>
- Mention AGGREGATOR again
- Many effects are available blindup/down, slideup/down, appear/fade
- Pulsate, squish, grow
The Scriptaculous event queue
- What happens when we want to run multiple effects ?
<%= link_to_remote "More pictures ...", :update => "images",
:url => { :action => "index", :blocktype => 'images', :limit=>'30' },
:loading => visual_effect(:slide_up, :imagescontainer ),
:success => visual_effect(:slide_down, :imagescontainer) %>
- Events on the same DOM element don't play well together
The Scriptaculous event queue
- What happens when we want to run multiple effects ?
<%= link_to_remote "More pictures ...", :update => "images",
:url => { :action => "index", :blocktype => 'images', :limit=>'30' },
:loading => visual_effect(:slide_up, :imagescontainer, :queue => 'front'),
:success => visual_effect(:slide_down, :imagescontainer, :queue => 'end') %>
Scriptaculous effect options
- Taken from Amy Hoy's Scriptaculous CheatSheet
- Transition -> make a fade effect wobble
Standard Javascript Helpers and Macros
- Provides basic wrappers for common javascript tasks
| Macro | Action |
|---|---|
| javascript_tag | Creates script tag wrapper |
| link_to_function | Creates an anchor tag with an onclick method |
| escape_javascript | Escapes quotes in JS strings |
- Also used to provide auto_complete and in_place_edit functionality
In-Place Edit Example
- Creates an in place edit field for the object item's description property
<%= in_place_editor_field :item, :description, {}, {:rows=>10, :cols=>50} %>
- DEMO flickr
Javascript Generator class
- Javascript Generator class exposes DOM manipulation methods (based on Prototype)
- Some sample generator methods:
insert_html replace_html select visual_effect
- Instantiate a JSGenerator class -> page object, call JSGen methods on
- Generates blocks of JavaScript code that allow you to change the content and presentation of DOM elements
- JS Generators also expose scriptaculous methods
RJS Templates
- RJS templates allow you to combine multiple Javascript Generators for a single AJAX request
- Called when HTTP Accept Header is application/javascript
- RJS templates live in same directory as other partials but are named with .rjs extension
- Require an action in a controller like any other partial
Javascript generators and RJS : An example
- A sample RJS template for the purchase action of a shopping cart:
page.insert_html :bottom, 'purchasedlist', @item.name page.visual_effect :highlight, 'purchasedlist' page.replace_html 'totalprice', :partial => 'totalprice'
- The page object allows you to call methods on a representation of the page
- Generates js which is eval'd on return of AJAX call
Javascript generators: An example
- A sample rjs template for the purchase action of a shopping cart:
page.insert_html :bottom, 'purchasedlist', @item.name
page.visual_effect :highlight, 'purchasedlist'
page.replace_html 'totalprice', :partial => 'totalprice'
Javascript generators: An example
- A sample rjs template for the purchase action of a shopping cart:
page.insert_html :bottom, 'purchasedlist', @item.name
page.visual_effect :highlight, 'purchasedlist'
page.replace_html 'totalprice', :partial => 'totalprice'
Javascript generators: An example
- A sample rjs template for the purchase action of a shopping cart:
page.insert_html :bottom, 'purchasedlist', @item.name
page.visual_effect :highlight, 'purchasedlist'
page.replace_html 'totalprice', :partial => 'totalprice'
More fun - iterating over collections
page.select('p.hint').each do |hint|
hint.visual_effect :highlight
end
JS Generators in the controller
- The generators can also be used in controllers :
module ApplicationHelper
def update_time
page.replace_html 'time', Time.now.to_s(:db)
page.visual_effect :highlight, 'time'
end
end
# Controller action
def poll
render(:update) { |page| page.update_time }
end
- End of generators - do summary
Debugging
- To quote Thomas Fuchs:
- "The first rule of AJAX debugging : Use Firefox"
- "The second rule of AJAX debugging : Use Firefox + extensions"
- Firebug, Web Developer Extension and Tamperdata
- DEMO Firebug DOM and Tamperdata
Degrading Gracefully
- What happens when Javascript is disabled ?
- UJS Plugin for Rails
- Attaches behaviours to xhtml elements
Guns don't kill people ...
- A good working knowlegde of Javascript is still required
- Not understanding things is bad
The final curtain
- Some useful links:
- Thomas Fuchs AJAX Presentation
- Amy Hoys scriptaculous cheatsheet
- Live search example