jQuery модальная форма отображается перед ajax

Question

Я кодировал так, что при нажатии кнопки графика он выполняет вызов ajax и отображает график в модальной форме. Код кнопки, код модальной формы представлен здесь. Вместе с Ajax звоните. Проблема, с которой сталкиваются, заключается в том, что он отображает модальное значение даже до завершения Ajax. Функция оповещения выполнена, появляется только после отображения модального режима. Кроме того, он не отображает модальное значение после завершения Ajax.

идентификатор кнопки: plotbtn

<div class="input-group col-1" id="plotdiv">
  <a href="#" class="btn btn-warning btn-sm text-center" style="margin-left:65px" id="plotbtn" name="plotbtn"
    data-toggle="modal" data-target="#plotModal">

    <span><i class="fa  fa-line-chart" style="font-size:24px;color:blue">Plot</i></span>
  </a>
</div>

    <div class="modal fade" id="plotModal" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document" id="modaldialogchild" style="max-width: 100%;margin-left:5px">
        <div class="modal-content" aria-hidden="true">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Employee In Out Time For the week {{from_date}} -
              {{to_date}}
            </h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closebtn2" name="closebtn2">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <div class="modal-body d-none" id="error1">
            <div class="row">
              <div class="col-12">
                <div class="alert alert-danger" role="alert">
                  <div class="row vertical-align d-none" id="error2">
                    <div class="col-1 text-center">
                      <p id="plotp1">
                        <i class="fa fa-exclamation-triangle fa-2x"></i>
                      </p>
                    </div>
                    <div class="col-11">
                      <strong>Error:</strong>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-content" aria-hidden="true">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Employee In Out Time For the week {{from_date1}} -
              {{to_date1}}
            </h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closebtn3" name="closebtn3">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" id="image1">
            <p>testing</p>
            <img src="\static\images\my_fig.png" alt="static/images/my_fig.png" style="width:100%;height:100%"></img>

            <!--img src="\static\images\my_fig.png" alt="\static\images\my_fig.png" style="width:85%;height:85%"></img!-->
            <!--img src="\static\images\cat1.jpeg" alt="ddf"></img!-->
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <!--button type="button" class="btn btn-primary">Save changes</button!-->
          </div>
        </div>
      </div>
    </div>
    <div>
      <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>

      <script>
        ...

        $(document).ready(function () {
          var table = null;
          $('#srchbtn').bind('click', function () {
             ...
            });
            return false;
          });
          var table1 = null;
          //      $('#btn1').bind('click', function () {
          $('#a_nice_table').on('click', 'tr td.a', function () {
...
             });
            return false;
          });


          $('#a_nice_table').on('draw.dt', function () {
            $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
...
          })

          $('#plotbtn').on('click', function (event) {
            //alert("in button click")
            $.ajax({
              data: {
                //sending data to backend
                //name: ('#employee_id').val()
                employee_id: $('input[name="employee_id"]').val()
              },
              type: 'GET',
              url: "/plot.png"
            })
              .done(function (data) {
                alert('in done after ajax');
                if (data.error) {
                  alert(data.error);
                  var str = $("#plotp1").first().text();
                  $("#plotp1").last().html(data.error);
                  $("#error1").addClass("d-block");
                  $("#error1").removeClass("d-none");
                  $("#error2").addClass("d-block");
                  $("#error2").removeClass("d-none");
                  $("#image1").addClass("d-none");
                  $("#image1").removeClass("d-block");
                  event.preventDefault();
                  $('#plotModal').modal({
                    show: false,
                    escapeClose: true,
                    clickClose: true,
                  });

                  //$('#plotModal').style.display = "block";
                  $('#plotModal').fadeIn('slow');
                  $('#plotModal').modal({ 'show': true });
                  $("#closebtn3").click(function () {
                    //alert("in close btn")
                    $("#div1").fadeOut("slow");
                    event.preventDefault();
                  });


                }
                else {
                  alert("in success")
                  from_date1 = data.from_date1;
                  to_date1 = data.to_date1;
                  console.log("success", data.from_date1, data.to_date1);

                  $("#error1").removeClass("d-block");
                  $("#error1").addClass("d-none");
                  $("#error2").removeClass("d-block");
                  $("#error2").addClass("d-none");
                  $("#image1").removeClass("d-none");
                  $("#image1").addClass("d-block");
                  event.preventDefault();
                  $('#plotModal').modal({
                    show: false,
                    escapeClose: true,
                    clickClose: true,
                  });

                  //$('#plotModal').style.display = "block";
                  $('#plotModal').fadeIn('slow');
                  $('#plotModal').modal({ 'show': true });
                  $("#closebtn3").click(function () {
                    //alert("in close btn")
                    $("#div1").fadeOut("slow");
                    event.preventDefault();
                  });

                }


              });


          });



        });
      </script>
</form>