Question

I using jQuery and have the following code, it’s a partial and I want to know how could I retrieve a specific data on the onchange method and display the result into the next tag. (inside the span tag)

NOTE: this select field are generated on-the-fly, so, I can have N id’s.

<p class="fields">
  <%= f.collection_select(:part_id, @parts, :id, :title, { :prompt => true } , { :onchange => "?"  } ) %>
  <span class='part_price'> _ _ _ _ </span>
  <%= f.hidden_field :_destroy %>
  <%= link_to_remove_fields "remove", f %>
</p>

Also I’ve created the method for this action (I don’t know if this is right):

def retrieve_part_price
  @price = Part.find(params[:id])
  respond_to do |format|
    format.html { redirect_to(items_path)}
    format.json { render @price }
  end
end

And put that on the routes.rb:

resources :items do
  member do
   get :update_part_price
  end
end

Answer 1

Solved.

my partial:

<p class="fields">
 <%= f.collection_select(:part_id, @parts, :id, :title, { :prompt => true } , { :onchange => "load_part_price_select(this.id, this.options[this.selectedIndex].value);"  } ) %>
 <%= f.label(:part_id, "Price: ") %>
 <span class="price"></span>
 <%= f.hidden_field :_destroy %>
 <%= link_to_remove_fields "remove", f %>
</p>

application.js

function load_part_price_select(id, value) {
$('#' + id ).live('change',function() {
    $.ajax({
      url: '/parts/' + value + '/price',
      type: 'get',
      context: this,
      dataType: 'script',
      success: function(responseData) {
        $(this).nextAll("span.price:first").html(responseData);
      }
    }); 
});
};

controller:

def price
  @price = Part.find(params[:id])
  respond_to do |format|
    format.js { render :text => @price.price }
  end
end