586 search results for Turbo

Symfony UX Turbo

... JavaScript functionality to HTML elements - even if that HTML is loaded via AJAX. In this course, we'll talk about Turbo: a JavaScript library that instantly makes your site feel like an SPA. How? By turning every link and ...

57 videos
|
6:19:46
Turbo Frames

... different pieces. And when you clicked a link inside a frame, the navigation stayed inside that frame. It was like having separate web pages that you cobbled together into one. The second part of Turbo is Turbo Frames ...

8:43
Installing Turbo

... Wouldn't it be cool if when we click on a link or even submit a form, instead of that triggering a full page reload, it made an Ajax call... then updated the page with the new HTML? Well, that's exactly what Turbo Drive ...

3:41
The defer Attribute Conditionally Activating Turbo

... Turbo visit. But normally, adding script tags to the head is bad for performance. When your browser sees a script tag, it freezes the page rendering while it downloads the file and executes it. But by adding defer, the file ...

4:02
Turbo Frames Lazy Frames

Time to move on to part two of Turbo: Turbo frames. This is a brand new feature - it did not exist in the old Turbolinks library. To put it simply, Turbo frames allow you to treat part of your page, well, basically like ...

6:32
Turbo Stream Responses

For day 24, strap in for a quick adventure. We've learned that Turbo Streams are custom HTML elements that you can throw onto the page anywhere... and they execute! But there's another way to use Streams that's actually ...

4:24
Data Tables with Turbo Frames

Our data tables-like setup is working. And it's almost awesome. What I don't love is how it jumps around. Every time we click a link, it jumps back to the top of the page. Boo. That's because Turbo is reloading the full ...

7:03
Forever Scroll with Turbo Frames

... scroll to the bottom, I want to make an AJAX request to show the next nine results, and so on. The result is a "forever scroll". In the first tutorial in this series, we installed a library called Symfony UX Turbo, which ...

7:47
Manual Visits with Turbo

Sometimes you need to trigger a Turbo visit programmatically... like after running some custom JavaScript, you want to send the user to another page. Head over to your code and open assets/controllers ...

5:04
How Turbo Drive Works

This is Turbo Drive. And yes, it feels like absolute magic. So let's break down how this works. To start... we never wrote any JavaScript that said: Hey Turbo! Please activate your Drive functionality. So... how would ...

9:37
Turbo Streams Update any Element

... Today, we're diving headfirst into the finale of the Turbo trilogy: Turbo Streams. Streams allow us to solve problems that we... just don't have a solution for yet. Take, for instance, our homepage: we have this really ...

5:23
Turbo Drive

... thanks to a library called Turbo. Right now, our site, of course, has full page refreshes. Keep an eye on the logo in the address bar. When I click, everything is done with a full page refresh. That's fine. Never mind ...

5:42
Turbo Drive Frames Streams

... make our app feel like a single page application. What I mean is: how we can make our site lightning fast by never having any full page refreshes. That is what Turbo gives us. To be more precise, Turbo is actually three ...

5:03
Turbo Supercharge your App

... to commit everything first... in case the new package installs an interesting recipe: Ok, let's install the new package: composer require symfony/ux-turbo See that "ux" in the ...

6:46
Turbo Frames Look for Load the Matching Frame

On page load, Turbo did notice our new <turbo-frame> element and it did make an Ajax request to fetch the contents. But then, for some reason, it gave us this error. Why? This is a super important detail of Turbo frames ...

4:24
Turbo Your Single Page App

... use another library from the same people that made Stimulus called Turbo. Turbo can do a lot of things, but its main job is to eliminate full-page refreshes. Like Stimulus, it's a JavaScript library. And also like Stimulus ...

4:32
Organizing our Turbo Events Code

To get Turbo Drive to work super nicely, we're going to need to hook into a few events, like turbo:before-cache. Before we're done, we'll listen into even more of these to help us properly load JavaScript widgets, add ...

3:12
Turbo Streams

The third and final part of Turbo is Turbo Streams. These are fun! Turbo Streams are a way to return instructions on updating any element on the page. And there are two main use cases. First: you're submitting a form ...

8:01
Close the Modal after turbo-frame Success

... .. it's interesting and... subtle. Dig a little to find the frame. Ok, the src starts set to /admin/product/new, which means that when we open the modal, we see the contents of the turbo-frame from that page. Fill in some ...

6:17
turbo-frame inside a Modal

... submit the form and close the modal on success. We're revisiting this example because, by leveraging Turbo frames, I think we can simplify this... like, a lot. And you can probably guess how: we can use a turbo frame to load ...

7:06