Testing Part 2 Functional Testing
... which Turbo does when it's loading. Then it waits for it to go
away:
Try the test now:
Then... pop open the screenshot. Woh! It is now waiting for the Ajax call to
finish. But remember: we're also using view ...
Hey |mention:56475| ,
It depends on your needs, the project, and your knowledge. We do recommend Stimulus/Turbo as it's a straightforward tool with a nice Symfony integration. This is just ideal if you have a server ...
... My page then contains two Turbo Frames, which I also want to mention, the second column on my page contains the frame where a form is added to the page, but it doesn't listen to it until a page refresh. When you change the form in the second column, it updates the first column with the another Turbo Frame.
... & Turbo. So even if I created a TwigComponent (because maybe I want something to be reusable, or provide its own variables), if I need some interactivity (like submitting a form via Ajax), I might just use Turbo & Stimulus for ...
Ryan,
I saw this when I was looking for something else so I updated to Turbo 8 and used the action="refresh".
You stated:
A) User makes an AJAX request to "refresh" whatever page they're on
B) The new HTML is ...
... Turbo changes clicks/submits to Ajax calls... but those requests STILL return the same full HTML page, how is that "faster"?
The answer (or at least the biggest reason, from my research) is that your JavaScript & CSS do ...
Hey somecallmetim!
Yea, sorry about the big delay - we've been busy with a bunch of frontend stuff (Stimulus, Turbo), which I know a lot of people LOVE... but also a lot of people want this stuff too ...
|
<div |
|
data-controller="modal" |
|
data-action="turbo:before-cache@window->modal#close" |
|
> |
|
<dialog |
|
class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80" |
|
data-modal-target="dialog" |
|
data-action="close->modal#close click->modal#clickOutside" |
|
> |
|
<div class="flex grow p-5"> |
|
<div class="grow overflow-auto p-1"> |
|
<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> |
|
</div> |
|
</div> |
|
</dialog> |
|
|
|
<template data-modal-target="loadingTemplate"> |
|
<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> |
|
</template> |
|
</div> |
See Code Block in Script
|
<!DOCTYPE html> |
|
<html> |
|
|
// ... lines 3 - 15
|
|
<body class="bg-black text-white font-mono"> |
|
|
// ... lines 17 - 51
|
|
<div |
|
data-controller="modal" |
|
data-action="turbo:before-cache@window->modal#close" |
|
> |
|
<dialog |
|
class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80" |
|
data-modal-target="dialog" |
|
data-action="close->modal#close click->modal#clickOutside" |
|
> |
|
<div class="flex grow p-5"> |
|
<div class="grow overflow-auto p-1"> |
|
<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> |
|
</div> |
|
</div> |
|
</dialog> |
|
|
|
<template data-modal-target="loadingTemplate"> |
|
<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> |
|
</template> |
|
</div> |
|
|
// ... lines 91 - 94
|
|
</body> |
|
</html> |
See Code Block in Script
...
```
...
"@hotwired/stimulus": "^3.0.0",
...
"@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
"@symfony/webpack-encore": "^4.0.0",
...
"stimulus-autocomplete": "^3.0.2",
"stimulus-use": "^0.50.0-2 ...
... message is published. Whereas on the listening part I always get a 401 Unauthorized as soon as the EventSource wants to connect.
I have checked the stimulus controller within the ux-turbo package but I found only this ...
... had published a recent video course regarding the concept of asset manager which seemed be the last frontier by putting stimulus and turbo on the bench, am I remembering correctly? My memory recalls the confetti script ...
... ignored. To perform a full page visit instead, set turbo-visit-control to reload.*"
Maybe it is my mistake but the problem disappear if I change ID name in `home.page.html.twig`
... ``.
And in my stimulus controller I do `this.element.querySelector('#myIdLinkToLoadTurboFrame').click();`
Work fine with Firefox, but doesn't work at all with Chrome and Safari.
Is it possible to trigger the same action of clicking the data-turbo-frame link but from an stimulus controller ?
Cheers!
... for? https://symfonycasts.com/blog/redirect-turbo-frame
Basically:
In `save()` of your `LiveAction` , instead of redirecting (which you are maybe or maybe not doing), allow the template to re-render, but with a ...
Hey @CDesign!
Sorry for my VERY slow reply! I would check a few things:
A) Is Turbo running otherwise - like do you see no page reloads during normal navigation? My guess is yes, but we need to check.
B) Watch ...
... a "Backend" and a "Frontend" part, each with its own asset system, we have to put a data-turbo-track attribute for the page to completely reload.
So, if we emit a flash message from the backend for it to display on ...
... think the hotwired system could be a valid substitute?
Hmm. I want to say yes - but I'm not familiar with this "smart admin" theme system. But, generally-speaking, that does sound a lot like what Turbo offers: changing ...
Hey Adn,
Hm, maybe you add it yourself :p Anyway, if you want to reload content in the specific frame - I believe you need something like this:
```
My Link
```
I.e. `data-turbo-action="replace"` should do the ...
This looks sick. I've worked with stimulus and turbo for a while, implemented one feature using live components in my SaaS but haven't dug very deep because it's kind of hard to know where live components are superior ...
590
Turbo
Filter Results