Hello!
I want to attach a modal to all images. But for some reason the modal is not triggered and the entire page becomes un-clickable.
I have made sure that all modals triggers and modal have a unique ID without any results.
Can anyone see what I am doing wrong?
{% for photo in user_photos %}
<div class="image-container">
<div class="image-wrapper" data-bs-toggle="modal" data-bs-target="#photoModal{{photo.id}}">
<img src="{{ photo.photo.url }}" alt="Användarbilder">
{% if request.user == photo.user %}
<form method = "POST">
{% csrf_token %}
<i class="bi bi-x-lg profile_delete_photo" title="Radera" data-photoId = "{{photo.pk}}" data-url = "{% url 'profilepage_app:deletePhotoAjax' %}"></i>
</form>
{% endif %}
</div>
<span>Uppladdat: {{ photo.timesince }}</span>
<!-- Modal -->
<div class="modal fade" id="photoModal{{photo.id}}" tabindex="-1" aria-labelledby="photoModallabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="photoModal{{photo.id}}Label">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
I also have this for loop and modal in another page, but it works fine.
{% for diary in user_diaries %}
<tr>
<td>
<!--Diary title-->
<a href="{{diary.get_absolute_url}}">{{diary.title|truncatechars:30}}</a>
{% if request.user == user %}
<div>
<!--Dropdown-->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" fill="currentColor" class="dropdown-toggle bi bi-three-dots-vertical" viewBox="0 0 16 16">
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
<!-- Dropdown options -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#updateModal{{ diary.id }}">Uppdatera</button>
<button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#deleteModal{{ diary.id }}">Radera</button>
</div>
<!-- Diary update modal -->
<div class="modal fade" id="updateModal{{ diary.id }}" tabindex="-1" aria-labelledby="updateModallabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content diarypage-update-modal">
<div class="modal-header">
<h1 class="modal-title fs-3" id="deleteModallabel">Uppdatera din dagbok</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="modal-body" method="POST">
{% csrf_token %}
<input type="hidden" name="diary_id" value="{{ diary.id }}">
{% for field in diary_update_form %}
<div class="bs-form-control">
<label for="">{{field.label}}</label>
<div>{{field}}</div>
</div>
{% endfor %}
<div class="modal-footer" id="diary-update-modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Ångra</button>
<button type="submit" class="btn btn-primary">Uppdatera</button>
</div>
</form>
</div>
</div>
</div>
<!--Diary delete modal-->
<div class="modal fade" id="deleteModal{{ diary.id }}" tabindex="-1" aria-labelledby="deleteModallabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content diarypage-modal-delete">
<div class="modal-header">
<h1 class="modal-title fs-3" id="deleteModallabel">{{diary.title}}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body fs-4 text-center">
Vill du radera denna dagbok?
</div>
<div class="modal-footer">
<form action="{% url 'profilepage_app:deletediary' pk=diary.id %}" method = "POST">
{% csrf_token %}
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Ångra</button>
<button type="submit" class="btn btn-primary">Radera</button>
</form>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</td>
</tr>
{% endfor %}