The "defer" Attribute & Conditionally Activating Turbo

Hello, I wanted to clarify something. If I want my app to use turbo (quickly) and I have a huge, ugly jquery document ready function (I don't want to immediately split this out into stimulus controllers), I can just move it into a turbo:load event and be good to go?

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!

I've gone through and converted my inline javascript into stimulus controllers. My last one is I use FullCalendar, and I'm struggling to get it to work in a stimulus controller. The problem I'm having is that in my original inline javascript, I call routes from the twig template to load events, lots of them, I have 9 different routes I load into the calendar. I've looked into FOSJS so I can use the routes in the controller, but that isn't working for me. Do you have any suggestions? Another thing is that my route is passed with a variable as well. I'm using webpack encore, stimulus, symfony 5.3.7, everything is the latest versions. I tried this as well: url: "{{ path('event_orders', {id:jobid}, {'parameter':controller_value}) }}", but I don't get anything in the console and the event doesn't load. Any help is much appreciated, thank you for your hard work.

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.