Вызов Ajax работает только для первой строки клонирования, как сделать так, чтобы он работал для каждой строки
У меня есть следующий фрагмент кода для добавления <option>
в раскрывающийся список "Единица", когда я выбираю элемент из раскрывающегося списка продуктов.
Изображение для иллюстрации моего кода
Но я должен клонировать первый ряд, как вы можете видеть на приведенном выше изображении и коде. Мне удалось изолировать "unit input" в первом ряду от влияния, когда пользователь выбирает товар из "product" в клонированных рядах, путем ( Удалите класс "product" и класс "unit"), как показано в приведенном выше коде.
Мое представление для обработки ajax
from django.http import JsonResponse
def get_product_unit(request):
data = {}
product = request.POST.get('pro-product')
if product is not None:
unit = UOM.objects.values('unit__name', 'uom_options', 'unit').filter(product_id=product)
print('purchase not purchase')
else:
unit = []
data['unit'] = [(obj['unit__name']) for obj in unit]
print(
'PRODUCT: ', product,
'UNIT: ', unit,
)
return JsonResponse(data)
Я попытался сделать новый вызов ajax для новой клонированной строки
$(document).on('change', '.newProduct', function(e){
var id = $(this).val();
console.log('SUCCESS-CHANGE-PRODUCT-FROM-NEW-CLASS: ', id);
$.ajax({
type: 'POST',
url: '{% url "purchases:get_new_row_unit" %}',
// dataType: 'json',
// async: true,
// cache: false,
data: {
'pro-product': id,
// $('#product_'+purchaseCount).closest('.newProduct select').val(),
// find('#id_pro-product')
},
success: function (data) {
console.log(
'FROM SUCCESS-NEW-CLASS: ', data['unit'],
'PRODUCT-FROM-NEW-CLASS: ', data['product'],
);
var values_3 = data['unit'];
// $('#id_pro-unit').text('');
// $('select').closest('.newUnit').text('');
if (values_3.length > 0) {
for (var i = 0; i < values_3.length; i++) {
// $('#id_pro-unit').append('<option>' + values_3[i] + '</option>');
// $('.newUnit select').closest('#product_'+ purchaseCount).append('<option>' + values_3[i] + '</option>');
// $('select').closest('#product_'+ purchaseCount).find('.newUnit').append('<option>' + values_3[i] + '</option>');
$('select').closest('.newUnit').append('<option>' + values_3[i] + '</option>');
}
}
},
error: function (){
console.log('ERROR with ajax request in Adding Purchase-New Class !!!');
},
});
e.preventDefault();
});
});
Мое мнение
def get_new_row_unit(request):
data = {}
product = request.POST.get('pro-product')
data['product'] = product
if product is not None:
unit = UOM.objects.values('unit__name', 'uom_options', 'unit').filter(product_id=product)
else:
unit = []
data['unit'] = [(obj['unit__name']) for obj in unit]
print(
'PRODUCT: ', product,
'UNIT: ', unit,
)
return JsonResponse(data)
Также я пытался сделать вот так Ответ. Но у меня ничего не получилось.
[Моя проблема]
Когда я выбираю элемент из меню "продукт" в первой клонированной строке (или из любой клонированной строки) "меню единиц" в любом клонированном ряду также затрагивается
Я знал, что что-то упустил, но не смог это обнаружить.
Любые предложения .