Listening to An Event From Another Controller

Hello !

I'm facing the reverse situation of this. I'm designing a simple text editor and when the the user add a link I want to show a modal where he can type it.

<div class="editor" data-controller="editor">
    <div class="editor-toolbar>
        <div data-controller="modal">
            <button data-action="editor#toggleLink">Add/Remove link</button>
            <div class="modal" data-modal-target="modal">
                <input type="text" data-editor-target="linkUrl">
                <button data-action="editor#addLink">Validate</button>
            </div>
        <div>
    </div>
    <div class="editor-content></div>
</div>

So, when I'm clicking the editor#toggleLink button I want to do some checkings (like "is some text selected") and then open the modal. Then I enter the link and trigger the editor#addLink function, which check if it's a real link (if not render an error on the modal). add the link close the modal.

But to open and close the modal, I cannot simply do data-action="modal#open/close" beacause I first want to do some checkings before.

The solution I have found is dispatching an event in my editor controller like editor:openLinkModal and editor:closeLinkModal. But the problem is that the event i bubbling up and not down in the child elements.

If I try to catch it with editor:closeLinkModal@window->modal#close it will trigger all the modals if multiple editors are on the same page.

I don't know if there is an elegant way to do this, or if my design is bad and I have to do it totally differently. If you could give some hints I would be very grateful.

Thanks again for the awesome courses !

Hi Guys,

Thank you for your work.

I have a small question regarding the following subject:

<h2>Stimulus Examples Ajax 2</h2>
<div
    class="ez-scrollable-table-wrapper px-3"
    {{ stimulus_controller('log-list', {
        cartRefreshUrl: path('_app_log_list')
    }) }}
>
    {{ include('@ezdesign/docs/_logList.html.twig') }}
</div>

And in _logList.html.twig I do have an array.

I tried to do:

<table class="ez-table table table-hover"
       {#  {{ stimulus_controller('submit-confirm', {
            title: 'Remove this item?',
        }) }} #}
       data-controller="submit-confirm">
</table>

But the last event is never triggered, I had to move my submit-form controller into each form.

Could you explain why this is happening ?

Hi Symfonycast team,
Thank you very much for all your work !
As you mentioned, useDispatch() is now deprecated and we may directly use this.dispatch() directly in any native stimulus controller.
But how may we active debug mode to see the event in browser console ?
We use to add useDispatch(this,{debug:true}) in connect method.
How can it be done now ?
Cheers

Hi Ryan, nice work!!

Just a note. When I have nested stimulus controllers and the child one inside a turbo frame like this:

<div data-action="controller_2">
	<turbo-frame id="frame_id">
		<div data-action='controller_1:event_name->controller_2#method_name'>
			<div data-controller="controller_1">
				<button data-action="controller_1#dispatch_event_method"></button>
			</div>
		</div>
	</turbo-frame>
</div>

The method_name in controller_2 is executed only when the frame is loaded for the first time, but if the same content is reloaded in the frame through Turbo frame mechanism, the event is no longer propagated correctly when the button is clicked. For it to work I have to put the div that captures the event as the parent of the frame like this:

<div data-action='controller_2'>
	<div data-action='controller_1:event_name->controller_2#method_name'>
		<turbo-frame id="frame_id">
			<div data-controller="controller_1">
				<button data-action="controller_1#dispatch_event_method"></button>
			</div>
		</turbo-frame>
	</div>
</div>

Or this way using @window:

<div data-action='controller_2'>
	<div data-action='controller_1:event_name@window->controller_2#method_name'></div>
	<turbo-frame id="frame_id">
		<div data-controller="controller_1">
			<button data-action="controller_1#dispatch_event_method"></button>
		</div>
	</turbo-frame>
</div>

Cheers.