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

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

"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=')}) 

正如谢尔盖所​​说:铁轨3中没有遥控function。

解决方案是使用以下方式不显眼地添加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})" } 

在控制器中。 您附加到“'page'的字符串应该是有效的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的用户没有优雅的回退。

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

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

以下是我的haml视图中的简单jQuery片段

 :javascript $("#select_box_id").change(function() { $.post('#{target_url}?param_one='+$(this).val()); }); 

希望这可以帮助。 谢谢..

如果您遇到我将大型rails应用程序升级到大量使用remote_function的rails 3的问题,可以通过添加application_helper方法来实现有限的向后兼容性,该方法以其他答案建议的格式生成jQuery代码。 我能够按原样使用此代码,但必须更新一段调用代码以使用new:success脚本选项,而不是此处不支持的:update hash选项。 这可以花一些时间来最终重构所有remote_function调用以使用不显眼的jquery-ujs事件回调:

 def remote_function(options) ("$.ajax({url: '#{ url_for(options[:url]) }', type: '#{ options[:method] || 'GET' }', " + "data: #{ options[:with] ? options[:with] + '&' : '' } + " + "'authenticity_token=' + encodeURIComponent('#{ form_authenticity_token }')" + (options[:data_type] ? ", dataType: '" + options[:data_type] + "'" : "") + (options[:success] ? ", success: function(response) {" + options[:success] + "}" : "") + (options[:before] ? ", beforeSend: function(data) {" + options[:before] + "}" : "") + "});").html_safe end 

Ajax使用参数调用控制器操作:

 function combined_search() { var countries = $('#countries').val(); var albums = $('#albums').val(); var artists = $('#artists').val(); $.ajax({ url:"<%=url_for :controller => 'music_on_demand',:action => 'combined_search' %>", data:'country=' + encodeURIComponent(countries) + '&albums=' + encodeURIComponent(albums) + '&artists=' + encodeURIComponent(artists), cache:false, success:function (data) { } }) }