Как я могу работать с tom-select и django form?

Недавно я нашел tom-select как альтернативу Select2 для своих форм. Это отличное решение, которое прекрасно работает !

Он отлично работает, когда я использую для создания данных из формы, но когда я хочу использовать для редактирования данных, это другая проблема.

Моя форма редактирования находится в модальном объявлении, которое открывается при нажатии на кнопку редактирования на листинге товара на главной странице позади.

Я использую fetch в javascript для получения данных и заполнения моего input/select. Он хорошо работает, когда я впервые открываю модальную панель... но если я нажимаю на другой элемент, чтобы отредактировать следующий... никаких четких данных... и сообщение об ошибке в консоли о том, что уже есть экземпляр tom-select для этого ввода.

Моя цель - получить данные (иногда это один select, иногда несколько select) на tom-select с легкой частью, как я сделал с Select2.

Вот моя форма

<div class="modal fade">[...]
<form id="product-form" method="post" action="{% url 'products' %}" class="mt-2">
    {% csrf_token %}
    {% include 'form.html' with form=form %}
    <input type="hidden" name="id_product" id="id_product" value="" />
    <div class="d-flex gap-2">
        <a href="#" type="button" class="btn btn-secondary col-3" data-bs-dismiss="modal">{% trans 'Retour' %}</a>
        <button id="btn-product-modal" type="submit" class="btn btn-success col-9">{% trans 'Créer' %}</button>
    </div>
</form>
</div>

Начало моей функции EditModal

function openModalEdit(pk) {
        document.getElementById("product-form").reset();
        // Fetch object data using AJAX
        fetch(`/product/get_product/${pk}`)
            .then(response => response.json())
            .then(data => {
                // Populate modal fields with fetched data
                for (var i = 1; i <= data.entries; i++) {
                    document.getElementById('id_entry_' + i).value = data['entry_' + i];
                    var selectElement = document.getElementById('id_entry_' + i);
                    var selectedValues = data['entry_' + i];
                    console.log(selectedValues);
                    if (selectElement.selectize) {
                        selectElement.selectize.destroy();
                    }
                    var tomSelect = new TomSelect(selectElement, {
                        items: selectedValues
                    });
                }
                document.getElementById('id_description').value = data.description;
                document.getElementById('id_price').value = data.price;
[...]

В django вот мой forms.py

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    for category in categories:
        entry_choices = Entry.objects.filter(category=category).values_list('id', 'name')
        field_name = f'entry_{category.id}'
        new_fields[field_name] = forms.ChoiceField(
            choices=entry_choices,
            widget=forms.Select(attrs={'class': 'select2 form-control', 'placeholder': _(u'Choisissez votre ') + str(category.name)}),
            label=category.name
        )
    self.fields = new_fields

и мой views.py, вызывающий формы

if pk:
    obj = get_object_or_404(Product, pk=pk)
    message = _("Produit édité avec succès !")
else:
    obj = None
    message = _("Produit créé avec succès !")

form = ProductEntryForm(instance=obj)

Как вы можете видеть, я пытаюсь использовать destroy(), но это не работает.

Я видел что-то с sync(), cleaCache() ... и т.д., но не знаю, как их использовать

Цель - наконец-то найти решение, которое работает с django.
Я думаю, что я близок к тому, чтобы найти решение, но у меня есть некоторые трудности с некоторых пор :(

) Вернуться на верх