Modal Twig Component

Hey @creativx007

That's a little mistake coming from the course code (I'm going to fix it soon). For the moment, replace loadingTemplate with loadingContent in templates/components/Modal.html.twig at line 37

Cheers!

hey, thank you very much. That works.

Can I ask another question? I have also installed Flowbite for the design blocks. I only create the modals using the dialog element. But now I always get the following error in the console every time I call it:
Modal with id dialog does not exist. Are you sure that the data-modal-target attribute points to the correct modal id?

Modal with id dynamicContent does not exist. Are you sure that the data-modal-target attribute points to the correct modal id?<br />

Modal with id loadingContent does not exist. Are you sure that the data-modal-target attribute points to the correct modal id?

How can I prevent this? Thanks and cheers :)

Great! I'm glad to know that it worked. About your other question, I'm not familiar with Flowbite, but unless those error messages are misleading, I think you need to double-check your modal id value, and also check that you're correctly setting the value of data-modal-target

Cheers!

Good morning :) Thank you very much, it is really a pleasure to work here - you get competent help and it works. I was able to fix the error with the ID dialog. I still can't solve the other two errors (Modal with id dynamicContent and Modal with id loadingContent).

In the base.html.twig template I have the following block:

    <twig:Modal>
        <turbo-frame
                id="modal"
                data-modal-target="dynamicContent"
                data-action="turbo:before-fetch-request->modal#showLoading"
                class="aria-busy:opacity-50 transition-opacity"
        >
            {{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
        </turbo-frame>
        <twig:block name="loading_template">
            <div class="bg-space-pattern bg-cover rounded-lg p-8">
                <div class="space-y-2">
                    <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
                    <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
                    <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
                    <div class="h-4"></div>
                    <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
                    <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
                    <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
                    <div class="h-4"></div>
                    <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
                </div>
            </div>
        </twig:block>
    </twig:Modal>

Here I have the target dynamicContent - but I don't know what's happening here. The error complains that a modal with the ID dynamicContent doesn't exist. In the entire code, "dynamicContent" only appears in connection with data-modal-target. Do you have any ideas?

Cheers :)

I'm a bit confused about the error messages. It says that the "Modal with id dynamicContent" does not exist. So, it makes me think that you're creating 3 modal elements, but you should have only one. Please, double check that you're rendering the Modal component only once.
Now, the modal controller requires 3 target elements, dialog, dynamicContent, and loadingTemplate. Double-check that these 3 elements are set up correctly. You can check this code block or download the course code and look at the finish directory
https://symfonycasts.com/screencast/last-stack/modal-component#codeblock-54eed16182

I hope it helps!

Hi guys,

I've come accross the comments, and I can say that I've got the same issue here.

3 same errors saying that the data-modal-target are not set, but it is...

The modal works just fine, but still got the errors on page loading and after every action

Hey @ThierryGTH!

Thanks again for that great tutorial !

Really glad you enjoyed it!

Is it possible to trigger the same action of clicking the data-turbo-frame link but from an stimulus controller ?

Here's how I would probably handle this:

A) Pass the url - my_url - into your Stimulus controller as a value so you have access to the URL
B) Instead of trying to click the link, find the frame and set its src:

// use this.element.querySelector('#turbo_frame_id') if the frame is inside the controller
document.getElementElementById('turbo_frame_id').src = this.urlValue;

That should be all you need. The frame will see that the src just changed and start doing its thing. In fact, I think when you have data-turbo-frame="turbo_frame_id", all that does internally is take the href and put it onto the src of the turbo-frame. Then the frame handles things from there.

Cheers!

Thank you very much !
That's work perfectly and it's much prettier setting src than virtually clicking a tag.
The issue with Chrome and Safari was just because I was using data-action=click-> inside an select option tag :
<select><option data-action="click->myController#myFunctionToClickVirtualy>Add item</></select>
The solution is to handle at the select level :
<select data-action="myController#myOnChangeFunctionToManageWhatToDoDependingValue"><option value="addItem">Add item</option></select>
Cheers!

Hey @escobarcampos!

Before, I was always using stimulus_controller('modal') instead of data-controller="modal" in twig... something I learned from your other Stimulus tutorial

Yea, I created these helpers and get used to them... then recently got accustomed to the attribute names. Now those feel better to me. But, both are fine!

This does not work inside the twig component's default attributes though.

You can do this - here's the reference in general about this (there's a note in this section) - https://symfony.com/bundles/ux-twig-component/current/index.html#component-attributes - I think you could combine them in this way, but I could be totally borking the syntax 🫠

<div {{ attributes.defaults({
    ...stimulus_controller('modal'),
    ...stimulus_action('turbo:before-cache@window->modal', 'close')
}) }}

The .defaults() functions accepts a "hash" (i.e. associative array) and stimulus_controller('modal') returns an iterable object. So, iirc, using ... to spread that will work. But let me know. It's not super smooth, and it may even have some escaping differences... I can't quite remember. This definitely helped push me towards just using the attributes.

Cheers!