Flowdock

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 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

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

Calls to JavaScriptGenerator not matching a helper method below generate a proxy to the JavaScript Class named by the method called.

Examples:

# 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

You can also use PrototypeHelper#update_page_tag instead of PrototypeHelper#update_page to wrap the generated JavaScript in a <script> tag.

Show files where this module is defined (2 files)
Register or log in to add new notes.