Bootstrap modal.show() запускается мгновенно вместо асинхронного ожидания

У меня есть отправка формы, которая вызывает API, например

        <button
          class = "btn btn-primary w-100"
          data-bs-toggle = "modal"
          data-bs-target = "#exampleModal"
          onclick = "Send();"
        >
          Invia
        </button>

Где находится функция Send()

function Send() {
  var select_file = document.getElementById("formFile").files[0];
  var select_project_name = document.getElementById("selec-div").value;
  var pacchetto_id = document.getElementById("pacchetto").value;
  var versione_id = document.getElementById("versione").value;
  var file_string =
    "https://<xxxx>.it/api/;
  console.info(file_string);

  var formData = new FormData();
  formData.append("file", select_file);

  fetch(file_string, {
    method: "PUT",
    headers: {
      "PRIVATE-TOKEN": TOKEN,
    },
    body: formData,
  })
    .then((response) => response.json())
    .then((data) => {
      console.info("File uploaded successfully:", data);
      if (data["message"] == "201 Created") {
        modal.show();
      }
    })
    .catch((error) => {
      console.error("Error uploading file:", error);
    });
}

Моя проблема в том, что модальное окно открывается сразу после того, как я нажал кнопку, а не отображается после data["message"] == "201 Created".

По сути, даже если я вижу console.info("File uploaded successfully:", data);, когда файл действительно загружен, вместо этого модальное окно отображается сразу после нажатия кнопки.

modal-dialog bootstrap-modal bootstrap-5

15.04.2024 15:16

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо удалить атрибуты data-bs-* из button, поскольку они автоматически запускают модальное окно и показывать/скрывать модальное окно только с помощью JS:

  <button
      class = "btn btn-primary w-100"
      onclick = "Send();"
    >
      Invia
    </button>

Модальный экземпляр JS:

    const modal = new bootstrap.Modal('#exampleModal');

демо:

<!doctype html>
<html lang = "en">

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
  <link href = "https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel = "stylesheet">
  <title>Bootstrap Example</title>
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class = "p-3 m-0 border-0 bd-example m-0 border-0">

  <!-- Example Code -->


  <form abineguid = "06622E9DA1A84EF183141C48C5CDF885">
    <div class = "mb-3">
      <label for = "recipient-name" class = "col-form-label">Recipient:</label>
      <input type = "text" class = "form-control" id = "recipient-name">
    </div>
    <div class = "mb-3">
      <label for = "message-text" class = "col-form-label">Message:</label>
      <textarea class = "form-control" id = "message-text"></textarea>
    </div>

      <button
          class = "btn btn-primary w-100"
          onclick = "Send(event);"
        >
          Invia
        </button>
    
    
  </button>

  </form>



  <!-- Modal -->
  <div class = "modal fade" id = "exampleModal" tabindex = "-1" aria-labelledby = "exampleModalLabel" aria-hidden = "true">
    <div class = "modal-dialog">
      <div class = "modal-content">
        <div class = "modal-header">
          <h1 class = "modal-title fs-5" id = "exampleModalLabel">Modal title</h1>
          <button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close"></button>
        </div>
        <div class = "modal-body">
          ...
        </div>
        <div class = "modal-footer">
          <button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal">Close</button>
          <button type = "button" class = "btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>



  <script>
  
    const modal = new bootstrap.Modal('#exampleModal');



    function Send(e) {

      e.preventDefault()

      var file_string = "https://jsonplaceholder.typicode.com/todos";
      console.info(file_string);


      fetch(file_string)
        .then((response) => response.json())
        .then((data) => {
          console.info("File uploaded successfully:", data);
          setTimeout(()=>{
           modal.show();
          }, 1000);

        })
        .catch((error) => {
          console.error("Error uploading file:", error);
        });
    }
  </script>
</body>

</html>

16.04.2024 08:34

Другие вопросы по теме

Модальное окно загрузки .NET MVC не отображается

Bootstrap 5.3 Прокручиваемое модальное окно с формой в теле и кнопкой отправки в нижнем колонтитуле

Использование таблиц данных предотвращает открытие других модальных окон при нажатии на кнопку внутри tr td, где нажатие на tr открывает другое модальное окно

Модальное окно Bootstrap 3 и видео.js не изменяются должным образом

Я хочу нажать на текст и отобразить pdf в модальном режиме

Bootstrap video Modal не воспроизводится автоматически и продолжает воспроизводиться даже при выходе

Модальная прокрутка начальной загрузки не работает, когда внутри нее находится навигационная вкладка

Модальное окно Bootstrap 3 из нижнего колонтитула, как на Badoo

Страница продолжает обновляться, когда я нажимаю на Bootstrap Modal

Пустая форма открытия html внутри iframe в модальном режиме начальной загрузки

Bootstrap modal.show() запускается мгновенно вместо асинхронного ожидания

Ответы 1

Другие вопросы по теме

Похожие вопросы