Ruby on Rails - jQuery to get data using AJAX

Question

I have the following model:

create_table "mouldings", :force => true do |t|
  t.string   "suppliers_code"
  t.datetime "created_at"
  t.datetime "updated_at"
  t.string   "name"
  t.integer  "supplier_id"
  t.decimal  "length",         :precision => 3, :scale => 2
  t.decimal  "cost",           :precision => 4, :scale => 2
  t.integer  "width"
  t.integer  "depth"
end

When a user selects a moulding on a form I want to get the cost of the moulding by ajax and use it to get a generate a quote using javascript. Here is the select tag from the form:

<select id="order_item_moulding_1_id" name="order_item_moulding_1[id]">
  <option value="">Select a moulding 1</option> 
  <option value="1">123 589 698</option> 
  <option value="2">897 896 887</option> 
  <option value="3">876 234 567</option>
</select>

Here is part of the javascript file:

$(document).ready(function () {

  $('#order_item_moulding_1_id').change(function () {
    var moulding_1_price = ;
  });

});

How do I use Ajax to set the variable moulding_1_price?

Chris Ladd · Accepted Answer · 2010-11-29 16:12:42Z

If you wanted to do it in your rails controller via ajax, you'd just set the value of each option to the ID of the molding you were looking up, and send that to your controller with jQuery's ajax method:

 var theVal = $('#order_item_moulding_1_id').val();
 var theURL = '/someUniqueRoutingKeywordSuchAsMouldingAjax/' + theVal;


        $.ajax({
          url: theURL

        });

Then make sure you have a route set in your routes.rb file:

 match 'someUniqueRoutingKeywordSuchAsMouldingAjax/:id', :to => 'yourMouldingsController#ajaxMouldings'

And in your yourMouldingsController, define a custom method:

def ajaxMouldings
@moulding = Moulding.find(params[:id])

end

By default, this will render ajaxMouldings.js.erb. So in your views, make sure you have a file with that name. That's embedded javascript, so you can use it to replace some div on your page where you want that information to appear:

// in ajaxMouldings.js.erb
// be sure to escape any dynamic values!
 alert('Hey, it worked!');

var theHTML = '<div class="moulding_title"><%= escape_javascript(@moulding.title) %></div><div class="moulding info"><%= escape_javascript(@moulding.info) %></div>';

$('#someUniqueDiv').html(theHTML);

Obviously, you'll want to throw in a few safeguards against bad data, etc... but that should get you on the right track.

Vojto · Accepted Answer · 2010-11-29 15:59:13Z

2

You could do an ajax call to retrieve the data, or you could use HTML5 data attribute.

For the second solution, you would add data-price attribute to your options tags, so it would look like this:

<option value="1" data-price="123">123 589 698</option> 
<option value="2" data-price="456">897 896 887</option> 
<option value="3" data-price="789">876 234 567</option>

Then, in your JS file:

$(document).ready(function () {

  $('#order_item_moulding_1_id').change(function () {
    var moulding_1_price = $(this).find('option:selected').attr('data-price');
  });

});

answered Nov 29, 2010 at 15:59

Vojto

6,9694 gold badges29 silver badges35 bronze badges

2 Comments

freshest Over a year ago

Thanks, I am using collection_select to generate the select tag. What is the right way to set the data-price attribute? html_options = { 'data-price' => ??? }

Vojto Over a year ago

Hm, I guess youll have to code it manually. And as I think about it, that's not too practical, you might end up rewriting options for select. Anyway, checkout source code of these helpers.

Collectives™ on Stack Overflow

Ruby on Rails - jQuery to get data using AJAX

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related