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!
