My website features a Bootstrap5 Modal that loads data once the animation is complete. The issue arises when I close the modal by clicking the X in the top-right corner, the close button, or outside the modal. When I reopen the modal for another dataset (player), sometimes I receive the correct data and sometimes incorrect data.
Here is the structure of the modal:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Player Profile</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="modal-body">
<form>
<div class="row">
<div class="col-6 gx=2">
<div class="form-group">
<label for="summonerName">Summoner Name</label>
<input type="text" class="form-control" id="summonerName" aria-describedby="summonerName">
</div>
</div>
<div class="col-6 gx=2">
<div class="form-group">
<label for="lineID">LineID</label>
<input type="text" class="form-control" id="lineID" aria-describedby="lineID">
</div>
</div>
</div>
<!-- Truncated for brevity -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" onclick="savePlayerProfile()">Save</button>
</div>
</div>
</div>
</div>
The JavaScript function responsible for refreshing the data:
function loadPlayerProfile(ID){
var container = document.getElementById("myModal");
var myModal = new bootstrap.Modal(container);
console.log(myModal);
container.addEventListener("shown.bs.modal", function() {
var summonerName, arenaRank, rtaRank, gkRank, bkRank, lineID, active;
// Truncated for brevity
});
myModal.show();
}