CODEWITHSUNDEEP
ruby-on-railsajaxruby-on-rails-3jquery
Nar
Nar

Reputation: 550

error undefined method `remote_function' (how to make Ajax calls with Rails 3 using remote_function)

I found that this function (remote_function) was part of the Prototype helper which was removed from the framework with Rails 3.1 and how to change on ajax?

      country
      %select#country{:name => "country", :onchange => remote_function(:update => 'region_city', :url => { :action => :get_regions_cities_for_country}, :with => 'Form.Element.serialize(this)')}
        = options_for_select( Country.find(:all).map {|u| [u.name,u.id]})
      %div{:id => "region_city"}
        region
        %select#region{:name => "region", :onchange => remote_function(:update => 'city', :url => { :action => :get_cities}, :with => 'Form.Element.serialize(this)')}
          = options_for_select(Country.find(:first).regions.find(:all).map {|u| [u.name,u.id]})
        city
        #{select_tag(:city, options_for_select( Country.find(:first).regions.find(:first).cities.find(:all).map {|u| [u.name,u.id]} ))}

Upvotes: 1

Views: 3133

Answers (2)

Nar
Nar

Reputation: 550

views:

= select_tag(:district,"<option value='0'>#{t('Please select district')}</option>".html_safe+options_from_collection_for_select(District.all, "id", "title"),:'data-remote' => 'true',:'data-url' => url_for(:controller => 'select', :action => 'getdata'),:'data-type' => 'json')
= select_tag(:state,"<option value='0'>#{t('Please select state')}</option>".html_safe,:'data-remote' => 'true',:'data-url' => url_for(:controller => 'select', :action => 'getdata'),:'data-type' => 'json')
= select_tag(:city,"<option value='0'>#{t('Please select city')}</option>".html_safe)

:javascript

        $(document).ready(function() {
          $('#district').live('ajax:success', function(evt, data, status, xhr) {
            var selectbox2 = $('#state');
            selectbox2.empty();
            var opt = $('<option/>');
            opt.attr('value', "0");
            opt.text("#{t('Please select state')}");
            opt.appendTo(selectbox2);
            $.each(data, function(index, value) {
              var opt = $('<option/>');
              opt.attr('value', value[0]);
              opt.text(value[1]);
              opt.appendTo(selectbox2);
            });
            var selectbox3 = $('#city');
            selectbox3.empty();
            var opt = $('<option/>');
            opt.attr('value', "0");
            opt.text("#{t('Please select city')}");
            opt.appendTo(selectbox3);
          });
          $('#state').live('ajax:success', function(evt, data, status, xhr) {
            var selectbox3 = $('#city');
            selectbox3.empty();
            $.each(data, function(index, value) {
              var opt = $('<option/>');
              opt.attr('value', value[0]);
              opt.text(value[1]);
              opt.appendTo(selectbox3);
            });
          });
        });

controller:

class SelectController < ApplicationController

  def getdata

    @data_for_select1 = params[:district]
    if @data_for_select1
      @data_for_select2 = State.where(:district_id => @data_for_select1).all
      render :json => @data_for_select2.map{|c| [c.id, c.title]}
    else
      @data_for_select1 = params[:state]
      @data_for_select2 = City.where(:state_id => @data_for_select1).all
      render :json => @data_for_select2.map{|c| [c.id, c.name]}
    end
  end
end

routes:

  get 'assets' => 'select#getdata'

note: you must have a localization used phrases, otherwise js does not work

Upvotes: 0

rewritten
rewritten

Reputation: 16435

Prototype is not in rails anymore. Use jquery-ujs instead. See this other question for inspiration: Ruby on Rails - drop down box on change event

Upvotes: 1

Related Questions