Ruby on Rails - jQuery для получения данных с использованием AJAX

Question

У меня есть следующая модель:

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

Когда пользователь выбирает форму в форме, я хочу получить стоимость формовки с помощью ajax и использовать ее для получения сгенерированной цитаты с использованием javascript.Вот тег выбора из формы:

<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>

Вот часть файла javascript:

$(document).ready(function () {

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

});

Как использовать Ajax для установки переменной moulding_1_price?

Answer 1

Если вы хотите сделать это в вашем контроллере rails через ajax, вы просто установите значение каждой опции на ID молдинга, который вы искали, и отправите это на свой контроллер с помощью метода jQuery ajax: *

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


        $.ajax({
          url: theURL

        });

Затем убедитесь, что у вас есть маршрут, заданный в вашем файле rout.rb:

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

И в вашем yourMouldingsController определите пользовательский метод:

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

end

По умолчанию будет отображаться файл ajaxMouldings.js.erb. Поэтому, по вашему мнению, убедитесь, что у вас есть файл с таким именем. Это встроенный javascript, так что вы можете использовать его для замены некоторого элемента div на своей странице, где вы хотите, чтобы эта информация отображалась:

// 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);

Очевидно, вы захотите применить несколько мер защиты от неверных данных и т. Д., Но это должно привести вас на правильный путь.

Answer 2

Вы можете сделать ajax-вызов для извлечения данных или использовать атрибут данных HTML5.

Для второго решения вы бы добавили атрибут data-price к тегам параметров, чтобы он выглядел следующимэто:

<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>

Затем в вашем файле JS:

$(document).ready(function () {

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

});