How to use Bootstrap 5 toast
Added by Gavin Blakeman almost 3 years ago
Hi
I am trying to use a bootstrap 5 toast (https://getbootstrap.com/docs/5.0/components/toasts/)
I assign the HTML to a WTemplate and then add the template to a container. However I do not get the toast popup.
The intent of the toast is a user message of a failed action and allow the user to acknowledge.
Will the toast require a custom class and if so, where should it be inherited from?
Thank you for any assistance
Gavin
Replies (2)
RE: How to use Bootstrap 5 toast - Added by Mark Travis almost 3 years ago
Not sure if this is your problem, but I ran into a headache when I tried to run XML through a WTemplate where one of the elements didn't have a closing tag.
I noticed in the link you provided the example does not have a closing IMG tag.
RE: How to use Bootstrap 5 toast - Added by Stefan Bn almost 3 years ago
You need a proper JavaScript implementation of the Bootstrap 5 toasts in a separate .js-File, that you append to your app using WAppliation::require. The Javascript implementation is drescribed here:
https://getbootstrap.com/docs/5.0/components/toasts/#usage
You don't need to put it into a WTemplate, just create your own JavaScript-implementation, something like function displayToast(header, body, ..) {..} that creates and shows the toast. From Wt just call that function using WApplication::instance()->doJavaScript(..); with the parameters for the toasts contents.
Also see that posts:
https://stackoverflow.com/questions/63515279/how-to-initialize-toasts-with-javascript-in-bootstrap-5