第十七、八章补遗(七)

第十七、八章补遗(七)

2、form_remote_tag(options = {})

我们经常需要用Ajax技术来获取用户与表单间交互的结果，接着会把它post到服务器上，再将返回的结果呈现在页面。设想一个在blog上发表评论的场景，输入你的Email以及评论内容，然后点击提交，这时你评论就神奇般地添加到最后。要实现这种效果，必须通过一些JavaScript将表单上的元素序列化成一个能够通过XMLHttpRequest传递的参数。

要在Rails中创建一个支持Ajax的表单，得使用form_remote_tag()来替换form_tag()调用。用它创建表单，将会把onsubmit事件改成调用一个自定义的JavaScript函数。该函数将使用Prototype的Ajax.Request(或Ajax.Updater)来实现向服务器发送表单字段。除了初始化的文本参数之外，其它参数都与link_to_remote一样，同样可以包括表单中不可见元素。

例如：

<%= form_remote_tag :url => {:controller => ‘my_controller’,

:action => ‘my_action’} , :update => ‘my_element’ %>

这个Helper方法还将自动使用Prototype中的Form.serialize方法，它用来将表单上的所有输入框元素的值收集到某个字符格式的哈希表中，该哈希表将做为参数值传给该请求。

3、observe_field(field_id, options = {}) 字段观察者。监听由field_id指定的DOM ID字段，并且在字段内容被修改时生成一个Ajax调用。

也就是说，它可以监控某个字段的变化(采用周期性监控或使用基于事件触发的方式)，并将该变化发送到服务器端。周期性轮询是指每隔n秒钟就对目标字段取值一次，然后将值发送到服务器(不管在这个间隔时间内该值是否发生变化)。而基于事件的轮询则是使用onblur事件，即仅当用户使焦点离开目标字段时才发送变化值。照此说，周期性轮询对于类似字段自动填充的应用而言是十分有用的，它将根据字段的内容显示出一个可选列表。而基于事件的轮询则对于希望用户在字段中输入完整值后触发一个往返于服务端和客户端之间的交互的应用很有效。

下面两个选项必须被指定一个：

1）:url 当字段被更改时调用的动作，它使用url_for格式。

2）:function 你可以指定一个被调用的JS函数来代替前面的:url选项。

额外的选项是：

1）:frequency 侦测可被更改字段的频率(以秒为单位)。如果没有设置值或设置的 值小于等于零，则使用基于事件的观察来代替基于时间的观察。

2）:update 指定需要用XMLHttpReuqest响应的文本来更新的DOM ID 的元素的innerHTML。

3）:with 为XMLHttpRequest指定参数的一个JavaScript表达式。

4）:on 指定哪个事件处理程序被监听。缺省地，用于有"changed"事件处理程序的text字段，文本区域和有"click" 事件处理程序的单选按钮及检查框。你可以用它来替 换"blur"或"focus"或任何其它事件。

另外，你也可以指定link_to_remote内的任何选项。

例如：

<%= text_field ‘my_object’, ‘my_property’ %>

<%= observe_field ‘my_object_my_property’,

:url => { :controller => ‘my_controller’, :action => ‘my_action’},

:update => ‘display_target’,

:frequency => 0.5,

:with => “’my_param = ‘ + value” %>

默认情况下，observer把字段值作为原始的post数据发送给服务器。可在控制器内使用reuqest.raw_post或request.query_string来访问这个数据。不过，经常会需要把这些值标记为特定的已命名参数。Rails针对这些observer对象提供了一个可选的参数 :with。你可以通过一小段JavaScript代码来为请求生成参数列表。

4、observe_form(form_id, options = {}) 如果页面要监控的是整个表单，而非单一的字段，就要使用这个方法。使用时需将指定表单id而非字段id，这样就可监控表单中所有输入框。和字段观察者一样，表单观察者也分为周期性的和基于事件的两种。它将使用Prototype提供的Form.serialize方法来获取表单的所有值，也可像字段观察者一样通过可选的:with参数来构造请求的参数。

5、periodically_call_remote(options = {}) 每隔options[:frequency]秒数(缺省值是10秒)就调用指定的url(options[:url)一次。通常，用于用远程调用的结果更新指定的div(options[:update])。:url和定义的回调函数与link_to_remote一样。

6、evaluate_remote_response() 返回 ‘eval(request.responseText)’ ，它是个能在form_remote_tag的:complete内调用的JavaScript函数，以计算使用update_element_function调用返回文档的多个更新。

7、remote_function(options) 为一个远程函数返回需要的JavaScript。接受与link_to_remote一样的参数。

例如：

<select id="options" onchange="<%= remote_function(:update => "options",

:url => { :action => :update_options }) %>">

<option value="0">Hello</option>

<option value="1">World</option>

</select>

8、submit_to_remote(name, value, options = {}) 返回一个按钮input标记，它在后台使用XMLHttpRequest提供表单而不是通常的POST。Options参数与form_remote_tag是一样的。

9、update_element_function(element_id, options = {}, &block) 返回一个JavaScript函数(或表达式)，它根据options选项来更新一个DOM元素。

1）:content 用于更新的内容。

2）:action 有效的选项是 :update (缺省值)，:empty， :remove

3）:position 如果 :action 是 :update，那么你可以选择这些位置中的一个： :before, :top, :bottom, :after.

例如：

<%= javascript_tag(update_element_function("products",

:position => :bottom, :content => "<p>New product!</p>")) %>

<% replacement_function = update_element_function("products") do %>

<p>Product 1</p>

<p>Product 2</p>

<% end %>

<%= javascript_tag(replacement_function) %>

This method can also be used in combination with remote method call where the result is evaluated afterwards to cause multiple updates on a page. Example:

# Calling view

<%= form_remote_tag :url => { :action => "buy" },

:complete => evaluate_remote_response %>

all the inputs here...

# Controller action

def buy

@product = Product.find(1)

end

# Returning view

<%= update_element_function(

"cart", :action => :update, :position => :bottom,

:content => "<p>New Product: #{@product.name}</p>")) %>

<% update_element_function("status", :binding => binding) do %>

You've bought a new product!

<% end %>

Notice how the second call doesn’t need to be in an ERb output block since it uses a block and passes in the binding to render directly. This trick will however only work in ERb (not Builder or other template forms).

See also JavaScriptGenerator and update_page.