How to make Ajax calls with Rails 3 using remote_function?

user_241001 0
Viewed 23681

I am trying to make an onchange call on a select box.For my application i am using jquery.js and rails.js as mentioned to make use of UJS. But still the code that is generated is for Prototype and not for jquery ajax calls. My code looks like the following:

<%= 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()") %>

The code that is generated by this is:

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

As Sergei said: There is no remote_function in rails 3.

The solution is to unobtrusively add the onchange handler using something like:

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

This will call the action_name method in the current controller, passing the result of selected=... as a parameter. Now you can return a piece of javascript, for instance using something like:

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

in the controller. The string you append to ''page'' should be valid javascript and will be executed automatically if you use $.ajax.

EDIT: FYI, we recently added a select change helper to jquery-ujs, so you can do this unobtrusive way using the built-in jquery-ujs adapter now:

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

Though to be fair, adding a select change event really isn't ever going to be "unobtrusive" as there is no graceful fallback for users with javascript disabled unless your form doesn't depend on the result of the AJAX request.

user_167840

Following is the simple jQuery snippet from my haml view

:javascript

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

Hope this helps. Thanks..

user_2302930
Related