如何使用remote_function使用Rails 3进行Ajax调用？

Question

我试图在选择框上进行onchange调用.对于我的应用程序,我使用jquery.js和rails.js来提及UJS.但是生成的代码仍然是Prototype而不是jquery ajax调用.我的代码如下所示:

<%= select_tag :category, 
       options_for_select(
           Category.find(:all,:select=>"name,id").collect{|c| [c.name,c.id]}),
       :onchange => remote_function(:url => {:controller => "posts", 
                                             :action => "filter_post",
                                             :filter =>"category"}, 
                                    :with=>"'category_id=' + $('#category').val()") %>

由此生成的代码是:

new Ajax.Request('/posts/filter_posts?filter=category', {asynchronous:true, evalScripts:true,
parameters:'category_id=' + $('#category').val() + '&authenticity_token=' +
encodeURIComponent('CCyYj1wqXtddK6pUV6bAxw0CqZ4lbBxDGQHp13Y/jMY=')})

Answer 1

正如谢尔盖所​​说:铁轨3中没有遥控功能.

解决方案是使用以下方式不显眼地添加onchange处理程序:

$(function($) {
    $("#selector_for_element").change(function() {
        $.ajax({url: '<%= url_for :action => 'action_name', :id => @model.id %>',
        data: 'selected=' + this.value,
        dataType: 'script'})
    });
});

这将调用action_name当前控制器中的方法,将结果selected=...作为参数传递.现在你可以返回一段javascript,例如使用类似的东西:

calculated = calculate_some_value_using(params[:selected])
render(:update) {|page|
  page << "$('#selector_for_field_to_update).html(#{calculated})"
}

在控制器中.您附加到"页面"的字符串应该是有效的javascript,并且如果您使用$ .ajax将自动执行.

编辑:仅供参考,我们最近为jquery-ujs添加了一个选择更改帮助器,因此您现在可以使用内置的jquery-ujs适配器以不引人注目的方式执行此操作:

<%= select_tag :category_id, 
   options_for_select(
       Category.find(:all,:select=>"name,id").collect{|c| [c.name,c.id]}),
   :data => { :remote => true, :url => url_for(:controller => "posts", 
                                         :action => "filter_post",
                                         :filter =>"category") } %>

虽然公平地说,添加一个选择更改事件实际上并不会"不引人注目",因为除非您的表单不依赖于AJAX请求的结果,否则禁用javascript的用户没有优雅的回退.

Answer 2

rails 3中没有remote_function.如果你正在使用jQuery,你可以这样做:

$.ajax({
    type: 'POST',
    url: 'http://your_url/blah',
    data: 'param1=value1&params2=value2',
    success: function(data){eval(data);}
});