如何在表单提交后显示 bootstrap toast 消息?
How to display a bootstrap toast message after a form submit?
表单提交成功后,我尝试显示一条 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">×</span>
</button>
</div>
<div class="toast-body">
Success
</div>
</div>
</div>
我发现了问题。显然,在组合 Jquery 和 Bootstrap 时,您不能使用吐司之类的东西。我在尝试改用模式时发现,这也没有用。因为我需要两者,所以我添加了 noConflict 选项:
function completeRequest(result) {
console.log('Response received from API: ', result);
jQuery.noConflict();
$('.toast').toast('show');
}
这也适用于模式。
表单提交成功后,我尝试显示一条 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">×</span>
</button>
</div>
<div class="toast-body">
Success
</div>
</div>
</div>
我发现了问题。显然,在组合 Jquery 和 Bootstrap 时,您不能使用吐司之类的东西。我在尝试改用模式时发现,这也没有用。因为我需要两者,所以我添加了 noConflict 选项:
function completeRequest(result) {
console.log('Response received from API: ', result);
jQuery.noConflict();
$('.toast').toast('show');
}
这也适用于模式。