Modal doesnt show trying to load it async

Hello, I’m trying to load in a modal using Bootstrap5 upon button click. The modal is dynamic, so I have to use AJAX to load it in. But it doesn’t show when I click the button.

I’ve researched the problem and it seems to be that my modal doesn’t seem to be set up right for Bootstrap5. Yet I’ve tried using the correct set up I believe and it still doesn’t work.

My template:

{% block content %}
    <div class="container-fluid">
    <div class="card mt-3">
        <div class="card-body">
        {% if object_list %}
                <div class="single-table">
                    <div class="table-responsive">
                        <table class="table text-center">
                            <thead class="text-uppercase bg-dark">
                                <tr class="text-white">
                                    <th scope="col">Bedrijfsnaam</th>
                                    <th scope="col">Contactnaam</th>
                                    <th scope="col">Locatie</th>
                                    <th scope="col">Actie</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for user in object_list %}
                                <tr>
                                    <td>{{ user.bedrijfsNaam }}</td>
                                    <td>{{ user.contactNaam }}</td>
                                    <td>{{ user.adres }}</td>
                                    <td>
                                        <a href="{% url 'klantupdaten' user.id  %}"><i class="fas fa-edit"></i></a>
                                        <a href="#" data-bs-url="{% url 'klantverwijderen' user.id %}" data-bs-toggle="modal" data-bs-target="#dynamic-modal"><i class="fas fa-trash-alt"></i></a>
                              
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% else %}
            <p>Geen gebruikers gevonden</p>
                <p>
                    <a href="{% url 'klantaanmaken' user.id %}" class="btn btn-primary">Maak klant aan</a>
                </p>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}

My delete template (Modal):

<div class="modal-header" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <h5 class="modal-title mt-0" id="exampleModalLabel">Delete gebruiker</h5>
  <button class="close" type="button" data-bs-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>
<form method="POST" action="{% url 'klantverwijderen' user.id %}">
<div class="modal-body" >
   {% csrf_token %}
   <p>Bent u zeker dat u deze persoon wilt verwijderen: {{ user.contactNaam }}?</p>
</div>
<div class="modal-footer">
  <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Annuleer</button>
  <button type="submit" class="btn btn-danger">Verwijder</button>
</div>
</form>

My Ajax (Javascript):

// CSRF verification for Django

function getCookie(name) {

    var cookieValue = null;

    if (document.cookie && document.cookie !== '') {

        var cookies = document.cookie.split(';');

        for (var i = 0; i < cookies.length; i++) {

            var cookie = jQuery.trim(cookies[i]);

            // Does this cookie string begin with the name we want?

            if (cookie.substring(0, name.length + 1) === (name + '=')) {

                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

                break;

            }

        }

    }

    return cookieValue;

}

function csrfSafeMethod(method) {

    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));

}

var csrftoken = getCookie('csrftoken');

$('.delete').on('click', function() {

    var url = $(this).data('url');

    console.log(url)

    $.ajax({

        url: url,

        type: 'GET',

        data: {},

        dataType: 'html',

            beforeSend: function(xhr, settings) {

                if(!csrfSafeMethod(settings.type) && !this.crossDomain) {

                    xhr.setRequestHeader("X-CSRFToken", csrftoken);

                }

            },

            success: function (result) {

                $('#dynamic-modal-content').html(result);

            },

            error: function(data){

            }

        });

    });

My view(s):

class DeleteUserView(SuperUserRequired, DeleteView):
    model = User
    template_name = 'webapp/klant/verwijderklant.html'
    context_object_name = 'user'

    def get_success_url(self):
        messages.success(self.request, 'Gebruiker is verwijderd.')
        return reverse('klantbeheer')

What am I doing wrong with the modal? I also get an error when I click on the trashcan: Uncaught TypeError: Cannot read property ‘classList’ of undefined

This is fixed by deleting -bs- from my data-bs-toggle attribute. Yet for Bootstrap5 I have to use the -bs- inbetween.

Any help is appreciated!

What does happen? Do you see the request being made to the server, or is it not getting that far?

Have you examined your rendered HTML to ensure that it is built correctly?

Is this the error that is happening instead of the request being made? (How does this relate to what you’re talking about above?)

Nothing happens when I click the button. The request is 100% being made to the server because I can load the HTML correctly when I define a new DIV tag and load it in in the AJAX success function.

But even then clicking on ‘Cancel’ or ‘X’ doesn’t close my Modal, only the ‘Delete’ is working because it’s submit type button.

Everything is working but only my Modal for some reason isn’t setup right I believe.

I have deleted the ‘delete’ class on the anchor. But when I add it back a request to the server is 100% being made*

If you can see the request being made, and see that the expected data is being returned in the network tab of the browser’s developer tools, then it would appear to me to be a JavaScript / Bootstrap issue and not a Django issue. You might get better / quicker response in a forum more dedicated to those tools.

Okay, thanks for the help!

Having said that, I did see something that raises a question in my mind.

In your template you have:

So I’m guessing that “dynamic-modal” is supposed to be the div containing the modal dialog box. (I don’t see that in your template, I expect it was edited out.)

In your JavaScript I see:

Is this supposed to be the same element as above? I don’t see a definition for it, either.

Yeah I don’t have any tag with that ID in my template, yet it does work on my other project I have. I was also wondering the same… I already tried changing it to simply “dynamic-model” but doesn’t do anything still.

(there is also no tag with that id in my other project)

It’s a real pain in the ass, I might just switch up to Bootstrap 4 in order for it to work properly, because it is annoying me a lot.

So what happens if you assign that id to the appropriate div in your template?

It’s displaying it under the anchor tag, but buttons like “Annuleer” & “X” (top right) don’t work. Also it should display it centered in a modal over the content. Which it is not doing… So the problem is the modal configuration I assume.

“Verwijder” button is working though