2009-01-28T23:50:49Z 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 12 2009-02-09T08:46:29Z