Bootstrap Modal not showing when sending AJAX request

Question

I am trying to show a modal while waiting for an AJAX POST request to return but the modal shows after the POST request is made. The modal is supposed to be show on form submit and this works when I am not making the POST request but with the POST request it shows later.

This is my Modal:

<div
      class="modal fade"
      id="loadingModal"
      tabindex="-1"
      aria-labelledby="loadingModalLabel"
      aria-hidden="true"
    >
      <div
        class="modal-dialog modal-dialog-centered"
        style="width: 300px; margin: auto"
      >
        <div class="modal-content">
          <div class="container text-center animationContainer">
            <h2>Drone Initialising</h2>
            <p>Please Wait</p>
            <div class="row">
              <div class="col-md-8 mx-auto">
                <lottie-player
                  src="https://assets10.lottiefiles.com/packages/lf20_2rqike9d.json"
                  background="transparent"
                  speed="1"
                  style="width: 250px; height: 250px"
                  loop
                  autoplay
                ></lottie-player>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

This is the JS code used to activated the modal:

$('#destination_form').on("submit", function(e) {  
   
    // $('#loadingModal').modal('show'); This works without the POST request
    
    var x = document.forms['destinationForm']['xCoord'].value;
    var y = document.forms['destinationForm']['yCoord'].value;
    var altitude = document.forms['destinationForm']['altitude'].value;
    var velocity = document.forms['destinationForm']['velocity'].value;

    requestUrl = Url + "sendFlightParams";

    console.log(JSON.stringify({
        "xCoord": x,
        "yCoord": y,
        "altitude": altitude,
        "velocity": velocity
    }));
    $.ajax
    ({
        type: "POST",
        url: requestUrl,
        async: false,
        crossDomain: true,
        contentType: "application/json",
        data: JSON.stringify({
            "xCoord": x,
            "yCoord": y,
            "altitude": altitude,
            "velocity": velocity
        }),
        beforeSend: function(){
            $('#loadingModal').modal('show'); // show modal here
        },
        success: function () {
            window.location.href = "videostream.html";
        },
        error: function(jqXHR, textStatus, errorThrown) { 
            console.log(errorThrown)
        }
    })

});

I'm not sure why the modal is shown after the POST request and not before.

Answer 1

I think the problem is the async propertie in $ajax.

Ref. https://api.jquery.com/jquery.ajax/ By default, all requests are sent asynchronously. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

try to set it true or remove it.

async: true,