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();
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>'
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_html '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.