| Edit | Back | pdf:writer| three column layout

Ajax on Rails

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

 | Edit | Back| pdf:writer| three column layout