Writes raw JavaScript to the page.

Example:

 page << "alert('JavaScript with Prototype.');"

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();

You can also pass in a record, which will use ActionController::RecordIdentifier.dom_id to lookup the correct id:

  page[@post]     # => $('post_45')
  page[Post.new]  # => $('new_post')

Displays an alert dialog with the given message.

Example:

  # Generates: alert('This message is from Rails!')
  page.alert('This message is from Rails!')

Assigns the JavaScript variable the given value.

Examples:

 # 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

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.

Examples:

  # 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

Executes the content of the block after a delay of seconds. Example:

  # Generates:
  #     setTimeout(function() {
  #     ;
  #     new Effect.Fade("notice",{});
  #     }, 20000);
  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.

Hides the visible DOM elements with the given ids.

Example:

 # Hide a few people
 # Generates: ["person_29", "person_9", "person_0"].each(Element.hide);
 page.hide 'person_29', 'person_9', 'person_0'

Inserts HTML at the specified position relative to the DOM element identified by the given id.

position may be one of:

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'.
  # 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>'

Returns an object whose to_json evaluates to code. Use this to pass a literal JavaScript expression as an argument to another JavaScriptGenerator method.

Redirects the browser to the given location using JavaScript, in the same form as url_for.

Examples:

 # Generates: window.location.href = "/mycontroller";
 page.redirect_to(:action => 'index')

 # Generates: window.location.href = "/account/signup";
 page.redirect_to(:controller => 'account', :action => 'signup')

Reloads the browser‘s current location using JavaScript

Examples:

 # Generates: window.location.reload();
 page.reload

Removes the DOM elements with the given ids from the page.

Example:

 # Remove a few people
 # Generates: ["person_23", "person_9", "person_2"].each(Element.remove);
 page.remove 'person_23', 'person_9', 'person_2'

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.
  page.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
  #
  # 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

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.
  # Generates:  Element.update("person-45", "-- Contents of 'person' partial --");
  page.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:

  # Generates: $$('#items li').each(function(value) { value.hide(); });
  page.select('#items li').each do |value|
    value.hide
  end

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:

  # Generates: var hidden = $$('#items li').collect(function(value, index) { return value.hide(); });
  page.select('#items li').collect('hidden') do |item|
    item.hide
  end

Shows hidden DOM elements with the given ids.

Example:

 # Show a few people
 # Generates: ["person_6", "person_13", "person_223"].each(Element.show);
 page.show 'person_6', 'person_13', 'person_223'

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.

Toggles the visibility of the DOM elements with the given ids. Example:

 # 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

Starts a script.aculo.us visual effect. See ActionView::Helpers::ScriptaculousHelper for more information.