On my webpage I have a Bootstrap5 Modal, that loads data when the animation is completed. The data is correct on the first load, but if I close the modal by clicking on the X in the top-right corner, click the close button or click outside of the modal, and open the modal for another dataset(player), I sometimes get the correct data and sometimes wrong data.
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">Spielerprofil</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>
<div class="row">
<div class="col-6 gx=2">
<div class="form-group">
<label for="arenaRank">Arena</label>
<input type="text" class="form-control" id="arenaRank" aria-describedby="arenaRank">
</div>
</div>
<div class="col-6 gx=2">
<div class="form-group">
<label for="rtaRank">RTA</label>
<input type="text" class="form-control" id="rtaRank" aria-describedby="rtaRank">
</div>
</div>
</div>
<div class="row">
<div class="col-6 gx=2">
<div class="form-group">
<label for="gkRank">GK</label>
<input type="text" class="form-control" id="gkRank" aria-describedby="gkRank">
</div>
</div>
<div class="col-6 gx=2">
<div class="form-group">
<label for="bkRank">BK</label>
<input type="text" class="form-control" id="bkRank" aria-describedby="bkRank">
</div>
</div>
</div>
<div class="row">
<div class="col-6 gx=2">
<div class="form-group">
<label for="active">Aktiv?</label>
<input type="checkbox" class="form-check-input" id="active" aria-describedby="active">
</div>
</div>
<div class="col-6 gx=2">
<div class="form-group">
<label for="twink">Twink?</label>
<input type="checkbox" class="form-check-input" id="twink" aria-describedby="twink">
</div>
</div>
</div>
<div class="row">
<div class="col-6 gx=2">
<label for="competingLevel" class="form-label">Competing Level</label>
<input type="range" class="form-range" min="1" max="3" id="competingLevel">
</div>
</div>
<div class="row">
<div class="col gx=2">
<label class="form-label" id="messageBox"></label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
<button type="submit" class="btn btn-primary" onclick="savePlayerProfile()">Speichern</button>
</div>
</div>
</div>
</div>
The function that refreshs 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;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (this.readyState==4 && this.status==200) {
jsonObj = JSON.parse(this.responseText);
summonerName = jsonObj.summonerName;
arenaRank = jsonObj.arenaRank;
rtaRank = jsonObj.rtaRank;
gkRank = jsonObj.gkRank;
bkRank = jsonObj.bkRank;
lineID = jsonObj.lineID;
active = jsonObj.active;
twink = jsonObj.twink;
competingLevel = jsonObj.competingLevel;
document.getElementById('summonerName').value = summonerName;
document.getElementById('arenaRank').value = arenaRank;
document.getElementById('rtaRank').value = rtaRank;
document.getElementById('gkRank').value = gkRank;
document.getElementById('bkRank').value = bkRank;
document.getElementById('lineID').value = lineID;
document.getElementById('active').checked = active;
document.getElementById('twink').checked = twink;
document.getElementById('competingLevel').value = competingLevel;
}
}
xhttp.open("GET", "./utility.php?f=getMemberProfile&id=" + ID);
xhttp.send();
});
myModal.show();
}
I found the problem. I added an EventHandler everytime I clicked the button. I thought the EventHandler would be overwritten. But instead it was added. So I removed the EventHandler from the object, before adding the next one.