将自定义javascript添加到nested_form（Rails）

Posted 2021-03-27

我在我的rails应用程序中使用Ryan Bates的nested form，但我也想添加一些自定义的javascript。

我的观点（.slim）：

= f.fields_for :student do |builder|
    = builder.input :uni
    = builder.input :grad
    = builder.input :degree_type
    = builder.input :degree_abbr

    = builder.fields_for :majors do |maj|
        = maj.input :name, label: "Name of major"
        = maj.input :foo1_id, collection: Foo.all, input_html: {id: 'foo_1'}
        = maj.input :foo2_id, collection: [], input_html: {id: 'foo_2'}
        = maj.input :foo3_id, collection: [], input_html: {id: 'foo_3'}
        = maj.link_to_remove "Remove this major ▲"
    = builder.link_to_add "Add another major", :majors

我的javascript：

$("#foo_1").change(function() {
    $.ajax({
        url: '/welcome/update_foo',
        type: 'GET',
        format: 'js',
        dataType: 'script',
        data: {
            foo_1_id: $('#foo_1 option:selected').val()
        }
    });
});
$("#foo_2").change(function() {
    $.ajax({
        url: '/welcome/update_foo',
        type: 'GET',
        format: 'js',
        dataType: 'script',
        data: {
            foo_2_id: $('#foo_2 option:selected').val()
        }
    });
});

这一切都很好，花花公子。我正在使用ajax请求来动态更新下拉列表（当我从#foo_1中选择一个选项时，#foo_2会填充正确的信息）。这是我的问题：当我点击Add another major时，我不知道如何分配和检索这些新输入的ID。第二个专业下的下拉菜单没有正确填充。

他们也被给予#foo_1，#foo_2和#foo_3吗？如果是这样，我如何在我的javascript .change()方法中区分它们？

他的README显示你可以捕获nested:fieldAdded，但我不确定从这里采取什么步骤。

Rails 4.1.5 红宝石2.1.2p95

谢谢！

答案

使用nested_form时，id用于在表单生成期间唯一地标识输入。也许你可以使用其他方法并使用css选择器。基于此，您可以更改嵌套：fieldAdded事件的元素。

$('#trading_address').on 'nested:fieldAdded', (event) ->
  filed = event.field;
  filed.find('select').select2();

在此示例中，添加字段时，将搜索select元素并将select2应用于该元素。

类似的你可以添加一个change事件，其中调用一些JavaScript。就像是：

filed.change(function(){  
 ... do stuff
});