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
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 ...
...
```
...
"@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 ...
Hmm, that is a mystery! If you have `@hotwired/stimulus` in your `package.json`, then this error:
> Module build failed: Module not found:
"../../vendor/symfony/ux-turbo/assets/dist/turbo_controller.js" contains a ...
I get that turbo is used to make the page more SPA like, but how is that different from a full page refresh? There's no pre-loading, sure it keeps the console state etc, but it still takes time to load the page from the ...
... does something on window.load event. And since this event is not fired on turbo visits the widget is not initialised properly.
This is an excellent theory. Unfortunately, it's still quite common for external ...
586
Turbo
Filter Results