带有ajax的动态表单

时间:2013-10-14 02:00:41

标签: jquery ruby-on-rails ajax

我的项目模型的表格是:make属性。根据选择的选项,它应该呈现共享相同的相应产品:item_make值。因此,如果您在第一个表格上选择“帽衫”,那么可用的不同连帽运动衫将显示在第二个表格上。任何帮助将不胜感激。

引用

attr_accessible :items_attributes
has_many :items

产品

attr_accessible :name, :item_make
has_many :items

项目

attr_accessible :make, :product_id
belongs_to :quote
belongs_to :product

两个输入:(嵌套引号形式 - >项目形式)

<%= f.input :make, collection: clothing_types, label: 'Thread Type', remote: true, 
url: url_for(controller: 'quotes', action: 'update_products'), 
type: 'json', input_html: {class: "select_make"} %> 

<%= f.input :product_id, input_html: {class: "select_product"} %>

目前,@ product是所有产品的列表。

quotes_Controller:

def new
  @quote = Quote.new
  @quote.items.build
  @item = Item.new
  @products = Product.all
end

def update_products
  @make = params[:make]
  @subproducts = Product.where(:item_make => @make).all
  render json: @subproducts.map{|x| [x.id, x.name]}
end

**编辑:**的application.js

$(document).on('change', '.select_make', function() {

    $.ajax({
        type: 'GET',
        url: "/quotes/update_products",
        success: function(data) {
        if (data.content == 'None') 
            {
            $('.select_product').empty();
            $('.select_product').append( $('<option>No make provided!</option>'));
            }
        else
            $('.select_product').empty();
            $('.selecT_product').append(); //unfinished
        }
    });
});

我已经尝试在这里使用jquery的不同变体Ruby on Rails - drop down box on change event,但还未能让它工作。

如果有人可以通过javascript进行操作来启发我,那就太棒了

1 个答案:

答案 0 :(得分:0)

做这样的事情怎么样:

def update_products
  @make = params[:make]
  @subproducts = Product.where(:item_make => @make).all
  respond_with json: @subproducts.map{|x| [x.id, x.name]}
end


$.ajax({
    type: 'GET',
    url: "/quotes/update_products.json",
    // Rest of the code....
});