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