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.

Member Avatar

diafol

Ajax is asynchronous, so it's all out of sync - obviously!

Any reason why you'd want modal after modal to show up? That must be annoying in the extreme. Why not just have all the data in one modal?

Thank you for the response. As an alternative I was thinking of having a central div on the modal and "slide" the achivements through that central div, but I come to the same situation. What i mean is like show some achivement, wait like 3-4 seconds, show the second achivement, etc.