| Element Properties: | ||
|---|---|---|
| page[:my_div].show | visible | |
| page[:my_div].hide | invisible | |
| page[:my_div].toggle | alternate show and hide | |
| page[:my_div].remove | remove | |
| page[:my_div].add_class_name :pink | css class added | |
| page[:my_div].remove_class_name :pink | css class removed | |
| page[:my_div].set_style :width => '500px' | css property width added | |
| page[:my_div].visual_effect :highlight. :blind_down. :duration => 5 | ||
| page[:my_div].visual_effect(:highlight) .remove_class_name(:green) | scriptaculous methods can be chained | |
| page[:my_field][:value] = 'new value' | field value set | |
| page[:my_div][:style][:color] = 'red' | ||
| Element Content Manipulation: | ||
|---|---|---|
| page[:my_div].replace_html "New Text" | replaces html | |
| page[:my_div].replace "New Text" | replaces entire div | |
| page[:my_div].replace_html :partial => "my_div" | replaces div content with partial output | |
| page[:my_div].replace :partial => "my_div" | replaces entire div with partial output | |
| page[:my_div].reload | like replace with partial my_div | |
| Element Collection Manipulation: | ||
|---|---|---|
| page.select('table tr').first | ||
| page.select('table tr').last.hide | ||
| page.select('table tr').each do \item\ item.visual_effect :highlight end | ||
| page.select('table tr td').invoke('upcase') | invokes upercase method on every td | |
| page.select('table td td').pluck('results'.'innerHTML') | plucked and stored in javascript variable results | |
| collect/map | TBA | |
| detect/find | TBA | |
| select/find_all | TBA | |
| reject | ||
| partition | ||
| min and max | ||
| all and any | ||
| inject | ||
| zip | ||
| sort_by | ||
| Javascript Generator Methods: | ||
|---|---|---|
| page.hide :div1. :div2 | ||
| page.show :div1. :div2 | ||
| page.toggle :div1. :div2 | ||
| page.remove :div1. :div2 | ||
| page.insert_html [:bottom :top :before :after] | :my_div. 'new text' | |
| Misc Page Methods: | ||
|---|---|---|
| page.redirect_to url_for(:action => 'index') | redirect the browser | |
| page.redirect_to some_url | redirect | |
| page.delay(5) { page[:my_div].visual_effect :fade } | execute block after 5 seconds | |
| page.draggable :my_div | make my_div draggable | |
| page.drop_receiving :basket. :url => {:action => 'delete'} | basket can receive dragged elements | |
| page.sortable :todo. :url => { :action => 'change_order' } | make todo list sortable | |
| page << "alert('hello')" | arbitrary javascript added to page | |
| page.assign :greeting. 'hello' | variable greeting assigned hello | |
| page.call :alert. "hello" | call javascript alert with argument "hello" | |
| page.form.reset :my_form | reset my_form (id or name?) | |
| page.field.focus :my_field | reset my_field | |
| class proxies | TBA | |
| Helpers: | ||
|---|---|---|
| <%= link_to_remote "Alert". :url => {:action => "do"} %> | on click make ajax request | |
| <%= link_to_function "update_page" do \page\ page.alert "Hello" end %> | rjs without ajax | |
| <%= link_to_function "update" do \page\ page.my_helper end %> | ||
| <%= link_to_remote "check". :failure => update_page { \page\ page.handle_failure } | can be used in places whereever javascript is needed | |
| <%= update_page_tag {\page\ page.my_helper} %> | same as update_page except renders with script tag | |
| other: | ||
|---|---|---|
| render :text => "text". :content_type => "text/javascript" | action sends text to ajax request | |
| render :update do \page\ page.alert "hello" end | action sends js | |
| page[:my_div].set_style :width => '500px' | rendered as $$("my_div").setStyle({"width":"500px"}) | |
| Element.toggleClassName(element. className) | custom method called as page[:my_div].toggle_class_name 'green' | |
| Steps to use observe_field: | ||
|---|---|---|
| If we use Ajax check box or select box, do the following steps | ||
| Required: | ||
| observe_field id should be in this format | "div id to update_action for that" | |
| url: | :my_action | |
| update: | :my_div | |
| with: | observe_field 'id' or 'value' or 'id+value' | |
| Action: | :my_action | |
| Partial view: | :my_div | |
| Eg for check box: | check_box "my_div", "my_action" | |
| Eg for observe_field: | observe_field(:my_div_my_action,:update => :my_div,:with => ':my_div_my_action',:url => { :action => :my_action}) | |
| References: | ||
| http://www.digitalni.com.au/articles/rails_ajax_divs | ||