如何在活动管理rails上使用Ajax嵌套表单

Question

请帮我解决这个问题。我是铁轨上的新人

• 我试图使用ajax方法来获取活动管理嵌套表单上的值。但是只有表单的顶部获得动态值。在更改嵌套表单上的顶部表单的值后，ajax发出请求，然后它更改值(即:更新表单值)。但是在添加新的购买行项目之后，ajax发出请求，但不更新表单上的值，即每个新的购买行项目的相同值。

my js code 应用程序/资产/javascript/buys.js

// for nested buyline items of buys resources
$('.lineItem').change(function () {
$.ajax({
url: '/admin/get_buys_buy_line_item',
type: 'GET',
dataType: "json",
data: {
product_id: $('.lineBuyProduct').val(),
buy_quantity: $(".lineBuyQuantity").val(),
buy_quantity_unit: $(".lineBuyUnit").val(),
buy_price: $(".lineBuyAmount").val(),
},
success: (data) => {
alert(data);
// if (data == null) {
//     document.getElementById('lineQuantity').value = ' ';
//     document.getElementById('lineAmount').value = ' ';
// }
// else {
// document.getElementsByClassName("linebuyQuantity").value = data['1'];
// document.getElementsByClassName('linebuyAmount').value = data[0];
// console.log("Dynamic select OK!")
// }
}
});
});
});

我的活动管理表单

f.inputs 'Line Items', class: "lineItem" do
table do
thead do
tr do
th 'S.N', class: 'form-table__col'
th 'Product', class: 'form-table__col'
th 'Quantity', class: 'form-table__col'
th 'Unit', class: 'form-table__col'
th 'Amount', class: 'form-table__col'
th 'Expiry Date', class: 'form-table__col'
th 'Destroy', class: 'form-table__col'
end
end
end
f.has_many :buy_line_items, new_record: 'Add Buy Line Item', heading: false, allow_destroy: true do |x|
x.input :sn, label: false
x.input :product, label: false, as: :select2, collection: Product.drop_down_options,
input_html: { required: true, class: 'lineBuyProduct' }
x.input :buy_quantity, label: false, input_html: { required: true, class: 'lineBuyQuantity' }
x.input :buy_quantity_unit, label: false, collection: Unit.all.pluck(:name),
input_html: { class: 'lineBuyUnit' }
x.input :buy_price, label: false,
input_html: { required: true, class: 'lineBuyAmount' }
x.input :expiry_date, as: :date_picker, input_html: { style: 'width:auto' }, label: false
end
end

我的一些程序行为和我的期望的截图

• 在这张图片中，我的第一个产品选择在购买行项目，然后根据请求，我们可以看到json渲染

• 但在这张图中，选择另一个产品后再次呈现相同的json数据这意味着不会更新为不同的各自产品值

• 并且在active admin blaze主题上也存在一些问题，在窗体上添加类后，它会更改为图例颜色，并将项目按钮颜色添加为浅棕色

• 这张照片是关于删除自定义类名后的情况lineItem但是，在删除这个类之后，ajax不会命中表单

• 可能是由于嵌套表单的类导致的。在活动管理上。而我使用的默认类的形式从检查，然后它甚至不击中表单的ajax请求。

所以，请专家组帮我解决这个问题。

Answer 1

如果你想发送数据来创建一个新的实体(记录)，你需要使用http POST方法:https://api.jquery.com/jquery.post/GET请求只是检索一个已经存在的实体。可能这就是为什么你可以在ajax调用后读取一些数据，但它没有更新。

GET和POST方法的更多区别:什么时候我应该使用GET或POST方法?它们之间的区别是什么?

如果这个修复不起作用，检查rails日志。

Answer 2

我从来没有使用过任何与Ruby相关的东西，我不完全确定我是否理解了你的问题。我假设您对列表中新项目的AJAX行为有问题。考虑到这一点，我认为你的问题可能与附加"更改"有关。事件添加到新项。我认为可能有许多不同的其他方法来获得你想要的行为，但我将详细说明你使用JS的解决方案。

从activeAdmin的代码中，你可以看到它们触发了一个名为"has_many_add:after"当新项成功添加到其父项时。考虑到这一点，我会尝试将您的Javascript代码更改为:

// for nested buyline items of buys resources
$("#buy_line_items").on("has_many_add:after", function(event, fieldset, parent){
fieldset.change(function () {
$.ajax({
url: '/admin/get_buys_buy_line_item',
type: 'GET',
dataType: "json",
data: {
product_id: $(this).find('.lineBuyProduct').val(),
buy_quantity: $(this).find(".lineBuyQuantity").val(),
buy_quantity_unit: $(this).find(".lineBuyUnit").val(),
buy_price: $(this).find(".lineBuyAmount").val()
},
success: (data) => {
alert(data);
// if (data == null) {
//     document.getElementById('lineQuantity').value = ' ';
//     document.getElementById('lineAmount').value = ' ';
// }
// else {
// document.getElementsByClassName("linebuyQuantity").value = data['1'];
// document.getElementsByClassName('linebuyAmount').value = data[0];
// console.log("Dynamic select OK!")
// }
}
});
});
});

我非常有信心，这将工作，主要是因为我不知道如何尝试它(如果你给我生成的HTML也许它会帮助我)。你可以试一试，看看它是否有效，或者是否需要任何调整。

您可能需要相应地更改注释行。关于标识符"#buy_line_item "我不确定它是否存在于渲染的HTML中，所以你可能也需要调整它。