Ошибка заполнения раскрывающегося списка: TypeError: невозможно прочитать свойства неопределенного значения (чтение «обр ⇐ Jquery

[Anonymous]

Я использую Tom Select для одного из раскрывающихся списков в форме. В форме есть возможность динамически добавлять в форму новые строки. Tom Select отлично работает со строкой формы по умолчанию, но ломается, когда я добавляю новую строку, нажимая кнопку. кроме того, ниже отображается ошибка.

Ошибка при заполнении раскрывающегося списка: TypeError: невозможно прочитать свойства
неопределенного (чтение «обрезать»)

Вот мой сценарий. Можете ли вы иметь какое-либо решение для этого. Я новичок в Javascript и Jquery.

Код: Выделить всё

$(document).ready(function () {
// Initialize Tom Select for the default product dropdown
initializeTomSelect('.product_id', true);

// Add new row functionality
$('#add_expense_row').click(function (e) {
e.preventDefault();

// Clone the row template
const newRow = $('#aod_line').clone();
newRow.removeAttr('id'); // Remove the ID to avoid duplication
newRow.find('input[type="number"], input[type="text"]').val(''); // Clear input values
newRow.find('.product_id').empty(); // Clear existing options
newRow.find('.product_id').append('Select a product'); // Add placeholder
newRow.find('#remove-line').prop('disabled', false); // Enable remove button

// Append the new row
$('#submit_div').before(newRow);

// Initialize Tom Select for the newly added dropdown after populating options
const productDropdown = newRow.find('.product_id');
initializeTomSelect(productDropdown, false);
});

// Remove row functionality
$(document).on('click', '#remove-line', function (e) {
e.preventDefault();
$(this).closest('.row').remove();
});

// Function to initialize Tom Select
function initializeTomSelect(selector, isStatic = false) {
$(selector).each(function () {
const dropdown = $(this);

// Populate options first before initializing Tom Select
populateProductDropdown(dropdown).then(() => {
console.log('Dropdown after population:', dropdown.html());

if (!dropdown[0].tomselect) { // Check if Tom Select is already initialized
new TomSelect(dropdown[0], {
placeholder: 'Select a product',
allowEmptyOption: true, // Allow empty dropdowns to prevent errors
});
}
}).catch((error) => {
console.error('Error populating dropdown:', error);
});
});
}

// Function to populate product dropdown with products
function populateProductDropdown(dropdown) {
return new Promise((resolve, reject) => {
$.ajax({
url: '../controller/operations_controller.php?status=get-products',
method: 'GET',
dataType: 'json',
success: function (data) {
const select = dropdown[0].tomselect;

if (select) {
// If Tom Select is already initialized
select.clearOptions(); // Clear existing options
select.addOption({ value: '', text: 'Select a product', disabled: true }); // Add placeholder

data.forEach((product) => {
select.addOption({ value: product.product_id, text: product.product_name });
});
select.refreshOptions(false); // Refresh without opening
} else {
// If Tom Select is not initialized yet
dropdown.empty();
dropdown.append('Select a product'); // Add placeholder

data.forEach((product) => {
dropdown.append(`${product.product_name}`);
});
}

resolve(); // Resolve the promise after population
},
error: function (xhr, status, error) {
console.error('AJAX error:', xhr.responseText || error);
alert('Failed to load products.  Please try again later.');
reject(error); // Reject the promise on error
}
});
});
}
});

Вот два снимка экрана: первая строка и вторая строка, которая была добавлена ​​динамически.
https://imgur.com/a/EbTM3Wa

Подробнее здесь: https://stackoverflow.com/questions/791 ... ined-readi