From 68261d4b27ad79ad14779b65c98f832c5eaed18e Mon Sep 17 00:00:00 2001 From: Marcel Molina Date: Wed, 5 Dec 2007 20:05:51 +0000 Subject: Add many examples to PrototypeHelper documentation. Closes #7656 [jeremymcanally] git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@8302 5ecf4fe2-1ee6-0310-87b1-e25e094e27de --- actionpack/CHANGELOG | 2 + .../lib/action_view/helpers/prototype_helper.rb | 281 +++++++++++++++++++-- 2 files changed, 258 insertions(+), 25 deletions(-) diff --git a/actionpack/CHANGELOG b/actionpack/CHANGELOG index 4338efc161..f30eba3e18 100644 --- a/actionpack/CHANGELOG +++ b/actionpack/CHANGELOG @@ -1,5 +1,7 @@ *SVN* +* Add many examples to PrototypeHelper documentation. Closes #7656 [jeremymcanally] + * Add many examples to assertion documentation. Closes #7803 [jeremymcanally] * Document the supported options for sortable_element. Closes #8820 [berkelep] diff --git a/actionpack/lib/action_view/helpers/prototype_helper.rb b/actionpack/lib/action_view/helpers/prototype_helper.rb index 4b502b0e5b..726b790a3d 100644 --- a/actionpack/lib/action_view/helpers/prototype_helper.rb +++ b/actionpack/lib/action_view/helpers/prototype_helper.rb @@ -2,25 +2,106 @@ require 'set' module ActionView module Helpers - # Provides a set of helpers for calling Prototype JavaScript functions, - # including functionality to call remote methods using - # Ajax[http://www.adaptivepath.com/publications/essays/archives/000385.php]. + # Prototype[http://www.prototypejs.org/] is a JavaScript library that provides + # DOM[http://en.wikipedia.org/wiki/Document_Object_Model] manipulation, + # Ajax[http://www.adaptivepath.com/publications/essays/archives/000385.php] + # functionality, and more traditional object-oriented facilities for JavaScript. + # This module provides a set of helpers to make it more convenient to call + # functions from Prototype using Rails, including functionality to call remote + # Rails methods (that is, making a background request to a Rails action) using Ajax. # This means that you can call actions in your controllers without # reloading the page, but still update certain parts of it using - # injections into the DOM. The common use case is having a form that adds - # a new element to a list without reloading the page. + # injections into the DOM. A common use case is having a form that adds + # a new element to a list without reloading the page or updating a shopping + # cart total when a new item is added. # - # To be able to use these helpers, you must include the Prototype - # JavaScript framework in your pages. See the documentation for - # ActionView::Helpers::JavaScriptHelper for more information on including - # the necessary JavaScript. + # == Usage + # To be able to use these helpers, you must first include the Prototype + # JavaScript framework in your pages. # + # javascript_include_tag 'prototype' + # + # (See the documentation for + # ActionView::Helpers::JavaScriptHelper for more information on including + # this and other JavaScript files in your Rails templates.) + # + # Now you're ready to call a remote action either through a link... + # + # link_to_remote "Add to cart", + # :url => { :action => "add", :id => product.id }, + # :update => { :success => "cart", :failure => "error" } + # + # ...through a form... + # + # <% form_remote_tag :url => '/shipping' do -%> + #
<%= submit_tag 'Recalculate Shipping' %>
+ # <% end -%> + # + # ...periodically... + # + # periodically_call_remote(:url => 'update', :frequency => '5', :update => 'ticker') + # + # ...or through an observer (i.e., a form or field that is observed and calls a remote + # action when changed). + # + # <%= observe_field(:searchbox, + # :url => { :action => :live_search }), + # :frequency => 0.5, + # :update => :hits, + # :with => 'query' + # %> + # + # As you can see, there are numerous ways to use Prototype's Ajax functions (and actually more than + # are listed here); check out the documentation for each method to find out more about its usage and options. + # + # === Common Options # See link_to_remote for documentation of options common to all Ajax - # helpers. + # helpers; any of the options specified by link_to_remote can be used + # by the other helpers. + # + # == Designing your Rails actions for Ajax + # When building your action handlers (that is, the Rails actions that receive your background requests), it's + # important to remember a few things. First, whatever your action would normall return to the browser, it will + # return to the Ajax call. As such, you typically don't want to render with a layout. This call will cause + # the layout to be transmitted back to your page, and, if you have a full HTML/CSS, will likely mess a lot of things up. + # You can turn the layout off on particular actions by doing the following: + # + # class SiteController < ActionController::Base + # layout "standard", :except => [:ajax_method, :more_ajax, :another_ajax] + # end + # + # Optionally, you could do this in the method you wish to lack a layout: + # + # render :layout => false + # + # You can tell the type of request from within your action using the request.xhr? (XmlHttpRequest, the + # method that Ajax uses to make background requests) method. + # def name + # # Is this an XmlHttpRequest request? + # if (request.xhr?) + # render :text => @name.to_s + # else + # # No? Then render an action. + # render :action => 'view_attribute', :attr => @name + # end + # end + # + # The else clause can be left off and the current action will render with full layout and template. An extension + # to this solution was posted to Ryan Heneise's blog at ArtOfMission["http://www.artofmission.com/"]. + # + # layout proc{ |c| c.request.xhr? ? false : "application" } # - # See also ActionView::Helpers::ScriptaculousHelper for helpers which work - # with the Scriptaculous controls and visual effects library. + # Dropping this in your ApplicationController turns the layout off for every request that is an "xhr" request. # + # If you are just returning a little data or don't want to build a template for your output, you may opt to simply + # render text output, like this: + # + # render :text => 'Return this from my method!' + # + # Since whatever the method returns is injected into the DOM, this will simply inject some text (or HTML, if you + # tell it to). This is usually how small updates, such updating a cart total or a file count, are handled. + # + # == Updating multiple elements # See JavaScriptGenerator for information on updating multiple elements # on the page in an Ajax response. module PrototypeHelper @@ -41,8 +122,13 @@ module ActionView # render :partial. # # Examples: + # # Generates: Delete this post # link_to_remote "Delete this post", :update => "posts", # :url => { :action => "destroy", :id => post.id } + # + # # Generates: Refresh # link_to_remote(image_tag("refresh"), :update => "emails", # :url => { :action => "list_emails" }) # @@ -58,6 +144,8 @@ module ActionView # error occurs: # # Example: + # # Generates: Delete this post # link_to_remote "Delete this post", # :url => { :action => "destroy", :id => post.id }, # :update => { :success => "posts", :failure => "error" } @@ -70,6 +158,8 @@ module ActionView # can simulate PUT or DELETE over POST. All specified with options[:method] # # Example: + # # Generates: Destroy # link_to_remote "Destroy", :url => person_url(:id => person), :method => :delete # # By default, these remote requests are processed asynchronous during @@ -81,6 +171,9 @@ module ActionView # find out the HTTP status, use request.status. # # Example: + # # Generates: hello + # word = 'hello' # link_to_remote word, # :url => { :action => "undo", :n => word_counter }, # :complete => "undoRequestCompleted(request)" @@ -107,6 +200,9 @@ module ActionView # adding additional callbacks for specific status codes. # # Example: + # # Generates: hello # link_to_remote word, # :url => { :action => "action" }, # 404 => "alert('Not found...? Wrong URL...?')", @@ -164,6 +260,26 @@ module ActionView # update a specified div (options[:update]) with the results # of the remote call. The options for specifying the target with :url # and defining callbacks is the same as link_to_remote. + # Examples: + # # Call get_averages and put its results in 'avg' every 10 seconds + # # Generates: + # # new PeriodicalExecuter(function() {new Ajax.Updater('avg', '/grades/get_averages', + # # {asynchronous:true, evalScripts:true})}, 10) + # periodically_call_remote(:url => { :action => 'get_averages' }, :update => 'avg') + # + # # Call invoice every 10 seconds with the id of the customer + # # If it succeeds, update the invoice DIV; if it fails, update the error DIV + # # Generates: + # # new PeriodicalExecuter(function() {new Ajax.Updater({success:'invoice',failure:'error'}, + # # '/testing/invoice/16', {asynchronous:true, evalScripts:true})}, 10) + # periodically_call_remote(:url => { :action => 'invoice', :id => customer.id }, + # :update => { :success => "invoice", :failure => "error" } + # + # # Call update every 20 seconds and update the new_block DIV + # # Generates: + # # new PeriodicalExecuter(function() {new Ajax.Updater('news_block', 'update', {asynchronous:true, evalScripts:true})}, 20) + # periodically_call_remote(:url => 'update', :frequency => '20', :update => 'news_block') + # def periodically_call_remote(options = {}) frequency = options[:frequency] || 10 # every ten seconds by default code = "new PeriodicalExecuter(function() {#{remote_function(options)}}, #{frequency})" @@ -182,6 +298,9 @@ module ActionView # specified with the :action/:method options on :html. # # Example: + # # Generates: + # #
# form_remote_tag :html => { :action => # url_for(:controller => "some", :action => "place") } # @@ -192,6 +311,11 @@ module ActionView # the :url (and the default method is :post). # # form_remote_tag also takes a block, like form_tag: + # # Generates: + # #
+ # #
# <% form_remote_tag :url => '/posts' do -%> #
<%= submit_tag 'Save' %>
# <% end -%> @@ -264,9 +388,27 @@ module ActionView end alias_method :form_remote_for, :remote_form_for - # Returns a button input tag that will submit form using XMLHttpRequest - # in the background instead of regular reloading POST arrangement. - # options argument is the same as in form_remote_tag. + # Returns a button input tag with the element name of +name+ and a value (i.e., display text) of +value+ + # that will submit form using XMLHttpRequest in the background instead of a regular POST request that + # reloads the page. + # + # # Create a button that submits to the create action + # # + # # Generates: + # <%= submit_to_remote 'create_btn', 'Create', :url => { :action => 'create' } %> + # + # # Submit to the remote action update and update the DIV succeed or fail based + # # on the success or failure of the request + # # + # # Generates: + # <%= submit_to_remote 'update_btn', 'Update', :url => { :action => 'update' }, + # :update => { :success => "succeed", :failure => "fail" } + # + # options argument is the same as in form_remote_tag. def submit_to_remote(name, value, options = {}) options[:with] ||= 'Form.serialize(this.form)' @@ -279,7 +421,7 @@ module ActionView tag("input", options[:html], false) end - # Returns 'eval(request.responseText)' which is the JavaScript function + # Returns 'eval(request.responseText)' which is the JavaScript function # that form_remote_tag can call in :complete to evaluate a multiple # update return document using update_element_function calls. def evaluate_remote_response @@ -290,6 +432,8 @@ module ActionView # Takes the same arguments as link_to_remote. # # Example: + # # Generates: { :action => :update_options }) %>"> # @@ -330,6 +474,15 @@ module ActionView # Ajax call. By default the value of the observed field is sent as a # parameter with the Ajax call. # + # Example: + # # Generates: new Form.Element.Observer('suggest', 0.25, function(element, value) {new Ajax.Updater('suggest', + # # '/testing/find_suggestion', {asynchronous:true, evalScripts:true, parameters:'q=' + value})}) + # <%= observe_field :suggest, :url => { :action => :find_suggestion }, + # :frequency => 0.25, + # :update => :suggest, + # :with => 'q' + # %> + # # Required +options+ are either of: # :url:: +url_for+-style options for the action to call # when the field has changed. @@ -434,17 +587,16 @@ module ActionView # # Example: # + # # Generates: + # # new Insertion.Bottom("list", "
  • Some item
    • "); + # # new Effect.Highlight("list"); + # # ["status-indicator", "cancel-link"].each(Element.hide); # update_page do |page| # page.insert_html :bottom, 'list', "
  • #{@item.name}
    • " # page.visual_effect :highlight, 'list' # page.hide 'status-indicator', 'cancel-link' # end # - # generates the following JavaScript: - # - # new Insertion.Bottom("list", "
  • Some item
    • "); - # new Effect.Highlight("list"); - # ["status-indicator", "cancel-link"].each(Element.hide); # # Helper methods can be used in conjunction with JavaScriptGenerator. # When a helper method is called inside an update block on the +page+ @@ -514,18 +666,19 @@ module ActionView # # You can also use prototype enumerations with the collection. Observe: # + # # Generates: $$('#items li').each(function(value) { value.hide(); }); # page.select('#items li').each do |value| # value.hide # end - # # => $$('#items li').each(function(value) { value.hide(); }); # # Though you can call the block param anything you want, they are always rendered in the # javascript as 'value, index.' Other enumerations, like collect() return the last statement: - # + # + # # Generates: var hidden = $$('#items li').collect(function(value, index) { return value.hide(); }); # page.select('#items li').collect('hidden') do |item| # item.hide # end - # # => var hidden = $$('#items li').collect(function(value, index) { return value.hide(); }); + # def select(pattern) JavaScriptElementCollectionProxy.new(self, pattern) end @@ -547,9 +700,11 @@ module ActionView # # # Insert the rendered 'navigation' partial just before the DOM # # element with ID 'content'. + # # Generates: new Insertion.Before("content", ""); # insert_html :before, 'content', :partial => 'navigation' # # # Add a list item to the bottom of the