Fancy things on Modal Form Success
... did close.
The reason it closed is important. In the new() action, we redirect to the
index page. That page extends the normal base.html.twig... so it does have a
<turbo-frame id="modal"> on it... but it's this empty one ...
Frame Redirecting Dynamic Frame Targets
It was subtle, but we just saw one important property of Turbo frames. When
we submitted this form successfully, it submitted to the edit action inside of
ProductAdminController. This code handled the form submit and ...
Frame-Powered Inline Editing
... ..
so that we can cleanly give this a few classes. For the text, say "Edit".
Nothing magic yet. When we refresh, there's our link... a fantastically boring edit
link. Thanks to Turbo Drive, clicking it feels pretty good ...
Symfony UX Stimulus Packages
... by adding Turbo. At your terminal, say:
composer require symfony/ux-turbo
Here's the juiciest part: just like when we added Stimulus, there's
absolutely nothing else you need to do ...
CSS Page Transitions
What about CSS transitions between pages as we click around? This is something that
a competing library called Swup does very well. But in Turbo, it's not so easy. Well,
it will be easier once a PR is merged into Turbo ...
Redirecting the Full Page from a Frame
... plan: if a turbo-frame - like the turbo-frame in _modal.html.twig -
has a data-turbo-form-redirect="true" attribute - which I totally just invented -
then we will redirect the whole page if we detect a redirect in that ...
Globally Disable Buttons on Form Submit
... submits. The best part? We can make
this happen for every form on our site by leveraging an event that Turbo dispatches.
In your editor, open up assets/turbo/turbo-helper.js. Anywhere in the constructor,
listen to a new ...
Reloading When JS/CSS Changes
How does Turbo handle when a JavaScript or CSS file that's downloaded onto our page
changes? When we navigate, it's smart enough to merge any new CSS or JS into our
head element without duplicating anything that's ...
Manual Restore Visit
... scroll up. Ah, here's the problem. When we submitted
the add to cart form into the frame, our controller redirected and the turbo frame
followed that redirect. This request is the POST to /cart... and this is the
Ajax ...
View Transitions
... biggie.
Oh, and, View Transitions will come Standard in Turbo 8 for full page navigation.
Though, we'll take them even a bit further.
To use View Transitions, you do not need any external library. But we're going
to use ...
Targeting Links in or out of the Frame
Head to the cart page and click the feature product to go to its page. Whoa. It
disappeared! And... we're still on the cart page. Head to the console. Ah, that's
a familiar error!
Response has no matching <turbo-frame ...
Processing Streams by Hand for Fun Profit
... As we've learned, each time Turbo makes an Ajax call, it listens to see if the
response has a content type of text/vnd.turbo-stream.html. If it does, then
the HTML is passed to the Turbo Stream system... and it works ...
Adding a Read More Ajax Frame
... ... nothing happens!
But down on the web debug toolbar, you can see that an Ajax call failed!
So... we all know that - despite our awesomeness - errors happen. When you
work with turbo frames, these errors are harder to see ...
More with fun Modals Editing Deleting
... with modal:m-0 and modal:p-0:
Next, make the edit link target the modal frame. This lives in _row.html.twig.
I'll break this onto multiple lines.... then add data-turbo-frame="modal":
Moment of truth. Refresh. And ...
AJAX Modal
... now a div that contains a dialog... that's closed.
Now for the magic touch: remove the guts of the dialog: only keep these two
divs: they help give us padding and nice scroll behavior. Inside, add a
<turbo-frame> with id ...
Frame Loading Animations
With Turbo Drive, when we click a link or submit a form, and that takes longer
than 500 milliseconds to load, we get a loading animation on the top of the
page... which we don't see here because this is all loading fast ...
Polished CSS Transitions
... over in turbo-helper.js, both turbo:before-render
and turbo:render happen when both a real page renders and when a preview renders.
That means that, when a preview is shown, it gets the same transition effect as a
real ...
Reliably Load External JS with Stimulus
Thanks to the turbo-frame system, we're now lazily-loading just part of the
weather page down in the footer. And... notice that this is working... which
actually proves something: script tags inside frames are executed ...
Using a Full HTML Page to Populate a Frame
I want to show one more lazy frame example. But before we do, I'm going to find my
terminal and, yes, once again, run:
yarn upgrade @hotwired/turbo
This time I get beta version 8 ...
Automatically Redirect Ajax Calls to login
... 3000 and come back to my computer tomorrow. During that time,
my session has timed out. What would happen if I tried to submit this form - which
submits into a turbo-frame - without refreshing first?
Well... let's try ...
584
Turbo
Filter Results