Ruby on Rails的 - jQuery的使用AJAX

获取数据

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？

来源

2010-11-29 freshest

如果你想要通过ajax在您的导轨控制器中执行此操作，您只需将每个选项的值设置为您正在查找的成型件的ID，然后使用jQuery的ajax方法将其发送到您的控制器：

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


     $.ajax({ 
      url: theURL 

     });

然后确保你在你的routes.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);

很明显，你会希望在对不良数据等几个保障扔..但这应该让你走上正轨。

来源

2010-11-29 16:12:42

您可以执行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'); 
    }); 

});

来源

2010-11-29 15:59:13 Vojto

谢谢，我使用`collection_select`来生成选择标记。设置'data-price`属性的正确方法是什么？ `html_options = {'data-price'=> ??? }` – freshest 2010-11-29 16:17:17

Ruby on Rails的 - jQuery的使用AJAX

回答

相关问题