How to clone a HeavySelect2Widget ?

[holri]

I have a function, that clones a formset row with HeavySelect2Widgets. After cloning the new widget uses the old dependentFields value for the Ajax call to get the options, although the attributes and data of the new element is updated.
What I am doing wrong?

 
 function duplicateRow(button) {
    var row = button.closest('.form-row');
    var totalForms = document.getElementById('id_form-TOTAL_FORMS');
    var formRegex = /form-(\d+)-/;
    var newFormIndex = totalForms.value;

    // Save the configurations and selected options of the original select elements within the row
    var originalSelects = row.querySelectorAll('select');
    var selectStates = Array.from(originalSelects).map(function(select) {
        var selectData = $(select).data('select2');
        return {
            selectedOptions: Array.from(select.selectedOptions).map(option => option.value),
            config: selectData ? $.extend(true, {}, selectData.options.options) : {}
        };
    });

    // Destroy Select2 instances on the original select elements within the row
    originalSelects.forEach(function(select) {
        $(select).select2('destroy');
    });

    // Clone the row
    var newRow = row.cloneNode(true);

    // Update the name, id, and data-select2-dependent-fields attributes for input and select fields within the new row
    var inputs = newRow.querySelectorAll('input, select');
    inputs.forEach(function(element, index) {
        var oldName = element.getAttribute('name');
        var oldId = element.getAttribute('id');

        var newName = oldName.replace(formRegex, 'form-' + newFormIndex + '-');
        element.setAttribute('name', newName);

        var newId = oldId.replace(formRegex, 'form-' + newFormIndex + '-');
        element.setAttribute('id', newId);
    });

    var selects = newRow.querySelectorAll('select');
    selects.forEach(function(element, index) {
        var oldDependentFields = element.getAttribute('data-select2-dependent-fields');
        if (oldDependentFields) {
            var newDependentFields = oldDependentFields.replace(formRegex, 'form-' + newFormIndex + '-');
            element.setAttribute('data-select2-dependent-fields', newDependentFields);
            $(element).data('select2-dependent-fields', newDependentFields);
        }
        element.setAttribute('data-field_id', element.getAttribute('id'));

        // Restore the selected options for select elements within the new row
        var state = selectStates[index];
        if (state) {
            Array.from(element.options).forEach(function(option) {
                option.selected = state.selectedOptions.includes(option.value);
            });
        }
    });
    // Insert the new row after the original row
    row.after(newRow);

    // Reinitialize Select2 on the original and cloned select elements within the rows
    var rowsToProcess = [row, newRow];
    rowsToProcess.forEach(function(row) {
        var selectsInRow = row.querySelectorAll('select');
        selectsInRow.forEach(function(select, index) {
            var state = selectStates[index];
            if (state && state.config) {
                // Apply the saved configuration to the select element
                $(select).djangoSelect2(state.config);
            } else {
                $(select).djangoSelect2();
            }
        });
    });

    // Update the total forms count
    totalForms.value = parseInt(totalForms.value) + 1;
}

[codingjoe]

Hi there 👋,

Thanks for reaching out. I'd be happy to help, but I might need a little more information. Can you clarify what you mean by “cloning”? Do you want to dynamically insert a new widget into your DOM or is it something else?

Best
Joe

[holri]

Hi,

thank you very much for your help.

Yes I want to dynamically insert new widgets into the DOM, that are a copies of existing ones. I have a formset as a table. The forms are in the rows and they contain HeavySelect2Widgets. The function above clones such a row. I can provide the templates and views if that helps.

Best
Holri