Smartly Updating Elements for all Users
... Argentinian friend suddenly saw a
success message!
That's... ya know... not what we want. But I can already see the problem: in
the turbo stream, we're sending the entire _reviews.html.twig template to
all users... which ...
Smart Frame Redirecting with the Server
When an Ajax request happens via a <turbo-frame> and that frame has our
data-turbo-form-redirect attribute, we're now communicating that to Symfony
by sending a new header on the request called Turbo-Frame-Redirect ...
Frame Redirecting and Clearing the Snapshot Cache
Where else could we use our new turbo frame redirect system? Go to the cart.
On the featured product sidebar, we could leverage a frame around the cart controls.
Right now, this form submits to the whole page. And so ...
Mercure Pushing Stream Updates Async
Turbo streams would be much more interesting if we could subscribe to
something that could send us stream updates in real time.
Like, imagine we're viewing a page... and generally minding our own business. At
the same ...
link rel="prefetch
... "> element to the
head tag of the page.
What does that do? Great question! To explain, let's back up a little. So far, this
whole prefetch script has been pure Turbo magic: it makes an Ajax call
and stores it into Turbo's ...
Streams Reusing Templates
When we submit the product review form, instead of redirecting like we were
before, we're now returning this TurboStreamResponse. When the Ajax call finishes,
Turbo notices that we're returning this type of response ...
Multiple Updates in one Stream
... add a second
<turbo-stream>. Yup, we can include as many instructions as we want in a
stream. Set the action="" to replace and the target to product-review, the
id of the element that surrounds the reviews area. Inside ...
Lazy Modal Big Cleanup
Our modal is now powered by a turbo-frame: the form was Ajax loaded by the
frame system. But when we submit, wah, wah. It submits to the whole page.
Let's see what's going on. Reopen the modal and inspect it. Hmm. Ah ...
Form Submits The Preview Feature
One of the cooler features of Turbo Drive is its snapshot feature, which we know
about already. When we visit a page that we've already been to, like Office
Supplies or Furniture, it instantly shows the snapshot while ...
Broadcasting Frontend Changes on Entity Update/Remove
In Review.stream.html.twig, we have the ability to publish turbo streams
automatically whenever a review is created, updated or removed. That's pretty cool.
Unrelated to this, I haven't mentioned it yet, but our site ...
Full Page Redirect from a Frame
Our Turbo-frame-powered modal is now almost perfect. When we submit successfully,
it closes the modal. But... dang! That's all it did. The product list did not
update... so it's not super obvious that this worked!
Look ...
The Problem of Snapshots JavaScript Popups
... when using Turbo. But don't worry, it's already fixed and will
be available in 5.0.2.
Anyways, now that I have this modal open with my backdrop, click the back button
in your browser and then revisit the admin page. Woh ...
Cleanup Before Snapshotting e.g Modals
... waits for the transition
to finish before finally removing all of the elements, like its backdrop.
But the snapshot does not wait: Turbo takes the snapshot immediately, which is
when the modal has only started to be removed ...
Fixing External JS Analytics Code
Head back to the Turbo docs, specifically to Reference and then Events. We saw this
list of events earlier. Now we're going to hook into a new one:
turbo:before-render.
Here it is. This event triggers before Turbo ...
Form 422 Status renderForm
We already know that Turbo Drive also works for form submits. To prove it, head
to the login page and log in as shopper@example.com password buy... using
these handy cheating links that are powered by a Stimulus ...
Symfony UX Stimulus
... some other frontend framework
Laziness: loading controllers lazily
By the end, you'll be able to build anything on your site with Stimulus. And once you have, you'll be ready to give your app a SPA (single page app) feel with Turbo!
Popover
... this markup on page load, I want to load it via Ajax only
once the user hovers. The popover library does have a way to do
this. But as an extra, extra challenge, I want to do it with regular ol' Turbo
frames. Because ...
Frames Form action Attributes
... Something isn't right. We can click this "edit" link to inline-load the product
form into the Turbo Frame. But when we save, something weird happens.
Watch the console closely down here. Whoa! It was fast, but it looked ...
Prefetching the Next Page
I have a crazy idea. What if, when the user hovers over a link, we prefetch
that page via Ajax and saved it to the snapshot cache? Then, assuming the user does
click that link, Turbo would show the page instantly via ...
Product CRUD
... I've mentioned a few times that Stimulus has a sister technology called Turbo...
both of which live under this brand called "Hotwire", which, as we've learned,
is all about returning HTML from your server.
We're going ...
584
Turbo
Filter Results