открытие модели в html после получения ответа от API в html

Question

У меня есть этот код в html, где я нажимаю на кнопку «Отправить», чтобы нажать на API. После нажатия на API я получаю некоторый ответ, и на основании этого мне нужно открыть модель. Как нам этого добиться?

    <div class="container mr-0">
      <div class="row">
        <div class="col-md-5">
          <div class="row">
            <div class="col-md-12 contact-form pb-5">
              <div class="sign-up">
                <h4>Get Quote</h4>
              </div>
              <form onsubmit="myFunction('myForm')" id="myForm">
              <div class="form-group">
                <input class="form-control" placeholder="Name of company" type="name">
              </div>
              <div class="form-group">
                <input class="form-control" placeholder="Number of employees" type="number" required="">
              </div>
              <div class="form-group">
                <input class="form-control" placeholder="Contact person name" type="name" required="">
              </div>
              <div class="form-group">
                <input class="form-control" placeholder="Contact person email" type="email" required="">
              </div>
              <div class="form-group">
                <input class="form-control" placeholder="Contact person mobile number" type="number" required="">
              </div>
              <div class="pt-3">  
                <!-- <button type="submit"  class="get-button-light">SUBMIT</button> -->
                <button type="submit" class="get-button-light" " >SUBMIT</button>
              </div>
            </form>
            </div>
            <!-- <div class="col-md-2"></div> -->
          </div>
        </div>
        <div class="col-md-7 position-relative">

          <div class="lets-start">
            <img src="./assets/images4/lets-start.png"  width="100%">

          </div>
        </div>
      </div>
    </div>
  </section>

Код для модели в том же html.

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content inner-content">

<!-------------->
<section class="all-done">
  <div class="container">
    <div class="row">
      <div class="col-md-12 p-4" >
<div class="all-bg">
<h4>Done</h4>
<p>Team <span>Vital</span> will connect with you in <br>next 24 hours .</p>
<div class=" text-right">
<img src="assets/images4/base-plan-like.png" />
</div>
</div>
      </div>
    </div>
  </div>
</section>

<!-------------->

    </div>
  </div>
</div>

Мой коллега-разработчик сделал это при нажатии кнопки отправки data-toggle = "modal" data- target = "# exampleModalCenter", но он открывает модель, даже если api не был задействован. Как мы можем контролировать это с помощью javascript. При нажатии кнопки отправки я столкнулся с проблемой api. Моя проблема в том, как сделать это с javascript.

Answer 1

Вы можете вызвать модель после ответа API, используя вызов

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

Здесь функция обратного вызова срабатывает после открытия модального окна.

$('#exampleModalCenter').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

ДОКУМЕНТАЦИЯ