rails筆記 ajax

文章目錄

• ajax web2.0
• Dom介面 !!!看看javascript的文檔
• javascript效果
• ...下面的內容很需要熟悉javascript, 本人暫時決定不深入研究

ajax web2.0

要使用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>

第一個參數為link的文本第二個參數為更新的元素的的id(div,span font等都可以) 第三個參數為遠端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 兩個包

<%= javascript_include_tag "prototype", "effects" %>

調用效果一般通過Effect.xxx(element) 可以傳入一個代表id的string,或者使用this表明當前對象

...下面的內容很需要熟悉javascript, 本人暫時決定不深入研究