Skip to content
This repository
Browse code

Add many examples to PrototypeHelper documentation. Closes #7656 [jer…

…emymcanally]

git-svn-id: http://svn-commit.rubyonrails.org/rails/trunk@8302 5ecf4fe2-1ee6-0310-87b1-e25e094e27de
  • Loading branch information...
commit 68261d4b27ad79ad14779b65c98f832c5eaed18e 1 parent 2af36bb
authored December 05, 2007
2  actionpack/CHANGELOG
... ...
@@ -1,5 +1,7 @@
1 1
 *SVN*
2 2
 
  3
+* Add many examples to PrototypeHelper documentation. Closes #7656 [jeremymcanally]
  4
+
3 5
 * Add many examples to assertion documentation. Closes #7803 [jeremymcanally]
4 6
 
5 7
 * Document the supported options for sortable_element. Closes #8820 [berkelep]
281  actionpack/lib/action_view/helpers/prototype_helper.rb
@@ -2,25 +2,106 @@
2 2
 
3 3
 module ActionView
4 4
   module Helpers
5  
-    # Provides a set of helpers for calling Prototype JavaScript functions, 
6  
-    # including functionality to call remote methods using 
7  
-    # Ajax[http://www.adaptivepath.com/publications/essays/archives/000385.php]. 
  5
+    # Prototype[http://www.prototypejs.org/] is a JavaScript library that provides
  6
+    # DOM[http://en.wikipedia.org/wiki/Document_Object_Model] manipulation, 
  7
+    # Ajax[http://www.adaptivepath.com/publications/essays/archives/000385.php]
  8
+    # functionality, and more traditional object-oriented facilities for JavaScript.  
  9
+    # This module provides a set of helpers to make it more convenient to call
  10
+    # functions from Prototype using Rails, including functionality to call remote 
  11
+    # Rails methods (that is, making a background request to a Rails action) using Ajax. 
8 12
     # This means that you can call actions in your controllers without 
9 13
     # reloading the page, but still update certain parts of it using 
10  
-    # injections into the DOM. The common use case is having a form that adds
11  
-    # a new element to a list without reloading the page.
  14
+    # injections into the DOM. A common use case is having a form that adds
  15
+    # a new element to a list without reloading the page or updating a shopping
  16
+    # cart total when a new item is added.
12 17
     #
13  
-    # To be able to use these helpers, you must include the Prototype 
14  
-    # JavaScript framework in your pages. See the documentation for 
15  
-    # ActionView::Helpers::JavaScriptHelper for more information on including 
16  
-    # the necessary JavaScript.
  18
+    # == Usage
  19
+    # To be able to use these helpers, you must first include the Prototype 
  20
+    # JavaScript framework in your pages. 
17 21
     #
  22
+    #  javascript_include_tag 'prototype'
  23
+    #
  24
+    # (See the documentation for 
  25
+    # ActionView::Helpers::JavaScriptHelper for more information on including
  26
+    # this and other JavaScript files in your Rails templates.)
  27
+    #
  28
+    # Now you're ready to call a remote action either through a link...
  29
+    #
  30
+    #  link_to_remote "Add to cart",
  31
+    #    :url => { :action => "add", :id => product.id },
  32
+    #    :update => { :success => "cart", :failure => "error" }  
  33
+    #
  34
+    # ...through a form...
  35
+    #
  36
+    #  <% form_remote_tag :url => '/shipping' do -%>
  37
+    #    <div><%= submit_tag 'Recalculate Shipping' %></div>
  38
+    #  <% end -%>
  39
+    #
  40
+    # ...periodically...
  41
+    #
  42
+    #  periodically_call_remote(:url => 'update', :frequency => '5', :update => 'ticker')
  43
+    #
  44
+    # ...or through an observer (i.e., a form or field that is observed and calls a remote
  45
+    # action when changed).
  46
+    #
  47
+    #  <%= observe_field(:searchbox,
  48
+    #       :url => { :action => :live_search }),
  49
+    #       :frequency => 0.5,
  50
+    #       :update => :hits,
  51
+    #       :with => 'query'
  52
+    #       %>
  53
+    # 
  54
+    # As you can see, there are numerous ways to use Prototype's Ajax functions (and actually more than 
  55
+    # are listed here); check out the documentation for each method to find out more about its usage and options.
  56
+    #
  57
+    # === Common Options
18 58
     # See link_to_remote for documentation of options common to all Ajax
19  
-    # helpers.
  59
+    # helpers; any of the options specified by link_to_remote can be used
  60
+    # by the other helpers.
  61
+    #
  62
+    # == Designing your Rails actions for Ajax
  63
+    # When building your action handlers (that is, the Rails actions that receive your background requests), it's
  64
+    # important to remember a few things.  First, whatever your action would normall return to the browser, it will
  65
+    # return to the Ajax call.  As such, you typically don't want to render with a layout.  This call will cause
  66
+    # 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. 
  67
+    # You can turn the layout off on particular actions by doing the following:
  68
+    #
  69
+    #  class SiteController < ActionController::Base
  70
+    #    layout "standard", :except => [:ajax_method, :more_ajax, :another_ajax]
  71
+    #  end
  72
+    #
  73
+    # Optionally, you could do this in the method you wish to lack a layout:
  74
+    #
  75
+    #  render :layout => false
  76
+    #
  77
+    # You can tell the type of request from within your action using the <tt>request.xhr?</tt> (XmlHttpRequest, the 
  78
+    # method that Ajax uses to make background requests) method.  
  79
+    #  def name
  80
+    #    # Is this an XmlHttpRequest request?
  81
+    #    if (request.xhr?)
  82
+    #      render :text => @name.to_s
  83
+    #    else
  84
+    #      # No?  Then render an action.
  85
+    #      render :action => 'view_attribute', :attr => @name
  86
+    #    end
  87
+    #  end
  88
+    #
  89
+    # The else clause can be left off and the current action will render with full layout and template. An extension
  90
+    # to this solution was posted to Ryan Heneise's blog at ArtOfMission["http://www.artofmission.com/"].
  91
+    #
  92
+    #  layout proc{ |c| c.request.xhr? ? false : "application" }
20 93
     #
21  
-    # See also ActionView::Helpers::ScriptaculousHelper for helpers which work
22  
-    # with the Scriptaculous controls and visual effects library.
  94
+    # Dropping this in your ApplicationController turns the layout off for every request that is an "xhr" request.
23 95
     #
  96
+    # If you are just returning a little data or don't want to build a template for your output, you may opt to simply 
  97
+    # render text output, like this:
  98
+    #
  99
+    #  render :text => 'Return this from my method!'
  100
+    #
  101
+    # Since whatever the method returns is injected into the DOM, this will simply inject some text (or HTML, if you
  102
+    # tell it to).  This is usually how small updates, such updating a cart total or a file count, are handled.
  103
+    #
  104
+    # == Updating multiple elements
24 105
     # See JavaScriptGenerator for information on updating multiple elements
25 106
     # on the page in an Ajax response. 
26 107
     module PrototypeHelper
@@ -41,8 +122,13 @@ module PrototypeHelper
41 122
       # render :partial. 
42 123
       #
43 124
       # Examples:
  125
+      #   # Generates: <a href="#" onclick="new Ajax.Updater('posts', '/blog/destroy/3', {asynchronous:true, evalScripts:true}); 
  126
+      #   #            return false;">Delete this post</a>
44 127
       #   link_to_remote "Delete this post", :update => "posts", 
45 128
       #     :url => { :action => "destroy", :id => post.id }
  129
+      #
  130
+      #   # Generates: <a href="#" onclick="new Ajax.Updater('emails', '/mail/list_emails', {asynchronous:true, evalScripts:true}); 
  131
+      #   #            return false;"><img alt="Refresh" src="/images/refresh.png?" /></a>
46 132
       #   link_to_remote(image_tag("refresh"), :update => "emails", 
47 133
       #     :url => { :action => "list_emails" })
48 134
       # 
@@ -58,6 +144,8 @@ module PrototypeHelper
58 144
       # error occurs:
59 145
       #
60 146
       # Example:
  147
+      #   # Generates: <a href="#" onclick="new Ajax.Updater({success:'posts',failure:'error'}, '/blog/destroy/5', 
  148
+      #   #            {asynchronous:true, evalScripts:true}); return false;">Delete this post</a>
61 149
       #   link_to_remote "Delete this post",
62 150
       #     :url => { :action => "destroy", :id => post.id },
63 151
       #     :update => { :success => "posts", :failure => "error" }
@@ -70,6 +158,8 @@ module PrototypeHelper
70 158
       # can simulate PUT or DELETE over POST. All specified with <tt>options[:method]</tt>
71 159
       #
72 160
       # Example:
  161
+      #   # Generates: <a href="#" onclick="new Ajax.Request('/person/4', {asynchronous:true, evalScripts:true, method:'delete'}); 
  162
+      #   #            return false;">Destroy</a>
73 163
       #   link_to_remote "Destroy", :url => person_url(:id => person), :method => :delete
74 164
       #
75 165
       # By default, these remote requests are processed asynchronous during 
@@ -81,6 +171,9 @@ module PrototypeHelper
81 171
       # find out the HTTP status, use <tt>request.status</tt>.
82 172
       #
83 173
       # Example:
  174
+      #   # Generates: <a href="#" onclick="new Ajax.Request('/words/undo?n=33', {asynchronous:true, evalScripts:true, 
  175
+      #   #            onComplete:function(request){undoRequestCompleted(request)}}); return false;">hello</a>
  176
+      #   word = 'hello'
84 177
       #   link_to_remote word,
85 178
       #     :url => { :action => "undo", :n => word_counter },
86 179
       #     :complete => "undoRequestCompleted(request)"
@@ -107,6 +200,9 @@ module PrototypeHelper
107 200
       # adding additional callbacks for specific status codes.
108 201
       #
109 202
       # Example:
  203
+      #   # Generates: <a href="#" onclick="new Ajax.Request('/testing/action', {asynchronous:true, evalScripts:true, 
  204
+      #   #            on404:function(request){alert('Not found...? Wrong URL...?')}, 
  205
+      #   #            onFailure:function(request){alert('HTTP Error ' + request.status + '!')}}); return false;">hello</a>
110 206
       #   link_to_remote word,
111 207
       #     :url => { :action => "action" },
112 208
       #     404 => "alert('Not found...? Wrong URL...?')",
@@ -164,6 +260,26 @@ def link_to_remote(name, options = {}, html_options = nil)
164 260
       # update a specified div (<tt>options[:update]</tt>) with the results 
165 261
       # of the remote call. The options for specifying the target with :url 
166 262
       # and defining callbacks is the same as link_to_remote.
  263
+      # Examples:
  264
+      #  # Call get_averages and put its results in 'avg' every 10 seconds
  265
+      #  # Generates: 
  266
+      #  #      new PeriodicalExecuter(function() {new Ajax.Updater('avg', '/grades/get_averages', 
  267
+      #  #      {asynchronous:true, evalScripts:true})}, 10)
  268
+      #  periodically_call_remote(:url => { :action => 'get_averages' }, :update => 'avg')
  269
+      #
  270
+      #  # Call invoice every 10 seconds with the id of the customer
  271
+      #  # If it succeeds, update the invoice DIV; if it fails, update the error DIV
  272
+      #  # Generates:
  273
+      #  #      new PeriodicalExecuter(function() {new Ajax.Updater({success:'invoice',failure:'error'}, 
  274
+      #  #      '/testing/invoice/16', {asynchronous:true, evalScripts:true})}, 10)
  275
+      #  periodically_call_remote(:url => { :action => 'invoice', :id => customer.id },
  276
+      #     :update => { :success => "invoice", :failure => "error" }
  277
+      #
  278
+      #  # Call update every 20 seconds and update the new_block DIV
  279
+      #  # Generates:
  280
+      #  # new PeriodicalExecuter(function() {new Ajax.Updater('news_block', 'update', {asynchronous:true, evalScripts:true})}, 20)
  281
+      #  periodically_call_remote(:url => 'update', :frequency => '20', :update => 'news_block')
  282
+      #
167 283
       def periodically_call_remote(options = {})
168 284
          frequency = options[:frequency] || 10 # every ten seconds by default
169 285
          code = "new PeriodicalExecuter(function() {#{remote_function(options)}}, #{frequency})"
@@ -182,6 +298,9 @@ def periodically_call_remote(options = {})
182 298
       # specified with the :action/:method options on :html.
183 299
       #
184 300
       # Example:
  301
+      #   # Generates:
  302
+      #   #      <form action="/some/place" method="post" onsubmit="new Ajax.Request('', 
  303
+      #   #      {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;">
185 304
       #   form_remote_tag :html => { :action => 
186 305
       #     url_for(:controller => "some", :action => "place") }
187 306
       #
@@ -192,6 +311,11 @@ def periodically_call_remote(options = {})
192 311
       # the :url (and the default method is :post).
193 312
       #
194 313
       # form_remote_tag also takes a block, like form_tag:
  314
+      #   # Generates:
  315
+      #   #     <form action="/" method="post" onsubmit="new Ajax.Request('/', 
  316
+      #   #     {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); 
  317
+      #   #     return false;"> <div><input name="commit" type="submit" value="Save" /></div>
  318
+      #   #     </form>
195 319
       #   <% form_remote_tag :url => '/posts' do -%>
196 320
       #     <div><%= submit_tag 'Save' %></div>
197 321
       #   <% end -%>
@@ -264,9 +388,27 @@ def remote_form_for(record_or_name_or_array, *args, &proc)
264 388
       end
265 389
       alias_method :form_remote_for, :remote_form_for
266 390
       
267  
-      # Returns a button input tag that will submit form using XMLHttpRequest 
268  
-      # in the background instead of regular reloading POST arrangement. 
269  
-      # <tt>options</tt> argument is the same as in <tt>form_remote_tag</tt>.
  391
+      # Returns a button input tag with the element name of +name+ and a value (i.e., display text) of +value+
  392
+      # that will submit form using XMLHttpRequest in the background instead of a regular POST request that
  393
+      # reloads the page. 
  394
+      #
  395
+      #  # Create a button that submits to the create action
  396
+      #  # 
  397
+      #  # Generates: <input name="create_btn" onclick="new Ajax.Request('/testing/create', 
  398
+      #  #     {asynchronous:true, evalScripts:true, parameters:Form.serialize(this.form)}); 
  399
+      #  #     return false;" type="button" value="Create" />
  400
+      #  <%= submit_to_remote 'create_btn', 'Create', :url => { :action => 'create' } %>
  401
+      #
  402
+      #  # Submit to the remote action update and update the DIV succeed or fail based
  403
+      #  # on the success or failure of the request
  404
+      #  #
  405
+      #  # Generates: <input name="update_btn" onclick="new Ajax.Updater({success:'succeed',failure:'fail'}, 
  406
+      #  #      '/testing/update', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this.form)}); 
  407
+      #  #      return false;" type="button" value="Update" />
  408
+      #  <%= submit_to_remote 'update_btn', 'Update', :url => { :action => 'update' },
  409
+      #     :update => { :success => "succeed", :failure => "fail" }
  410
+      #
  411
+      # <tt>options</tt> argument is the same as in form_remote_tag.
270 412
       def submit_to_remote(name, value, options = {})
271 413
         options[:with] ||= 'Form.serialize(this.form)'
272 414
 
@@ -279,7 +421,7 @@ def submit_to_remote(name, value, options = {})
279 421
         tag("input", options[:html], false)
280 422
       end
281 423
       
282  
-      # Returns 'eval(request.responseText)' which is the JavaScript function
  424
+      # Returns '<tt>eval(request.responseText)</tt>' which is the JavaScript function
283 425
       # that form_remote_tag can call in :complete to evaluate a multiple
284 426
       # update return document using update_element_function calls.
285 427
       def evaluate_remote_response
@@ -290,6 +432,8 @@ def evaluate_remote_response
290 432
       # Takes the same arguments as link_to_remote.
291 433
       # 
292 434
       # Example:
  435
+      #   # Generates: <select id="options" onchange="new Ajax.Updater('options', 
  436
+      #   # '/testing/update_options', {asynchronous:true, evalScripts:true})">
293 437
       #   <select id="options" onchange="<%= remote_function(:update => "options", 
294 438
       #       :url => { :action => :update_options }) %>">
295 439
       #     <option value="0">Hello</option>
@@ -330,6 +474,15 @@ def remote_function(options)
330 474
       # Ajax call. By default the value of the observed field is sent as a
331 475
       # parameter with the Ajax call.
332 476
       # 
  477
+      # Example:
  478
+      #  # Generates: new Form.Element.Observer('suggest', 0.25, function(element, value) {new Ajax.Updater('suggest', 
  479
+      #  #         '/testing/find_suggestion', {asynchronous:true, evalScripts:true, parameters:'q=' + value})})
  480
+      #  <%= observe_field :suggest, :url => { :action => :find_suggestion },
  481
+      #       :frequency => 0.25,
  482
+      #       :update => :suggest,
  483
+      #       :with => 'q'
  484
+      #       %>
  485
+      #
333 486
       # Required +options+ are either of:
334 487
       # <tt>:url</tt>::       +url_for+-style options for the action to call
335 488
       #                       when the field has changed.
@@ -434,17 +587,16 @@ def include_helpers_from_context
434 587
         #
435 588
         # Example:
436 589
         #
  590
+        #   # Generates:
  591
+        #   #     new Insertion.Bottom("list", "<li>Some item</li>");
  592
+        #   #     new Effect.Highlight("list");
  593
+        #   #     ["status-indicator", "cancel-link"].each(Element.hide);
437 594
         #   update_page do |page|
438 595
         #     page.insert_html :bottom, 'list', "<li>#{@item.name}</li>"
439 596
         #     page.visual_effect :highlight, 'list'
440 597
         #     page.hide 'status-indicator', 'cancel-link'
441 598
         #   end
442 599
         # 
443  
-        # generates the following JavaScript:
444  
-        #
445  
-        #   new Insertion.Bottom("list", "<li>Some item</li>");
446  
-        #   new Effect.Highlight("list");
447  
-        #   ["status-indicator", "cancel-link"].each(Element.hide);
448 600
         #
449 601
         # Helper methods can be used in conjunction with JavaScriptGenerator.
450 602
         # When a helper method is called inside an update block on the +page+ 
@@ -514,18 +666,19 @@ def literal(code)
514 666
           # 
515 667
           # You can also use prototype enumerations with the collection.  Observe:
516 668
           # 
  669
+          #   # Generates: $$('#items li').each(function(value) { value.hide(); });
517 670
           #   page.select('#items li').each do |value|
518 671
           #     value.hide
519 672
           #   end 
520  
-          #   # => $$('#items li').each(function(value) { value.hide(); });
521 673
           #
522 674
           # Though you can call the block param anything you want, they are always rendered in the 
523 675
           # javascript as 'value, index.'  Other enumerations, like collect() return the last statement:
524  
-          # 
  676
+          #
  677
+          #   # Generates: var hidden = $$('#items li').collect(function(value, index) { return value.hide(); }); 
525 678
           #   page.select('#items li').collect('hidden') do |item|
526 679
           #     item.hide
527 680
           #   end
528  
-          #   # => var hidden = $$('#items li').collect(function(value, index) { return value.hide(); });
  681
+          #
529 682
           def select(pattern)
530 683
             JavaScriptElementCollectionProxy.new(self, pattern)
531 684
           end
@@ -547,9 +700,11 @@ def select(pattern)
547 700
           #
548 701
           #   # Insert the rendered 'navigation' partial just before the DOM
549 702
           #   # element with ID 'content'.
  703
+          #   # Generates: new Insertion.Before("content", "<!-- Contents of 'navigation' partial -->");
550 704
           #   insert_html :before, 'content', :partial => 'navigation'
551 705
           #
552 706
           #   # Add a list item to the bottom of the <ul> with ID 'list'.
  707
+          #   # Generates: new Insertion.Bottom("list", "<li>Last item</li>");
553 708
           #   insert_html :bottom, 'list', '<li>Last item</li>'
554 709
           #
555 710
           def insert_html(position, id, *options_for_render)
@@ -564,6 +719,7 @@ def insert_html(position, id, *options_for_render)
564 719
           #
565 720
           #   # Replace the HTML of the DOM element having ID 'person-45' with the
566 721
           #   # 'person' partial for the appropriate object.
  722
+          #   # Generates:  Element.update("person-45", "<!-- Contents of 'person' partial -->");
567 723
           #   replace_html 'person-45', :partial => 'person', :object => @person
568 724
           #
569 725
           def replace_html(id, *options_for_render)
@@ -591,9 +747,13 @@ def replace_html(id, *options_for_render)
591 747
           #   </div>
592 748
           #
593 749
           #   # Insert a new person
  750
+          #   # 
  751
+          #   # Generates: new Insertion.Bottom({object: "Matz", partial: "person"}, "");
594 752
           #   page.insert_html :bottom, :partial => 'person', :object => @person
595 753
           #
596 754
           #   # Replace an existing person
  755
+          #
  756
+          #   # Generates: Element.replace("person_45", "<!-- Contents of partial -->");
597 757
           #   page.replace 'person_45', :partial => 'person', :object => @person
598 758
           #
599 759
           def replace(id, *options_for_render)
@@ -601,31 +761,72 @@ def replace(id, *options_for_render)
601 761
           end
602 762
           
603 763
           # Removes the DOM elements with the given +ids+ from the page.
  764
+          #
  765
+          # Example:
  766
+          #
  767
+          #  # Remove a few people
  768
+          #  # Generates: ["person_23", "person_9", "person_2"].each(Element.remove);
  769
+          #  page.remove 'person_23', 'person_9', 'person_2'
  770
+          #
604 771
           def remove(*ids)
605 772
             loop_on_multiple_args 'Element.remove', ids
606 773
           end
607 774
           
608 775
           # Shows hidden DOM elements with the given +ids+.
  776
+          # 
  777
+          # Example:
  778
+          #
  779
+          #  # Show a few people
  780
+          #  # Generates: ["person_6", "person_13", "person_223"].each(Element.show);
  781
+          #  page.show 'person_6', 'person_13', 'person_223'
  782
+          #
609 783
           def show(*ids)
610 784
             loop_on_multiple_args 'Element.show', ids
611 785
           end
612 786
           
613 787
           # Hides the visible DOM elements with the given +ids+.
  788
+          #
  789
+          # Example:
  790
+          #
  791
+          #  # Hide a few people
  792
+          #  # Generates: ["person_29", "person_9", "person_0"].each(Element.hide);
  793
+          #  page.hide 'person_29', 'person_9', 'person_0'
  794
+          #
614 795
           def hide(*ids)
615 796
             loop_on_multiple_args 'Element.hide', ids           
616 797
           end
617 798
           
618 799
           # Toggles the visibility of the DOM elements with the given +ids+.
  800
+          # Example:
  801
+          #
  802
+          #  # Show a few people
  803
+          #  # Generates: ["person_14", "person_12", "person_23"].each(Element.toggle);
  804
+          #  page.toggle 'person_14', 'person_12', 'person_23'      # Hides the elements
  805
+          #  page.toggle 'person_14', 'person_12', 'person_23'      # Shows the previously hidden elements
  806
+          #
619 807
           def toggle(*ids)
620 808
             loop_on_multiple_args 'Element.toggle', ids            
621 809
           end
622 810
           
623 811
           # Displays an alert dialog with the given +message+.
  812
+          #
  813
+          # Example:
  814
+          #
  815
+          #   # Generates: alert('This message is from Rails!')
  816
+          #   page.alert('This message is from Rails!')
624 817
           def alert(message)
625 818
             call 'alert', message
626 819
           end
627 820
           
628  
-          # Redirects the browser to the given +location+, in the same form as +url_for+.
  821
+          # Redirects the browser to the given +location+ using JavaScript, in the same form as +url_for+.
  822
+          #
  823
+          # Examples:
  824
+          #
  825
+          #  # Generates: window.location.href = "/mycontroller";
  826
+          #  page.redirect_to(:action => 'index')
  827
+          # 
  828
+          #  # Generates: window.location.href = "/account/signup";
  829
+          #  page.redirect_to(:controller => 'account', :action => 'signup')
629 830
           def redirect_to(location)
630 831
             assign 'window.location.href', @context.url_for(location)
631 832
           end
@@ -635,22 +836,52 @@ def redirect_to(location)
635 836
           # If a block is given, the block will be passed to a new JavaScriptGenerator;
636 837
           # the resulting JavaScript code will then be wrapped inside <tt>function() { ... }</tt> 
637 838
           # and passed as the called function's final argument.
  839
+          # 
  840
+          # Examples:
  841
+          #
  842
+          #  # Generates: Element.replace(my_element, "My content to replace with.")
  843
+          #  page.call 'Element.replace', 'my_element', "My content to replace with."
  844
+          #
  845
+          #  # Generates: alert('My message!')
  846
+          #  page.call 'alert', 'My message!'
  847
+          #
638 848
           def call(function, *arguments, &block)
639 849
             record "#{function}(#{arguments_for_call(arguments, block)})"
640 850
           end
641 851
           
642 852
           # Assigns the JavaScript +variable+ the given +value+.
  853
+          #
  854
+          # Examples:
  855
+          #
  856
+          #  # Generates: my_string = "This is mine!";
  857
+          #  page.assign 'my_string', 'This is mine!'
  858
+          #
  859
+          #  # Generates: record_count = 33;
  860
+          #  page.assign 'record_count', 33
  861
+          #
  862
+          #  # Generates: tabulated_total = 47 
  863
+          #  page.assign 'tabulated_total', @total_from_cart
  864
+          #
643 865
           def assign(variable, value)
644 866
             record "#{variable} = #{javascript_object_for(value)}"
645 867
           end
646 868
           
647 869
           # Writes raw JavaScript to the page.
  870
+          #
  871
+          # Example:
  872
+          #
  873
+          #  page << "alert('JavaScript with Prototype.');"
648 874
           def <<(javascript)
649 875
             @lines << javascript
650 876
           end
651 877
           
652 878
           # Executes the content of the block after a delay of +seconds+. Example:
653 879
           #
  880
+          #   # Generates: 
  881
+          #   #     setTimeout(function() {
  882
+          #   #     ;
  883
+          #   #     new Effect.Fade("notice",{});
  884
+          #   #     }, 20000);
654 885
           #   page.delay(20) do
655 886
           #     page.visual_effect :fade, 'notice'
656 887
           #   end

0 notes on commit 68261d4

Please sign in to comment.
Something went wrong with that request. Please try again.