Load Bootstrap Modal only when content is ready

Question

i have a little problem with my bootstrap modal.

I have a list with different listitem. Every item have an id. If i click on a listitem, a model opens with dynamic content of my database. There are some buttons which change color depending on which listitem is clicked.

The problem: The modal appears even if the colors have not yet changed. So i see the modal and one second later the buttons change the color.

So here you can see my Ajax-Call:

$.ajax({
    url:  "{{ (path('editContract')) }}",
    type: 'POST',
    data:{action:'fetch'},
    dataType:"JSON",
    data: { 'id': id, },
    success: function (data) {
    
isPaused = data["paused"];

if(isPaused  === true){
$("#pause-btn").removeClass("bgyellowcolor");
$("#pause-btn").addClass("bggreencolor");
} else {
$("#pause-btn").addClass("bgyellowcolor");
$("#pause-btn").removeClass("bggreencolor");
}


}
 })

$('#editModal').modal('show');   


}));

So is it possible to load the window only when the colors are changed?

Answer 1

You need to call the bootstrap modal inside the ajax and after button class set

    $.ajax({
    url:  "{{ (path('editContract')) }}",
    type: 'POST',
    data:{action:'fetch'},
    dataType:"JSON",
    data: { 'id': id, },
    success: function (data) {
    
      isPaused = data["paused"];

      if(isPaused  === true){
        $("#pause-btn").removeClass("bgyellowcolor");
        $("#pause-btn").addClass("bggreencolor");
      } else {
        $("#pause-btn").addClass("bgyellowcolor");
        $("#pause-btn").removeClass("bggreencolor");
      }

            $('#editModal').modal('show'); 

        }
});