如何在表单提交后显示 bootstrap toast 消息？

Question

表单提交成功后，我尝试显示一条 bootstrap toast 消息。表单提交工作正常，提交后 onSuccess 函数运行但我收到此错误：

"TypeError: $(...).toast is not a function"

我也尝试在页面加载时加载 toast，但出现了同样的错误

javascript:
function completeRequest(result) {
  console.log('Response received from API: ', result);
  $('.toast').toast('show');
}

HTML:
      <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
        <div class="toast" data-delay="5000" style="position: absolute; top: 0; right: 0;">
          <div class="toast-header">
            <strong class="mr-auto">Thank you</strong>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="toast-body">
            Success
          </div>
        </div>
      </div>

Answer 1

我发现了问题。显然，在组合 Jquery 和 Bootstrap 时，您不能使用吐司之类的东西。我在尝试改用模式时发现，这也没有用。因为我需要两者，所以我添加了 noConflict 选项：

function completeRequest(result) {
  console.log('Response received from API: ', result);
  jQuery.noConflict(); 
  $('.toast').toast('show');
}

这也适用于模式。

如何在表单提交后显示 bootstrap toast 消息？

How to display a bootstrap toast message after a form submit?

forms

bootstrap-4

toast