Jquery and bootstrap multiple modals.

[alex.dimofte.5]

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.

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?

[alex.dimofte.5]

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.