Module | ActionView::Helpers::PrototypeHelper::JavaScriptGenerator::GeneratorMethods |
In: |
lib/action_view/helpers/prototype_helper.rb
|
JavaScriptGenerator generates blocks of JavaScript code that allow you to change the content and presentation of multiple DOM elements. Use this in your Ajax response bodies, either in a <script> tag or as plain JavaScript sent with a Content-type of "text/javascript".
Create new instances with PrototypeHelper#update_page or with ActionController::Base#render, then call insert_html, replace_html, remove, show, hide, visual_effect, or any other of the built-in methods on the yielded generator in any order you like to modify the content and appearance of the current page.
Example:
update_page do |page| page.insert_html :bottom, 'list', "<li>#{@item.name}</li>" page.visual_effect :highlight, 'list' page.hide 'status-indicator', 'cancel-link' end
generates the following JavaScript:
new Insertion.Bottom("list", "<li>Some item</li>"); 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 object, that method will also have access to a page object.
Example:
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
You can also use PrototypeHelper#update_page_tag instead of PrototypeHelper#update_page to wrap the generated JavaScript in a <script> tag.
Returns a element reference by finding it through id in the DOM. This element can then be used for further method calls. Examples:
page['blank_slate'] # => $('blank_slate'); page['blank_slate'].show # => $('blank_slate').show(); page['blank_slate'].show('first').up # => $('blank_slate').show('first').up();
Calls the JavaScript function, optionally with the given arguments.
If a block is given, the block will be passed to a new JavaScriptGenerator; the resulting JavaScript code will then be wrapped inside function() { … } and passed as the called function‘s final argument.
Executes the content of the block after a delay of seconds. Example:
page.delay(20) do page.visual_effect :fade, 'notice' end
Creates a script.aculo.us draggable element. See ActionView::Helpers::ScriptaculousHelper for more information.
Creates a script.aculo.us drop receiving element. See ActionView::Helpers::ScriptaculousHelper for more information.
Inserts HTML at the specified position relative to the DOM element identified by the given id.
position may be one of:
:top: | HTML is inserted inside the element, before the element‘s existing content. |
:bottom: | HTML is inserted inside the element, after the element‘s existing content. |
:before: | HTML is inserted immediately preceeding the element. |
:after: | HTML is inserted immediately following the element. |
options_for_render may be either a string of HTML to insert, or a hash of options to be passed to ActionView::Base#render. For example:
# Insert the rendered 'navigation' partial just before the DOM # element with ID 'content'. insert_html :before, 'content', :partial => 'navigation' # Add a list item to the bottom of the <ul> with ID 'list'. insert_html :bottom, 'list', '<li>Last item</li>'
Returns an object whose to_json evaluates to code. Use this to pass a literal JavaScript expression as an argument to another JavaScriptGenerator method.
Replaces the "outer HTML" (i.e., the entire element, not just its contents) of the DOM element with the given id.
options_for_render may be either a string of HTML to insert, or a hash of options to be passed to ActionView::Base#render. For example:
# Replace the DOM element having ID 'person-45' with the # 'person' partial for the appropriate object. replace 'person-45', :partial => 'person', :object => @person
This allows the same partial that is used for the insert_html to be also used for the input to replace without resorting to the use of wrapper elements.
Examples:
<div id="people"> <%= render :partial => 'person', :collection => @people %> </div> # Insert a new person page.insert_html :bottom, :partial => 'person', :object => @person # Replace an existing person page.replace 'person_45', :partial => 'person', :object => @person
Replaces the inner HTML of the DOM element with the given id.
options_for_render may be either a string of HTML to insert, or a hash of options to be passed to ActionView::Base#render. For example:
# Replace the HTML of the DOM element having ID 'person-45' with the # 'person' partial for the appropriate object. replace_html 'person-45', :partial => 'person', :object => @person
Returns a collection reference by finding it through a CSS pattern in the DOM. This collection can then be used for further method calls. Examples:
page.select('p') # => $$('p'); page.select('p.welcome b').first # => $$('p.welcome b').first(); page.select('p.welcome b').first.hide # => $$('p.welcome b').first().hide();
You can also use prototype enumerations with the collection. Observe:
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:
page.select('#items li').collect('hidden') do |item| item.hide end # => var hidden = $$('#items li').collect(function(value, index) { return value.hide(); });
Creates a script.aculo.us sortable element. Useful to recreate sortable elements after items get added or deleted. See ActionView::Helpers::ScriptaculousHelper for more information.
Starts a script.aculo.us visual effect. See ActionView::Helpers::ScriptaculousHelper for more information.