Выберите2 выпадающих вниз, не загружаясь в мультимодальной странице Django ⇐ Html

[Anonymous]

У меня есть проблема с фронтом Django, который я пытаюсь реализовать. Я использую Select2, чтобы показать выпадающие меню, в которых я могу искать. Проблема в том, что у меня есть два разных модала, у каждого есть свои выпадающие меню. Когда я нажимаю на кнопку, которая показывает первую модальную загрузку данных с раскрывающимся меню и появляется строка поиска и является функциональной.
Однако, когда я ухожу с первым модальным (без перезагрузки страницы) и нажимаю на кнопку, которая показывает Второй модал, выпадающие меню пусты, а строка поиска не показывает. >

{% extends 'listings/base.html' %}
{% block content %}
{% load static %}


$(document).ready(function () {
$('#createCustomerModal').on('shown.bs.modal', function () {
console.log("Modal create opened");
$('.django-select2').djangoSelect2('destroy');
$('.django-select2').djangoSelect2({
dropdownParent: $('#createCustomerModal .modal-content')
});
});

$('#modifycustomerModal').on('show.bs.modal', function (event) {
console.log("Modal modify closed");
var button = $(event.relatedTarget);
var affectation_id = button.data('id');

var modal = $(this);
$.ajax({
url: "{% url 'customer-update' %}",
type: 'GET',
data: {
'id': affectation_id
},
success: function (data) {
modal.find('.modal-body').html(data);
$('.django-select2').djangoSelect2('destroy');
$('.django-select2').djangoSelect2({
dropdownParent: $('#modifycustomerModal .modal-content')
});
}
})
});
});



Customer list


{% csrf_token %}
{{ csv_form.as_p }}
Import CSV file


+



aria-hidden="true">



New customer

×


{% csrf_token %}
{{ form.as_p }}

Add











Modify customer

×






{% if customers %}





Customer


Company



Salesperson


Function
Actions



{% for customer in customers %}

{{ customer.full_name }}
{{ customer.societe.company_name}}
{{ customer.commercial.full_name_salesperson}}
{{ customer.function}}


Update



{% endfor %}




{% else %}
No customer found.
{% endif %}


document.getElementById('myForm').onsubmit = function (event) {
event.preventDefault();

var formData = new FormData(this);

fetch(this.action, {
method: 'POST',
body: formData,
headers: {
'X-CSRFToken': '{{ csrf_token }}'
},
}).then(response => {
if (!response.ok && response.status === 400) {
response.json().then(data => {
alert(data.error);
});
} else if (response.ok) {
window.location.reload();
}
}).catch(error => console.error('Erreur:', error));
};


{% endblock %}< /code>
< /div>
< /div>
< /p>
Заранее спасибо, если вы прочитаете это, и даже больше, если вы поможете. Если вам нужен дополнительный код, пожалуйста, спросите.

Подробнее здесь: https://stackoverflow.com/questions/794 ... jango-page