Use Jquery + turbo:load for script execution on each page

[sylzys]

Is there a way to use jquery AND "turbo:load" ?

With turbo:load "simulating" a SPA, scripts are only exceuted on the first page load. My jQuery scripts work, if I reload the page where I want the script to be executed.

The docs mentions document.addEventListener("turbo:load", which works really well btw, but i'd have to rewrite everything in vanilla JS. Is there another way so I can use my jQuery scripts whenever I navigate on a page ?

Thanks again for the awesome work !

[tabuna]

Hi @sylzys, you can use jQuery inside an event or call it there:

document.addEventListener("turbo:load", () => {
    $( "button.continue" ).html( "Next Step..." )
})

There is a big difference only with load events such as

$ (document) .ready (function () {
     console.log ("ready!");
});

They should be changed to a turbo call.

I would recommend trying to try https://stimulus.hotwired.dev/, which is used as a basis. We also wrote a small example of how you can use this https://orchid.software/en/docs/javascript/

But you can still use any library or framework like Vue / React, and the only point is the initialization process is tied to the turbo event.

[sylzys]

Hi @tabuna , thanks for you quick reply.

I already tried

document.addEventListener("turbo:load", () => {
    $( "button.continue" ).html( "Next Step..." )
})

but it doesn't seem to work. I uses an alert to test and I get nothing, even when I reload the page (whereas with documentReady I had my alert working, but only when I refreshed the page.

Stimulus seems promising, is it compatible with the HTML code generated by Layout or protected function fields()' function elements ?

Thanks for you help :)

[tabuna]

but it doesn't seem to work. I uses an alert to test and I get nothing, even when I reload the page (whereas with documentReady I had my alert working, but only when I refreshed the page.

I need to clarify which version of the application you have? Because in the past this event was called differently:

document.addEventListener("turbolinks:load", () => {
    $( "button.continue" ).html( "Next Step..." )
})

Stimulus seems promising, is it compatible with the HTML code generated by Layout or protected function fields()' function elements ?

We use this for many fields. You can create your own field with your own controller. Feel free to ask for help. You can also see the already existing fields.

[sylzys]

I'm currently using platform v10.12.0.
I've read the JS example on the docs but do't really understand it :/

My jquery script are really simple, like when an amount is entered I have to fill an Input (into a layout:rows) with the amount + VAT, or display a Relation select based on another selected choice.

I think, by reading the docs, I could use a Listener for this purpose but it seemed more complicated than using a simple jquery script.

Unfortunately it's only called on page refresh which is not what I need ^^

[sylzys]

It's working now thanks @tabuna :)

[yetki]

OMG! I was wandering around feeling utterly hopeless, trying to figure out why my JavaScript wasn't working after encountering validation errors in React inputs. But then, a stroke of luck! I stumbled upon the solution: by embedding my JavaScript code into Turbo, everything started working smoothly. @tabuna , this definitely needs to be documented. Blessings on your work

[tabuna]

I'm pleased that this has been of assistance to you. Nonetheless, this particular aspect is outlined in the section https://orchid.software/en/docs/javascript/#turbo. Should you encounter any confusion or ambiguity, please don't hesitate to provide specific details so that we can enhance the experience collaboratively.