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:
# Generates: # new Insertion.Bottom("list", "<li>Some item</li>"); # new Effect.Highlight("list"); # ["status-indicator", "cancel-link"].each(Element.hide); 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
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.</script>
| Public Methods | |
|---|---|
| << | Writes raw JavaScript to the page. |
| [] | Returns a element reference by finding it through id in the DOM. This element can then be used for further method calls. Examples: |
| alert | Displays an alert dialog with the given message. |
| assign | Assigns the JavaScript variable the given value. |
| call | Calls the JavaScript function, optionally with the given arguments. |
| delay | Executes the content of the block after a delay of seconds. Example: |
| draggable | Creates a script.aculo.us draggable element. See ActionView::Helpers::ScriptaculousHelper for more information. |
| drop_ |
Creates a script.aculo.us drop receiving element. See ActionView::Helpers::ScriptaculousHelper for more information. |
| hide | Hides the visible DOM elements with the given ids. |
| insert_ |
Inserts HTML at the specified position relative to the DOM element identified by the given id. |
| literal | Returns an object whose #to_json evaluates to code. Use this to pass a literal JavaScript expression as an argument to another JavaScriptGenerator method. |
| redirect_ |
Redirects the browser to the given location using JavaScript, in the same form as url_for. |
| remove | Removes the DOM elements with the given ids from the page. |
| replace | Replaces the "outer HTML" (i.e., the entire element, not just its contents) of the DOM element with the given id. |
| replace_ |
Replaces the inner HTML of the DOM element with the given id. |
| select | 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: |
| show | Shows hidden DOM elements with the given ids. |
| sortable | 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. |
| to_ |
|
| toggle | Toggles the visibility of the DOM elements with the given ids. Example: |
| visual_ |
Starts a script.aculo.us visual effect. See ActionView::Helpers::ScriptaculousHelper for more information. |
| Private Methods | |
|---|---|
| arguments_ |
|
| block_ |
|
| javascript_ |
|
| loop_ |
|
| method_ |
|
| page | |
| record | |
| render | |
<code/>and<pre/>for code samples.