The "defer" Attribute & Conditionally Activating Turbo

Hey @JeffJones

Your problem can likely be solved with a Turbo-Frame. Have you watched those chapters yet? Take a look at them and let me know if you run into trouble

Cheers!

Sounds good. And, no, I haven't gotten that far yet. Those chapters have just moved up on my to-do list.

Thanks!

Just some notes. The form is not a simple blog post form so the "preview" involves multiple fields displayed in a widget including uploaded images. So next to the form div is a preview div. I am thinking the Stimulus can probably help with updating the preview live. Just haven't gotten that far yet... moving a site from a different framework over to Symfony. Everything's different so I'm dealing with a big learning curve... ha!

Ha! That's a cool but challenging task. If you're not under a tight deadline, you may want to learn about Twig Live Components as well. I think they are a good fit for your preview feature
https://symfony.com/bundles/ux-live-component/current/index.html

Cheers!

Hey Kevin B.!

That's a very simple, good question :D. The answer is... maybe? On a high level, yes, this should work. But, you'd need to try it to be sure. For example, in addition to attaching event listeners (all the normal document.ready() stuff), it's possible you might have some other JavaScript that truly shouldn't be run more than once (e.g. you call some initialization function on some 3rd party JS, which explodes if you do that twice on the same "page").

So this is conceptually a correct assumption, but my guess is that at least a few things would bite you (but if you find and squash those, it seems ok to me).

Cheers!

Hi Brandon!

What I usually do in such cases is simply to print out these routes values of the controller using twig. This way you don't need any client-side solution and the result is portable and simply works. For example, in twig, you can initialize your controller like this:

<div
    class="my-controller-div"
    {{ stimulus_controller('my-controller', { myRoute: path('path-to-my-route', { id: product.id }) }) }}
>
    More HTML here
</div>

This way in your controller, you can access all these route through the Values API:

export default class extends Controller {
    static values = {
        myRoute: String,
    };


   .
   .
   .

}

Hope this helps!

Quick question again, I see how this works when adding myRoute to the stimulus_controller call, how would I add this to something else, like:

In short, how do I send the data-url value to delete_controller#remove function? The value comes from a database for loop in
a twig template. Any help is much appreciated, thank you!

The following is in A tag
data-action="click->delete#remove"
data-url="{{ path('labor_board_delete', {id:worker.id}) }}"
class="delete"
This didn't post before, sorry

Playing with this more, I guess my real question is it bad practice to call {{ stimulus_controller('my-controller', { myRoute: path(...)} in a for loop on a twig template?

Hey @Brandon

I think it depends on your situation. Do you need to instantiate a Stimulus controller per each item in your loop? Or, a single Stimulus instance it's enough but you just need to get all of the routes?

A single instance is all I need, I'm just unclear on how to get all the routes to the controller in the loop

Hi Brandon! If you have a case where the values API of stimulus isn't good enough for your needs, and you have a data-url attribute in the HTML element (in the case you posted, the element would also be the event's target), you can retrieve the URL as follows:

remove(event) {
    const url = event.target.dataset.url;
   .
   .
   .

}

I'm not sure if this is what you mena in your question!

Matias, thank you for the help. I love PHP but I do struggle with JavaScript. My problem is that I'm using drag and drop, and when I drag something with a certain class, like "warning", it does an Ajax call to a certain URL, and if the class contains "success", I go to a different URL. It all works, but not consistently. When I drag something with a class of "warning" in my console it says I dragged something with "success", but not every time. And when I inspect the element, the class I'm dragging doesn't match what my console.log says it is. I've spent days trying to figure this out, and my previous questions were all ideas I've been trying to solve it. Thank you for your help, it has gotten me closer and other parts of my code are better for it.

No problem! I hope you get it working 100%!

Perfect, I'm able to console.log myRoute and it works! Thank you so much for your help.