Issue
I have a side with card. The cards have different headlines and content. By clicking on the cards a modal opens with the specific text from the card. But when I try it, always the parameters from the first fragment call are used.
This is my code:
Webside with cards, which calls the modal two times:
<!-- First Card -->
<div class="col-12 col-md-6 col-lg-4 mb-md-4 mb-lg-5 pe-4 ps-4">
<div th:insert="fragments/Modal_Card :: Modal_Card('Text 1', 'Headline1')"></div>
<div class="card shadow text-white h-100" data-bs-toggle="modal" href="#Modal_Card" style="background-color: var(--own-green-2); border-radius: 1rem">
<div class="card-body px-5 h-100">
<div class="row">
<div class="col-auto">
<i class="bi bi-pc-display" style="font-size: 2.5rem;"></i>
</div>
<div class="col mt-auto mb-auto">
Headline1
</div>
</div>
<div class="row pt-3 pb-3">
<hr class="mb-3">
Text1
</div>
</div>
</div>
</div>
<!-- Second Card -->
<div class="col-12 col-md-6 col-lg-4 mb-md-4 mb-lg-5 pe-4 ps-4">
<div th:include="fragments/Modal_Card :: Modal_Card('Text 2', 'Headline2')"></div>
<div class="card shadow text-white h-100" data-bs-toggle="modal" href="Modal_Card" style="background-color: var(--own-green-2); border-radius: 1rem">
<div class="card-body px-5 h-100">
<div class="row">
<div class="col-auto">
<i class="bi bi-pc-display" style="font-size: 2.5rem;"></i>
</div>
<div class="col mt-auto mb-auto">
Headline2
</div>
</div>
<div class="row pt-3 pb-3">
<hr class="mb-3">
Text2
</div>
</div>
</div>
</div>
Fragment with Modal:
<div th:fragment="Modal_Card(content, headline)" class="modal fade" tabindex="-1"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true" id="Modal_Card">
<!-- Modal -->
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><span th:text="${headline}"></span></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p th:text="${content}"></p>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
It doesn't matter which card i click the modal always have the parameters "Headline1" and "Text1". If someone know a solution please let me know.
Solution
Both modals have an id
of Modal_Card
. Add an extra parameter to your fragment and use th:id
in the fragment so the id's become unique for each modal.
Something like this:
<div th:fragment="Modal_Card(content, headline, modalId)" class="modal fade" tabindex="-1"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true" th:id="${modalId}">
and use it like this:
<div th:insert="fragments/Modal_Card :: Modal_Card('Text 1', 'Headline1', 'Modal_Card_1')"></div>
Answered By - Wim Deblauwe
Answer Checked By - Mildred Charles (JavaFixing Admin)