JavaScriptGenerator

The following is a list of all of the methods public methods offered by the JavaScriptGenerator. These methods are called on the page object in your RJS templates.
Since RJS is all about generating JavaScript, it is nice to know what is going on behind the scenes. Knowing about the JavaScript that is generated makes it much easier to debug problems and create more complex applications. At some point, your RJS code may become too complex or there may be a task that you can't perform elegantly with RJS. If you understand how RJS generates JavaScript, you can easily port your code into a JavaScript library and use RJS to access your new JavaScript objects and methods.
Therefore, for all of the following definitions, I have placed the JavaScript that the method generates after the Ruby code. The Ruby code is marked with the comment # Ruby code, and the JavaScript is marked with // Generated JavaScript.

<<(javascript)
Writes raw JavaScript to the page.

[](id)
Returns a JavaScriptElementProxy for the DOM element with the specified id. Methods can be called on the returned element. Multiple method calls can also be chained together.
# Ruby code
page['header'].show

// Generated JavaScript
$("header").show();

# Ruby code
page['header'].first.second

// Generated JavaScript
$("header").first().second();

 

assign(variable, value)
Assigns a value to the JavaScript variable specified. Ruby objects are automatically converted to JavaScript objects by calling the object's to_json method if it has one, or inspect if it doesn't.
# Ruby code
page.assign 'name', { :first => "Cody", :last => "Fauser" }

// Generated JavaScript
name = { "first": "Cody", "last": "Fauser" };

 

alert(message)
Displays a JavaScript alert dialog box with the provided message.
# Ruby code
page.alert 'An error occurred while processing your request'

// Generated JavaScript
alert("An error occurred while processing your request");

 

call(function, arg, ...)
Calls a JavaScript function and passes in zero or more arguments.
# Ruby code
page.call 'displayError', 'An error occurred', 'Critical'

// Generated JavaScript
displayError("An error occurred", "Critical");

 
You can call methods on custom objects that you've added to your page by specifying the variable name and the method call.
# Ruby code
page.call 'inventory.showTotal'

// Generated JavaScript
inventory.showTotal();

 

delay(seconds = 1)
Executes the code within the block after delaying for the specified number of seconds.
# Ruby code
page.delay(5) do
  page.visual_effect :highlight, 'navigation'
end

// Generated JavaScript
setTimeout(function() {
;
new Effect.Highlight("navigation", {});
}, 5000);

 

draggable(id, options = {})
Makes the DOM element specified by the id draggable.
# Ruby code
page.draggable('photo', :revert => true)

// Generated JavaScript
new Draggable('photo', {revert: true});

 

drop_receiving( id, options = {})
Makes the DOM element specified by the id receive dropped draggable elements. Draggable elements are created using the RJS draggable method or by using draggable_element() Scriptaculous helper.
# Ruby code
page.drop_receiving('photo', :url => { :action => 'add' })

// Generated JavaScript
Droppables.add("photo", {onDrop:function(element){new
Ajax.Request('/hello_world/add', {asynchronous:true, evalScripts:true,
parameters:'id=' + encodeURIComponent(element.id)})}});

 

hide(id, ...)
Hides one or more DOM elements. Specify the elements to hide by their DOM ids.
# Ruby code
page.hide('first', 'second')

// Generated JavaScript
Element.hide("first", "second");

 

insert_html(position, id, *options_for_render)
Inserts the HTML into the specified position in relation to the element.
The available positions are:

:before
The content is inserted into the page before the element.

:after
The content is inserted into the page after the element.

:top
The content is inserted into the element before the element's existing content.

:bottom
The content is inserted into the element after the element's existing content.
# Ruby code
page.insert_html(:bottom, 'products', '<li>Refrigerator</li>')

// Generated JavaScript
new Insertion.Bottom("products", "<li>Refrigerator</li>");

 

redirect_to(location)
Redirect the browser to the location specified. redirect_to() passes the location to url_for(), so any of the arguments you normally use with url_for() can also be used with redirect_to().
# Ruby code
page.redirect_to('http://www.google.com')

// Generated JavaScript
window.location.href = "http://www.google.com";

# Ruby code
page.redirect_to(:controller => 'inventory', :action => 'list')

// Generated JavaScript
window.location.href = "http://localhost:3000/inventory/list";

 

remove(id, ...)
Removes one or more DOM elements from the page.
# Ruby code
page.remove('first', 'second')

// Generated JavaScript
["first", "second"].each(Element.remove);

 

replace(id, *options_for_render)
Replaces the entire element specified or outerHTML. replace is useful with partial templates so that the entire partial, which includes a container element, can be rendered and used to replace content during an RJS call. An example is an unordered list. A partial containing a  <li>  tag can be rendered instead of having to replace the innerHTML of the  <li> . Replacing just the innerHTML would require the  <li>  tag to be moved out of the partial.
# Ruby code
product.replace 'banner', '<id="banner">Welcome back Cody</div>'

// Generated JavaScript
Element.replace("banner", "<id=\"banner\">Welcome back Cody</div>");

 

replace_html(id, *options_for_render)
Replaces the content or innerHTML of the DOM element with the id with either a String or the output of a rendered partial template.
# Ruby code
page.replace_html 'timestamp', Time.now

// Generated JavaScript
Element.update("timestamp", "Sat Apr 29 15:14:24 EDT 2006");

 

select(pattern)
Selects DOM elements using CSS-based selectors. Returns a JavaScriptElementCollectionProxy that can then receive proxied enumerable methods. See the JavaScriptCollectionProxy methods in the next section.
# Ruby code
page.select "#content p"

// Generated JavaScript
# => $$("#content p");

 

sortable(id, options = {})
Makes the element with the DOM ID id sortable using drag and drop. The options are the same as the options for ScriptaculousHelper#sortable_element().
# Ruby code
# Assuming the current controller is ProjectsController
page.sortable 'project-65', :url => { :action => 'sort' }

// Generated JavaScript
Sortable.create("project-65", {onUpdate:function(){
  new Ajax.Request('/projects/sort', {
    asynchronous:true, evalScripts:true, parameters:Sortable.serialize("project-65")
    }
  )}
});

 

show(id, ...)
Makes one or more hidden DOM elements visible. As with hide(), the elements are specified by their DOM ids.
# Ruby code
page.show 'element-20', 'element-30'

// Generated JavaScript
Element.show("element-20", "element-30");

 

toggle(id, ...)
Toggles the visibility of one or more DOM objects.
# Ruby code
page.toggle 'product-1', 'product-2', 'product-3'

// Generated JavaScript
Element.toggle("product-1", "product-2", "product-3");

 

visual_effect(name, id = nil, options = {})
Creates a new Scriptaculous visual effect to the element with the DOM id. See the following section on visual effects for a list of the visual effects shipping with Rails 1.1.
# Ruby code
page.visual_effect :highlight, 'list-item-69', :duration => 5

// Generated JavaScript
new Effect.Highlight("list-item-69",{duration:5});