Bootstrap 5 toasts not working

[karh]

In the 3.7.0 release notes I can see that the toast messages should be working with BS5

However when I set up a ‘show toast’ message through a dynamic event I see that it’s still adding the dmxBootstrap4Toasts.js

I can’t see a dmxBootstrap5Toasts.js

Is this a bug or still on the todo list?

[karh]

Gentle bump.
This plus Bootstrap 5 Icons in Wappler are our only bottlenecks to fully utilize BS5

[George]

Just rename dmxBootstrap4Toasts to dmxBootstrap5Toasts in the include code.
Folders will be copied and created automatically.

Automatic conversion from Bootstrap 4 to 5 will be adjusted in the next update but that will be only for full new conversions.

[karh]

@George
Renaming it in the layout page did generate a file as you said.

However the toasts aren’t showing anything (I think it’s relying on Jquery still):

1. I’ve included that layout on my page
2. I’ve made a button that triggers a flow on click: it should show a notification + a toast
3. Notification does show. Toast does not. Error in console:

toasts.js:56 Uncaught (in promise) ReferenceError: $ is not defined
        at Object.show (toasts.js:56)
        at n.toast.show (toasts.js:8)
        at n._execStep (flow.js:83)
        at flow.js:37 

2021.04.14 13.38 - 2077 - Veery

PS I also can’t add the toast element on the page as component

[George]

you have both boostrap4 Toasts and Bootstrap5 toasts included - should be just the later

[karh]

Ah yes it automatically added that when creating the flow again.

Anyhow - just removed BS4 toasts, still same:

2021.04.14 13.48 - 2080 - Barnswallow

[George]

I see, you need to change also dmx-bs4-toasts, to: dmx-bs5-toasts
in your code

[karh]

@George

dmx-bs4-toasts

Sorry, where can I find that?

If you mean this one in the view, I’ve changed this to bootstrap5 toasts

[Teodor]

Please wait until this weeks update, when the issues with the Toast component for BS5 will be fixed.

[karh]

Of course, thanks!

[patrick]

Fixed with Wappler 3.9.5