Select2 Drop downs not loading in multi-modals django page

I have an issue with a Django front I'm trying to implement. I'm using select2 to show dropdown menus in which I can search in. The problem is that I have two different modals, each has it's dropdown menus. When I click on the button that shows the first modal, dropdown menus data load and the search bar appears and is functional. However, when I quit the first modal (no page reload) and I click on the button that shows the second modal, the dropdown menus are empty, and the search bar doesn't show.

Here the HTML code I use for this page :

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

<script type="text/javascript">
    $(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')
                    });
                }
            })
        });
    });
</script>
    

<div class="d-flex justify-content-between align-items-center mb-3">
    <h1>Customer list</h1>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{ csv_form.as_p }}
        <button type="submit" class="btn btn-primary">Import CSV file</button>
    </form>
    <button type="button" class="btn btn-primary btn-lg custom-large" data-toggle="modal" data-target="#createCustomerModal">
        +
    </button>
</div>




<!-- Modal -->
<div class="modal fade" id="createCustomerModal" role="dialog" aria-labelledby="createCustomerModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createCustomerModalLabel">New customer</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="myForm" method="post">{% csrf_token %}
                    {{ form.as_p }}
                    <br><br>
                    <button type='submit' class='btn btn-primary'>Add</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal Modify-->
<div class="modal fade" id="modifycustomerModal" tabindex="-1" role="dialog" aria-labelledby="modifycustomerModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modifycustomerModalLabel">Modify customer</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>

{% if customers %}
<div class="tab-content">
  <div class="table-responsive">
    <table id="customers" class="table table-sm table-hover table-striped" style="table-layout:auto;width:100%;border-collapse:collapse;">
      <thead class="thead-dark">
        <tr>
          <th>Customer
            <i class="fas fa-sort"></i>
          </th>
          <th>Company
            <i class="fas fa-sort"></i>
          </th>
          <th>
            Salesperson
            <i class="fas fa-sort"></i>
          </th>
          <th>Function</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for customer in customers %}
        <tr>
          <td>{{ customer.full_name }}</td>
          <td>{{ customer.societe.company_name}}</td>
          <td>{{ customer.commercial.full_name_salesperson}}</td>
          <td>{{ customer.function}}</td>
          <td>
            <div class="d-flex align-items-center justify-content-center ">
              <a href="" class="btn btn-outline-primary me-1" data-toggle="modal" data-target="#modifycustomerModal"
                data-id="{{ customer.id }}">Update</a>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<p>No customer found.</p>
{% endif %}

<script type="text/javascript">
    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));
    };
</script>

{% endblock %}

Thanks in advance if you read this, and even more if you help. If you need any complementary code please ask.

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