Hi all,
I’ve two issues
The first one:
as you can see in the second image (when cloning select input with select2 plugin, the cloned input appears with (the first disabled item appended next to the main input in every row)).
[
Original row image]
[
My issue image]
the second issue:
I’ve ajax code to append “unit menu” based on “product menu” selection
when I create a new row, and select an item from “product menu” I expected that the “unit menu” of the same row must affect and append the “unit list” belongs to the selection of the "product menu" in the same row.
But the behavior according to the next code is very different (after cloning the main row, when I select a product the appended unit list (appears in all unit menu in every row) and after I used ("this" or "the new created class") I get an empty "unit menu" in the new rows (i.e when select a product no changes takes place in the "unit menu")
Only the first row works (select a product append a menu to "unit input menu")
### js.html file
<script>
$(document).ready(function() {
var purchase = $('.purchase-row').last().clone();
let purchaseCount = 0;
$(document).on('click', '.add_item', function() {
var clone = purchase.clone();
console.log('clone: ', clone);
$(this).prevAll('.purchase-row').first().after(clone.hide());
clone.slideDown('fast');
$('.purchase-row').find('#id_pro-product').removeClass('product').addClass('newProduct');
$('.purchase-row').find('#id_pro-unit').removeClass('unit').addClass('newUnit');
$('.purchase-row').find('#id_pro-product').addClass('product_'+ purchaseCount);
$('.purchase-row').find('#id_pro-unit').addClass('unit_'+ purchaseCount);
var $example = $(".newProduct").select2();
$example.select2();
purchaseCount++;
console.log('PURCHASE-COUNT: ', purchaseCount);
});
$(document).on('click', '.purchase-minus', function() {
if (purchaseCount == 0) {
alert('You can not delete this row' );
} else {
$(this).closest('.purchase-row').remove();
purchaseCount--;
console.log('PURCHASE-COUNT2: ', purchaseCount);
}
});
$(document).on('click', '.purchase-broom', function() {
$(this).closest('.newProduct').select2('destroy');
$(this).closest('.purchase-row').find('select')[0].selectedIndex=0;
});
$(document).on('change', '.product', function(e){
var product_id = $(this).val();
console.log('SUCCESS-CHANGE-PRODUCT: ', product_id);
$.ajax({
type: 'POST',
url: '{% url "purchases:get_product_unit" %}',
data: {
'pro-product': $('.purchase-row select').closest('.product').val(),
},
success: function (data) {
console.log(
'FROM SUCCESS: ', data['unit'],
);
var values_3 = data['unit'];
$('select').closest('.unit').text('');
if (values_3.length > 0) {
for (var i = 0; i < values_3.length; i++) {
$('select').closest('#id_pro-unit').append('<option>' + values_3[i] + '</option>');
}
}
},
error: function (){
console.log('ERROR with ajax request in Adding Purchase !!!');
},
});
e.preventDefault();
});
$(document).on('change', '.newProduct', function(e){
var product_id = $(this).val();
var $this = $(this);
console.log('SUCCESS-CHANGE-PRODUCT-FROM-NEW-CLASS: ', product_id);
$.ajax({
type: 'POST',
url: '{% url "purchases:get_new_row_unit" %}',
data: {
'pro-product': product_id,
},
success: function (data) {
console.log(
'FROM SUCCESS-NEW-CLASS: ', data['unit'],
'PRODUCT-FROM-NEW-CLASS: ', data['product'],
);
var values_3 = data['unit'];
$('select').closest('.unit_'+purchaseCount).text('');
if (values_3.length > 0) {
for (var i = 0; i < values_3.length; i++) {
$('.purchase-row select').closest('.unit_'+ purchaseCount).append('<option>' + values_3[i] + '</option>');
}
}
},
error: function (){
console.log('ERROR with ajax request in Adding Purchase-New Class !!!');
},
});
e.preventDefault();
});
});
</script>
[
Pastebin link]
[
Codepen link]
By the way I'm using Django so the inputs will not appear correctly in codepen link
Sorry for prolongation.... Thanks
What I have tried:
Also I tried to add a new class with append the "purchaseCount" when click on the cloning button, But I failed ..
$('.purchase-row').find('#id_pro-product').removeClass('product').addClass('product_'+purchaseCount);
$('.purchase-row').find('#id_pro-unit').removeClass('unit').addClass('unit_'+purchaseCount);