如何在表单提交后显示引导 Toast 消息?

Question

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

"类型错误： $(...(.吐司不是一个功能">

我还尝试在页面加载时加载 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时，你不能使用toast这样的东西。我在尝试使用模态时发现，这也不起作用。因为我两者都需要，所以我添加了 noConflict 选项：

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

这也适用于模态。