我正在创建一个表单,在选择了两个输入(公司值和日期值)后进行AJAX调用,返回的数据填充表中输入选择的可用选项。
这是我的代码:
var _cateringCo = $('#catering-company-id')
var _orderDate = $("#order_date")
$("#order_date, #catering-company-id").on('change', function(){
// clear out all products in table first
$('#sample_order_products tr').remove()
//only make call if both fields do not have null values
if(_cateringCo.val() !== "" && _orderDate.val() !== ""){
var data = {catering_company_id: _cateringCo.val(), order_date: _orderDate.val()};
$.ajax({
type: 'GET',
data: data,
url: '<%= get_main_products_for_day_admin_sample_orders_path%>',
dataType: 'json',
success: function(data){
var products = data.products
//append new input item to table
if(products.length > 0){
$('#sample_order_products').append(addProducts(products));
}
}
})
}
以下是在回调完成后用于填充表的另外两种方法:
var addOptions = function(products){
string = "";
for (var i = 0; products.length > i; i++){
var product = products[i]
var name = product.display_name
var product_id = product.product_id
string += "<option value='"+product_id+"'>"+name+"</option>"
}
return string
}
var addProducts = function(products){
return "<tr>" +
"<td>" +
"<select name='sample_order[sample_order_meals_attributes][][product_id]' class='validate[required]'>" + addOptions(products) +
"</td>" +
"<td>" +
"<input name='sample_order[sample_order_meals_attributes][][quantity]' type='number' class='validate[required]'>" +
"</td>"
"</tr>"
}
我的问题是当我为'date'值进行更改事件(从datepicker中选择一个新日期)时,我正在进行3次调用(最后将3行添加到我的表)。
然而,当我为'company'值进行更改事件时,它只进行一次调用,从而在表中追加1行(这就是我想要的)。
我不知道这个日期的更改事件有什么不同。