586 search results for Turbo

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 ...

7:06
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 ...

6:29
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 ...

6:51
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 ...

4:43
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 ...

7:37
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 ...

4:37
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 ...

7:00
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 ...

4:59
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 ...

7:06
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 ...

7:28
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 ...

6:05
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 ...

9:46
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 ...

6:03
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 ...

8:46
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 ...

9:05
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!

46 videos
|
4:55:39
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 ...

11:44
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 ...

7:45
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 ...

5:19
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 ...

7:42