So I have this function that sets an achievement in my database and returns infos about the achievement to be displayed on a bootstrap 3 modal.
function setAchievement(idAchievement){
$.ajax({
url: "http://localhost:8080/licenta/setAchievement",
data:{"idAchievement":idAchievement}
}).then(function(data) {
if (data.description != "null"){ // if update was made
$("#description").text(data.description); // set the divs with infos received about the achievement
$("#xp-gained").text(data.xpGained);
}
});
$("#achievementsModal").modal("show"); // display the modal
$( "#continue" ).click(function() { // close the modal when the continue button is clicked
$("#achievementsModal").modal("hide");
});
}
This works just fine when I call the function only once like this:
setAchievement(0);
But sometimes the user can do 2-3 achievements so I need to display 2-3 modals(when i close one, the next one should open).
setAchievement(0);
setAchievement(1);
setAchievement(2);
Here comes my problem, even if my database updates with all 3 achievements , on the view page only one modal opens(for the first setAchievement(0) call).
I can't see a workaround for this problem. Any tips would be great. Thanks.