Action descriptor and Bootstrap events

1

Hello!

First of all, great framework! It does wonders on an existing rails backend. :+1:

I have a small issue where I use Bootstrap nav tabs and its events(https://getbootstrap.com/docs/4.1/components/navs/#events).
I’m trying to call a function when the shown.bs.tab is triggered. I tried to bind my function with shown.bs.tab->foo#bar but it doesn’t get called.

I’m sure that the DOM element having the data-action which is a simple <a>, is the correct one: if I try to bind an event listener on show.bs.tab using JQuery, it works as expected.

My guess is that the event name, show.bs.tab, can be an issue when Stimulus parses it. Perhaps having dots in the name is the problem.

Anyone has dealt with this before?

I workaround the situation using click->foo#bar but my event listener would be greatly simplified if I was able to call it on the proper event.

1 Like
2

Is shown.bs.tab a native event or a jQuery event? I think Stimulus doesn’t not work with jQuery events.

1 Like
3

Ah yes, you must be right. I’ll take time to check that.

Thanks for your input!

4

Would you be able to provide your end solution? Thanks.

5

As guessed by @jwald1, shown.bs.tab is not a native event and thus does not work with Stimulus.

I ended up using a click event on the tab and waiting some ms (with setTimeout) to give time to the tab to be display. I know it looks like a ugly workaround but that’s the best I ended up with.

Let me know if you find a better way, in particular avoiding using setTimeout.

3 Likes