railsノートajax
3227 ワード
ajax web2.0
ajaxを使用するには、まずページに<%=javascript_を含める必要があります.include_tag "prototype"%>
ajaxの命令は以下の通りです
link_to_remote
例は以下の通り
1番目のパラメータがlinkのテキスト2番目のパラメータは更新された要素のid(div,span fontなど)3番目のパラメータはリモートのurl(url_for構文)で、このurlがlayoutを閉じることに注意します
form_remote_tag
例は以下の<%=form_remote_tag(:update => "update_div", :url => { :action => :guess } ) %> <%= text_field_tag :guess %> <%= submit_tag "Post form with AJAX"%> <%= end_form_tag %>
パラメータはあります:update更新の要素id:urlはもっと多くのパラメータとapi??を調べますなぜapiのパラメータが違うのでしょうか
observers
例は以下の通り
:frequencyは更新の頻度を指定し、入力フィールドが変更されたことを発見すると自動的に対応するactionに変更をコミットし、戻り値を更新します
??? ここでaction側ではrequest.raw_を使用していますpost || request.query_stringはまだこの使い方がよく分からないようです.
periodic update
例は以下の<%=periodically_call_remote(:update => 'process-list', :url => { :action => :ps }, :frequency => 2 )%>
パラメータ
Domインターフェイス!!!Javascriptのドキュメントを見てください
railsはjavascriptのapiを単独で提供し、Domインタフェースを操作します.
$(id)
Pass the $( ) method a string, and it returns the DOM element with the given id. Otherwise it returns its argument. (This behavior means you can pass in either an element’s id= attribute or the element itself and get an element returned.)
Element.toggle(element, ...)
Element.toggle( ) toggles whether the given element (or elements) are shown. Internally, it switches the value of the CSS display attribute between ’inline’ and ’none’.
Element.show(element, ...)
Element.show( ) ensures all elements it receives as parameters will be shown.
Element.hide(element, ...)
Opposite of Element.show( ).
Element.remove(element)
Element.remove( ) completely removes an element from the DOM.
Insertion methods
The various insertion methods make it easy to add HTML fragments to existing elements. They are discussed in Section 18.4, Replacement Techniques, on page 389.
JAvascript効果
JAvascript効果には追加のinclude「effects」パッケージが必要なので、合計includeの2つのパッケージが必要です
呼び出し効果は、通常、Effect.xxx(element)を使用してidを表すstringを送信するか、thisを使用して現在のオブジェクトを表示します.
...次の内容はjavascriptを熟知する必要があります.本人はしばらく深く研究しないことにしました.
ajaxを使用するには、まずページに<%=javascript_を含める必要があります.include_tag "prototype"%>
ajaxの命令は以下の通りです
link_to_remote
例は以下の通り
<%= link_to_remote("Do the Ajax thing",
:update => 'mydiv',
:url => { :action => :say_hello }) %>
<div id="mydiv">This text will be changed</div>
1番目のパラメータがlinkのテキスト2番目のパラメータは更新された要素のid(div,span fontなど)3番目のパラメータはリモートのurl(url_for構文)で、このurlがlayoutを閉じることに注意します
form_remote_tag
例は以下の<%=form_remote_tag(:update => "update_div", :url => { :action => :guess } ) %> <%= text_field_tag :guess %> <%= submit_tag "Post form with AJAX"%> <%= end_form_tag %>
パラメータはあります:update更新の要素id:urlはもっと多くのパラメータとapi??を調べますなぜapiのパラメータが違うのでしょうか
observers
例は以下の通り
<%= text_field_tag :search %>
<%= observe_field(:search,
:frequency => 0.5,
:update => :results,
:url => { :action => :search }) %>
:frequencyは更新の頻度を指定し、入力フィールドが変更されたことを発見すると自動的に対応するactionに変更をコミットし、戻り値を更新します
??? ここでaction側ではrequest.raw_を使用していますpost || request.query_stringはまだこの使い方がよく分からないようです.
periodic update
例は以下の<%=periodically_call_remote(:update => 'process-list', :url => { :action => :ps }, :frequency => 2 )%>
パラメータ
Domインターフェイス!!!Javascriptのドキュメントを見てください
railsはjavascriptのapiを単独で提供し、Domインタフェースを操作します.
$(id)
Pass the $( ) method a string, and it returns the DOM element with the given id. Otherwise it returns its argument. (This behavior means you can pass in either an element’s id= attribute or the element itself and get an element returned.)
$('mydiv').style.border = "1px solid red"; /* sets border on mydiv */
Element.toggle(element, ...)
Element.toggle( ) toggles whether the given element (or elements) are shown. Internally, it switches the value of the CSS display attribute between ’inline’ and ’none’.
Element.toggle('mydiv'); /* toggles mydiv */
Element.toggle('div1', 'div2', 'div3'); /* toggles div1-div3 */
Element.show(element, ...)
Element.show( ) ensures all elements it receives as parameters will be shown.
Element.show('warning'); /* shows the element with id 'warning' */
Element.hide(element, ...)
Opposite of Element.show( ).
Element.remove(element)
Element.remove( ) completely removes an element from the DOM.
Element.remove('mydiv'); /* completely erase mydiv */
Insertion methods
The various insertion methods make it easy to add HTML fragments to existing elements. They are discussed in Section 18.4, Replacement Techniques, on page 389.
JAvascript効果
JAvascript効果には追加のinclude「effects」パッケージが必要なので、合計includeの2つのパッケージが必要です
<%= javascript_include_tag "prototype", "effects" %>
呼び出し効果は、通常、Effect.xxx(element)を使用してidを表すstringを送信するか、thisを使用して現在のオブジェクトを表示します.
...次の内容はjavascriptを熟知する必要があります.本人はしばらく深く研究しないことにしました.