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.

[grinkevich]

Sigh, in 2025 it doesn't work anymore :)
"Page load" event is firing in the console, but jQuery is still not loaded and can't be executed!

02:29:29.943 Turbo: Page load! [edit:467:21](http://wesbite.local/portal/page/2/edit)
02:29:29.943 Uncaught ReferenceError: $ is not defined

The blade template:

@component($typeForm, get_defined_vars())
    <input type="range" class="frequency form-range" {{ $attributes }}>
    <div class="frequency-print">
        <span class="text">{{ __('Current selection:') }}</span>&nbsp
        <span class="value"></span>
    </div>
    <script>
        document.addEventListener("turbo:load", () => {
            console.log('Turbo: Page load!');
            $('#{{$attributes['id']}}').on('change', function (el) {
                console.log(el);
            });
        });
    </script>
@endcomponent

The idea here is simple - default Range component on steroids: when the range slider value changes, it should show the current value in the element below.

P.S.
Additionally, in the console, after the website loads, using jQuery commands works fine. But not in blade template...

P.P.S.
jQuery included via CDN in the header (and it can be found in the page source after load):

   'resource' => [
        'stylesheets' => [],
        'scripts' => [
            'https://code.jquery.com/jquery-3.7.1.min.js',
        ],
    ],

Tried to include as a local file, as part of "vite" config and etc, no luck as well.

--

The only solution that worked so far!
Go to your main app.blade.php file and either add your jQuery (or else) script manually there without the defer option. Or just remove defer from line #45. Then add your script into "resources->scripts" in "platform.php" config file as per the code example above!

File: resources/views/vendor/platform/app.blade.php
(copied from original vendor/orchid/platform/resources/views/app.blade.php source)
Changed lines #44-46:

     @foreach(Dashboard::getResource('scripts') as $scripts)
        <script src="{{  $scripts }}" type="text/javascript" data-turbo-track="reload"></script>
    @endforeach

e.g. just removed defer wording from <script> tag.

P.S.
However, you need to consider removing defer wisely and do it at your own risk! It may slow down page loading and have more side effects, which will affect your application 🤷