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

Question

After a successful form submit I try to display a bootstrap toast message. The form submit works fine, and after the submit the onSuccess function runs but I get this error:

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

I also tried to load the toast on pageload but that provided the same error

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

I found the problem. Apparently, when combining Jquery and Bootstrap you can't use things like toast. I found out when trying to use the modal instead, which also didn't work. Because I need both I added the noConflict option:

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

This also works with modals.