<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Module: ActionView::Helpers::PrototypeHelper::JavaScriptGenerator::GeneratorMethods</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="../../../../.././rdoc-style.css" type="text/css" media="screen" />
<script type="text/javascript">
// <![CDATA[
function popupCode( url ) {
window.open(url, "Code", "resizable=yes,scrollbars=yes,toolbar=no,status=no,height=150,width=400")
}
function toggleCode( id ) {
if ( document.getElementById )
elem = document.getElementById( id );
else if ( document.all )
elem = eval( "document.all." + id );
else
return false;
elemStyle = elem.style;
if ( elemStyle.display != "block" ) {
elemStyle.display = "block"
} else {
elemStyle.display = "none"
}
return true;
}
// Make codeblocks hidden by default
document.writeln( "<style type=\"text/css\">div.method-source-code { display: none }</style>" )
// ]]>
</script>
</head>
<body>
<div id="classHeader">
<table class="header-table">
<tr class="top-aligned-row">
<td><strong>Module</strong></td>
<td class="class-name-in-header">ActionView::Helpers::PrototypeHelper::JavaScriptGenerator::GeneratorMethods</td>
</tr>
<tr class="top-aligned-row">
<td><strong>In:</strong></td>
<td>
<a href="../../../../../files/lib/action_view/helpers/prototype_helper_rb.html">
lib/action_view/helpers/prototype_helper.rb
</a>
<br />
</td>
</tr>
</table>
</div>
<!-- banner header -->
<div id="bodyContent">
<div id="contextContent">
<div id="description">
<p>
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".
</p>
<p>
Create new instances with <a
href="../../PrototypeHelper.html#M000466">PrototypeHelper#update_page</a>
or with ActionController::Base#render, then <a
href="GeneratorMethods.html#M000485">call</a> <tt><a
href="GeneratorMethods.html#M000475">insert_html</a></tt>, <tt><a
href="GeneratorMethods.html#M000476">replace_html</a></tt>, <tt><a
href="GeneratorMethods.html#M000478">remove</a></tt>, <tt><a
href="GeneratorMethods.html#M000479">show</a></tt>, <tt><a
href="GeneratorMethods.html#M000480">hide</a></tt>, <tt><a
href="GeneratorMethods.html#M000489">visual_effect</a></tt>, 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.
</p>
<p>
Example:
</p>
<pre>
# Generates:
# new Element.insert("list", { bottom: "<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
</pre>
<p>
Helper methods can be used in conjunction with JavaScriptGenerator. When a
helper method is called inside an update block on the <tt>page</tt> object,
that method will also have access to a <tt>page</tt> object.
</p>
<p>
Example:
</p>
<pre>
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
</pre>
<p>
Calls to JavaScriptGenerator not matching a helper method below generate a
proxy to the JavaScript Class named by the method called.
</p>
<p>
Examples:
</p>
<pre>
# Generates:
# Foo.init();
update_page do |page|
page.foo.init
end
# Generates:
# Event.observe('one', 'click', function () {
# $('two').show();
# });
update_page do |page|
page.event.observe('one', 'click') do |p|
p[:two].show
end
end
</pre>
<p>
You can also use <a
href="../../PrototypeHelper.html#M000467">PrototypeHelper#update_page_tag</a>
instead of <a
href="../../PrototypeHelper.html#M000466">PrototypeHelper#update_page</a>
to wrap the generated JavaScript in a <script> tag.
</p>
</div>
</div>
<div id="method-list">
<h3 class="section-bar">Methods</h3>
<div class="name-list">
<a href="#M000487"><<</a>
<a href="#M000472">[]</a>
<a href="#M000482">alert</a>
<a href="#M000486">assign</a>
<a href="#M000485">call</a>
<a href="#M000488">delay</a>
<a href="#M000491">draggable</a>
<a href="#M000492">drop_receiving</a>
<a href="#M000480">hide</a>
<a href="#M000475">insert_html</a>
<a href="#M000473">literal</a>
<a href="#M000483">redirect_to</a>
<a href="#M000484">reload</a>
<a href="#M000478">remove</a>
<a href="#M000477">replace</a>
<a href="#M000476">replace_html</a>
<a href="#M000474">select</a>
<a href="#M000479">show</a>
<a href="#M000490">sortable</a>
<a href="#M000481">toggle</a>
<a href="#M000489">visual_effect</a>
</div>
</div>
</div>
<!-- if includes -->
<div id="section">
<!-- if method_list -->
<div id="methods">
<h3 class="section-bar">Public Instance methods</h3>
<div id="method-M000487" class="method-detail">
<a name="M000487"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000487.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000487.html');return false;">
<span class="method-name"><<</span><span class="method-args">(javascript)</span>
</a>
</div>
<div class="method-description">
<p>
Writes raw JavaScript to the page.
</p>
<p>
Example:
</p>
<pre>
page << "alert('JavaScript with Prototype.');"
</pre>
</div>
</div>
<div id="method-M000472" class="method-detail">
<a name="M000472"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000472.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000472.html');return false;">
<span class="method-name">[]</span><span class="method-args">(id)</span>
</a>
</div>
<div class="method-description">
<p>
Returns a element reference by finding it through <tt>id</tt> in the DOM.
This element can then be used for further method calls. Examples:
</p>
<pre>
page['blank_slate'] # => $('blank_slate');
page['blank_slate'].show # => $('blank_slate').show();
page['blank_slate'].show('first').up # => $('blank_slate').show('first').up();
</pre>
<p>
You can also pass in a record, which will use
ActionController::RecordIdentifier.dom_id to lookup the correct id:
</p>
<pre>
page[@post] # => $('post_45')
page[Post.new] # => $('new_post')
</pre>
</div>
</div>
<div id="method-M000482" class="method-detail">
<a name="M000482"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000482.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000482.html');return false;">
<span class="method-name">alert</span><span class="method-args">(message)</span>
</a>
</div>
<div class="method-description">
<p>
Displays an <a href="GeneratorMethods.html#M000482">alert</a> dialog with
the given <tt>message</tt>.
</p>
<p>
Example:
</p>
<pre>
# Generates: alert('This message is from Rails!')
page.alert('This message is from Rails!')
</pre>
</div>
</div>
<div id="method-M000486" class="method-detail">
<a name="M000486"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000486.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000486.html');return false;">
<span class="method-name">assign</span><span class="method-args">(variable, value)</span>
</a>
</div>
<div class="method-description">
<p>
Assigns the JavaScript <tt>variable</tt> the given <tt>value</tt>.
</p>
<p>
Examples:
</p>
<pre>
# Generates: my_string = "This is mine!";
page.assign 'my_string', 'This is mine!'
# Generates: record_count = 33;
page.assign 'record_count', 33
# Generates: tabulated_total = 47
page.assign 'tabulated_total', @total_from_cart
</pre>
</div>
</div>
<div id="method-M000485" class="method-detail">
<a name="M000485"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000485.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000485.html');return false;">
<span class="method-name">call</span><span class="method-args">(function, *arguments, &block)</span>
</a>
</div>
<div class="method-description">
<p>
Calls the JavaScript <tt>function</tt>, optionally with the given
<tt>arguments</tt>.
</p>
<p>
If a block is given, the block will be passed to a new JavaScriptGenerator;
the resulting JavaScript code will then be wrapped inside <tt>function() {
… }</tt> and passed as the called function‘s final argument.
</p>
<p>
Examples:
</p>
<pre>
# Generates: Element.replace(my_element, "My content to replace with.")
page.call 'Element.replace', 'my_element', "My content to replace with."
# Generates: alert('My message!')
page.call 'alert', 'My message!'
# Generates:
# my_method(function() {
# $("one").show();
# $("two").hide();
# });
page.call(:my_method) do |p|
p[:one].show
p[:two].hide
end
</pre>
</div>
</div>
<div id="method-M000488" class="method-detail">
<a name="M000488"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000488.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000488.html');return false;">
<span class="method-name">delay</span><span class="method-args">(seconds = 1) {|| ...}</span>
</a>
</div>
<div class="method-description">
<p>
Executes the content of the block after a <a
href="GeneratorMethods.html#M000488">delay</a> of <tt>seconds</tt>.
Example:
</p>
<pre>
# Generates:
# setTimeout(function() {
# ;
# new Effect.Fade("notice",{});
# }, 20000);
page.delay(20) do
page.visual_effect :fade, 'notice'
end
</pre>
</div>
</div>
<div id="method-M000491" class="method-detail">
<a name="M000491"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000491.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000491.html');return false;">
<span class="method-name">draggable</span><span class="method-args">(id, options = {})</span>
</a>
</div>
<div class="method-description">
<p>
Creates a script.aculo.us <a
href="GeneratorMethods.html#M000491">draggable</a> element. See <a
href="../../ScriptaculousHelper.html">ActionView::Helpers::ScriptaculousHelper</a>
for more information.
</p>
</div>
</div>
<div id="method-M000492" class="method-detail">
<a name="M000492"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000492.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000492.html');return false;">
<span class="method-name">drop_receiving</span><span class="method-args">(id, options = {})</span>
</a>
</div>
<div class="method-description">
<p>
Creates a script.aculo.us drop receiving element. See <a
href="../../ScriptaculousHelper.html">ActionView::Helpers::ScriptaculousHelper</a>
for more information.
</p>
</div>
</div>
<div id="method-M000480" class="method-detail">
<a name="M000480"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000480.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000480.html');return false;">
<span class="method-name">hide</span><span class="method-args">(*ids)</span>
</a>
</div>
<div class="method-description">
<p>
Hides the visible DOM elements with the given <tt>ids</tt>.
</p>
<p>
Example:
</p>
<pre>
# Hide a few people
# Generates: ["person_29", "person_9", "person_0"].each(Element.hide);
page.hide 'person_29', 'person_9', 'person_0'
</pre>
</div>
</div>
<div id="method-M000475" class="method-detail">
<a name="M000475"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000475.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000475.html');return false;">
<span class="method-name">insert_html</span><span class="method-args">(position, id, *options_for_render)</span>
</a>
</div>
<div class="method-description">
<p>
Inserts HTML at the specified <tt>position</tt> relative to the DOM element
identified by the given <tt>id</tt>.
</p>
<p>
<tt>position</tt> may be one of:
</p>
<table>
<tr><td valign="top"><tt>:top</tt>:</td><td>HTML is inserted inside the element, before the element‘s existing
content.
</td></tr>
<tr><td valign="top"><tt>:bottom</tt>:</td><td>HTML is inserted inside the element, after the element‘s existing
content.
</td></tr>
<tr><td valign="top"><tt>:before</tt>:</td><td>HTML is inserted immediately preceding the element.
</td></tr>
<tr><td valign="top"><tt>:after</tt>:</td><td>HTML is inserted immediately following the element.
</td></tr>
</table>
<p>
<tt>options_for_render</tt> may be either a string of HTML to insert, or a
hash of options to be passed to ActionView::Base#render. For example:
</p>
<pre>
# Insert the rendered 'navigation' partial just before the DOM
# element with ID 'content'.
# Generates: Element.insert("content", { before: "-- Contents of 'navigation' partial --" });
page.insert_html :before, 'content', :partial => 'navigation'
# Add a list item to the bottom of the <ul> with ID 'list'.
# Generates: Element.insert("list", { bottom: "<li>Last item</li>" });
page.insert_html :bottom, 'list', '<li>Last item</li>'
</pre>
</div>
</div>
<div id="method-M000473" class="method-detail">
<a name="M000473"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000473.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000473.html');return false;">
<span class="method-name">literal</span><span class="method-args">(code)</span>
</a>
</div>
<div class="method-description">
<p>
Returns an object whose <tt>to_json</tt> evaluates to <tt>code</tt>. Use
this to pass a <a href="GeneratorMethods.html#M000473">literal</a>
JavaScript expression as an argument to another JavaScriptGenerator method.
</p>
</div>
</div>
<div id="method-M000483" class="method-detail">
<a name="M000483"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000483.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000483.html');return false;">
<span class="method-name">redirect_to</span><span class="method-args">(location)</span>
</a>
</div>
<div class="method-description">
<p>
Redirects the browser to the given <tt>location</tt> using JavaScript, in
the same form as <tt>url_for</tt>.
</p>
<p>
Examples:
</p>
<pre>
# Generates: window.location.href = "/mycontroller";
page.redirect_to(:action => 'index')
# Generates: window.location.href = "/account/signup";
page.redirect_to(:controller => 'account', :action => 'signup')
</pre>
</div>
</div>
<div id="method-M000484" class="method-detail">
<a name="M000484"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000484.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000484.html');return false;">
<span class="method-name">reload</span><span class="method-args">()</span>
</a>
</div>
<div class="method-description">
<p>
Reloads the browser‘s current <tt>location</tt> using JavaScript
</p>
<p>
Examples:
</p>
<pre>
# Generates: window.location.reload();
page.reload
</pre>
</div>
</div>
<div id="method-M000478" class="method-detail">
<a name="M000478"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000478.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000478.html');return false;">
<span class="method-name">remove</span><span class="method-args">(*ids)</span>
</a>
</div>
<div class="method-description">
<p>
Removes the DOM elements with the given <tt>ids</tt> from the page.
</p>
<p>
Example:
</p>
<pre>
# Remove a few people
# Generates: ["person_23", "person_9", "person_2"].each(Element.remove);
page.remove 'person_23', 'person_9', 'person_2'
</pre>
</div>
</div>
<div id="method-M000477" class="method-detail">
<a name="M000477"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000477.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000477.html');return false;">
<span class="method-name">replace</span><span class="method-args">(id, *options_for_render)</span>
</a>
</div>
<div class="method-description">
<p>
Replaces the "outer HTML" (i.e., the entire element, not just its
contents) of the DOM element with the given <tt>id</tt>.
</p>
<p>
<tt>options_for_render</tt> may be either a string of HTML to insert, or a
hash of options to be passed to ActionView::Base#render. For example:
</p>
<pre>
# Replace the DOM element having ID 'person-45' with the
# 'person' partial for the appropriate object.
page.replace 'person-45', :partial => 'person', :object => @person
</pre>
<p>
This allows the same partial that is used for the <tt><a
href="GeneratorMethods.html#M000475">insert_html</a></tt> to be also used
for the input to <tt><a
href="GeneratorMethods.html#M000477">replace</a></tt> without resorting to
the use of wrapper elements.
</p>
<p>
Examples:
</p>
<pre>
<div id="people">
<%= render :partial => 'person', :collection => @people %>
</div>
# Insert a new person
#
# Generates: new Insertion.Bottom({object: "Matz", partial: "person"}, "");
page.insert_html :bottom, :partial => 'person', :object => @person
# Replace an existing person
# Generates: Element.replace("person_45", "-- Contents of partial --");
page.replace 'person_45', :partial => 'person', :object => @person
</pre>
</div>
</div>
<div id="method-M000476" class="method-detail">
<a name="M000476"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000476.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000476.html');return false;">
<span class="method-name">replace_html</span><span class="method-args">(id, *options_for_render)</span>
</a>
</div>
<div class="method-description">
<p>
Replaces the inner HTML of the DOM element with the given <tt>id</tt>.
</p>
<p>
<tt>options_for_render</tt> may be either a string of HTML to insert, or a
hash of options to be passed to ActionView::Base#render. For example:
</p>
<pre>
# Replace the HTML of the DOM element having ID 'person-45' with the
# 'person' partial for the appropriate object.
# Generates: Element.update("person-45", "-- Contents of 'person' partial --");
page.replace_html 'person-45', :partial => 'person', :object => @person
</pre>
</div>
</div>
<div id="method-M000474" class="method-detail">
<a name="M000474"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000474.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000474.html');return false;">
<span class="method-name">select</span><span class="method-args">(pattern)</span>
</a>
</div>
<div class="method-description">
<p>
Returns a collection reference by finding it through a CSS <tt>pattern</tt>
in the DOM. This collection can then be used for further method calls.
Examples:
</p>
<pre>
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();
</pre>
<p>
You can also use prototype enumerations with the collection. Observe:
</p>
<pre>
# Generates: $$('#items li').each(function(value) { value.hide(); });
page.select('#items li').each do |value|
value.hide
end
</pre>
<p>
Though you can <a href="GeneratorMethods.html#M000485">call</a> the block
param anything you want, they are always rendered in the javascript as
‘value, index.’ Other enumerations, like collect() return the
last statement:
</p>
<pre>
# Generates: var hidden = $$('#items li').collect(function(value, index) { return value.hide(); });
page.select('#items li').collect('hidden') do |item|
item.hide
end
</pre>
</div>
</div>
<div id="method-M000479" class="method-detail">
<a name="M000479"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000479.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000479.html');return false;">
<span class="method-name">show</span><span class="method-args">(*ids)</span>
</a>
</div>
<div class="method-description">
<p>
Shows hidden DOM elements with the given <tt>ids</tt>.
</p>
<p>
Example:
</p>
<pre>
# Show a few people
# Generates: ["person_6", "person_13", "person_223"].each(Element.show);
page.show 'person_6', 'person_13', 'person_223'
</pre>
</div>
</div>
<div id="method-M000490" class="method-detail">
<a name="M000490"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000490.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000490.html');return false;">
<span class="method-name">sortable</span><span class="method-args">(id, options = {})</span>
</a>
</div>
<div class="method-description">
<p>
Creates a script.aculo.us <a
href="GeneratorMethods.html#M000490">sortable</a> element. Useful to
recreate <a href="GeneratorMethods.html#M000490">sortable</a> elements
after items get added or deleted. See <a
href="../../ScriptaculousHelper.html">ActionView::Helpers::ScriptaculousHelper</a>
for more information.
</p>
</div>
</div>
<div id="method-M000481" class="method-detail">
<a name="M000481"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000481.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000481.html');return false;">
<span class="method-name">toggle</span><span class="method-args">(*ids)</span>
</a>
</div>
<div class="method-description">
<p>
Toggles the visibility of the DOM elements with the given <tt>ids</tt>.
Example:
</p>
<pre>
# Show a few people
# Generates: ["person_14", "person_12", "person_23"].each(Element.toggle);
page.toggle 'person_14', 'person_12', 'person_23' # Hides the elements
page.toggle 'person_14', 'person_12', 'person_23' # Shows the previously hidden elements
</pre>
</div>
</div>
<div id="method-M000489" class="method-detail">
<a name="M000489"></a>
<div class="method-heading">
<a href="GeneratorMethods.src/M000489.html" target="Code" class="method-signature"
onclick="popupCode('GeneratorMethods.src/M000489.html');return false;">
<span class="method-name">visual_effect</span><span class="method-args">(name, id = nil, options = {})</span>
</a>
</div>
<div class="method-description">
<p>
Starts a script.aculo.us visual effect. See <a
href="../../ScriptaculousHelper.html">ActionView::Helpers::ScriptaculousHelper</a>
for more information.
</p>
</div>
</div>
</div>
</div>
<div id="validator-badges">
<p><small><a href="http://validator.w3.org/check/referer">[Validate]</a></small></p>
</div>
</body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
8b99df826c3b6cf56a1caaae5f931d50
>
files
>
849
