Chapters

57 Chapters | 6:19:46 |

01

Turbo: Drive, Frames & Streams!

5:03
02

Installing Turbo

3:41
03

How Turbo Drive Works

9:37
04

Turbo-Friendly JavaScript

6:56
05

The "defer" Attribute & Conditionally Activating Turbo

4:02
06

Form 422 Status & renderForm()

9:05
07

Form Submits & The Preview Feature

7:06
08

The Problem of Snapshots & JavaScript Popups

9:46
09

Cleanup Before Snapshotting (e.g. Modals)

6:03
10

Fixing the Sweetalert Modal

7:14
11

Organizing our Turbo Events Code

3:12
12

3rd Party JavaScript Widgets

7:52
13

Fixing External JS + Analytics Code

8:46
14

Reloading When JS/CSS Changes

6:52
15

Manual Visits with Turbo

5:04
16

CSS Page Transitions

7:24
17

Polished CSS Transitions

8:58
18

Prefetching the Next Page

5:19
19

<link rel="prefetch">

7:37
20

Turbo Frames: Lazy Frames

6:32
21

Turbo Frames Look for & Load the Matching Frame

4:24
22

Using a Full HTML Page to Populate a Frame

7:24
23

Reliably Load External JS with Stimulus

9:57
24

Targeting Links in or out of the Frame

5:00
25

Adding a "Read More" Ajax Frame

8:02
26

Frame Loading Animations

7:45
27

Review this Product... in a turbo-frame!

7:50
28

Globally Disable Buttons on Form Submit

5:50
29

Frame-Powered Inline Editing

6:45
30

Frames & Form "action" Attributes

7:45
31

Frame Redirecting & Dynamic Frame Targets

6:21
32

turbo-frame inside a Modal

7:06
33

Lazy Modal & Big Cleanup

4:59
34

Close the Modal after turbo-frame Success

6:17
35

Prevent a turbo-frame from Rendering

6:34
36

Full Page Redirect from a Frame

6:05
37

Redirecting the Full Page from a Frame

5:14
38

Frame Redirecting and Clearing the Snapshot Cache

6:51
39

Manual "Restore" Visit

8:11
40

Adding a Custom Request Header Based on the Frame

7:02
41

Smart Frame Redirecting with the Server

6:29
42

Automatically Redirect Ajax Calls to /login

5:14
43

Turbo Streams

8:01
44

Streams: Reusing Templates

4:37
45

Multiple Updates in one Stream

7:00
46

Processing Streams by Hand for Fun & Profit

5:18
47

Mercure: Pushing Stream Updates Async

4:43
48

Running the Mercure Service in the symfony Binary

4:28
49

Listening & Publishing

5:42
50

Mercure Hub's JWT Authorization

6:58
51

Publishing Mercure Updates in PHP

3:47
52

Turbo Stream for Instant Review Update

8:50
53

Smartly Updating Elements for all Users

7:06
54

Visually Highlighting new Items that Pop onto the Page

5:26
55

Entity Broadcast

7:02
56

Broadcasting Frontend Changes on Entity Update/Remove

7:28
57

Toast Notifications

10:14

> JavaScript Frameworks & Tools > Symfony UX: Turbo

Buy Access to Course

06.

Form 422 Status & renderForm()

|

Autoplay

Previous Challenge

Next Challenge

Login or register to check out the script

17 Comments

Sort By

Login or Register to join the conversation

Markchicobaby 1 year ago edited

hi i’m having trouble watching this video on Safari on iPad is this typical? it does work in chrome but not Safari. The error message says that the video format is not supported.

|

Victor SFCASTS Markchicobaby 1 year ago edited

Hey @Markchicobaby ,

We're sorry to hear you are having trouble watching this video! No, that's definitely not typical. Does it happen only in Safari? Does it work in other browsers, e.g. Google Chrome or Firefox? We stream our videos from Vimeo if you have problems with Vimeo in your region - it might be related. Otherwise, it might be a temporary Vimeo outage that should be resolved shortly.

Cheers!

|

Markchicobaby Victor 1 year ago

Hi yes it does work in Chrome. Used to work on both, seems to be a recent change.

|

Victor SFCASTS Markchicobaby 1 year ago edited

Hey @Markchicobaby,

Great, thanks for confirming it works for you now! Most probably, it's a temporary issue/outage update on Vimeo. If you ever have any problems - don't hesitate to contact us.

Cheers!

|

MichaelB 1 year ago

Hi all,
I have been trying to use the DynamicFormBuilder within a Turbo Frame. Form submission works , but when I want to dynamically show form fields, the new fields are not shown. I see the request being sent in the Web Inspector, but the dynamic fields do not show.
When i set the data-turbo: false option, then my frame works correctly.
Any idea on how to make the dynamic fields work inside turbo frames as well?

|

weaverryan SFCASTS MichaelB 1 year ago edited

Hey @MichaelB!

Sorry for the very slow reply! I can't think of why it wouldn't work, so questions:''

1) If you look in the HTML returned from the frame Ajax request, are the dynamic fields correct or not?

2) Any JS errors in the console?

Cheers!

|

Jeremy-B 2 years ago

Do we still need to do the manipulation to make the forms compatible with turbo in symfony 6.4? I have the impression that it works correctly even without changing anything...

|

Victor SFCASTS Jeremy-B 2 years ago

Hey Jeremy,

I didn't track that close, but if it works for you without any workarounds - that's great to hear!

Cheers!

|

ameotoko 2 years ago

Hey guys! Just a wild idea:

Wouldn't it be great to have a list of episodes in a sidebar as some kind of playlist, instead of having to scroll through that enormous list of <select> options? 😅

|

Victor SFCASTS ameotoko 2 years ago

Hey Andrey,

Thanks for this feedback! Actually, we're working on improving a video page UX with an updated design, I think it will be released soon. It will have an easier chapter/video navigation I think.

Cheers!

1 |

akincer 3 years ago

Suppose a use case where a successful and valid form submission doesn't redirect to a new location but sends the user back to the same form page but with new information and action for the user to take. As I'm reading this wouldn't trigger a rerendering of the HTML and testing proves that's true. Is there an elegant solution to this or would disabling turbo/hotwire on the form be the better approach?

|

akincer akincer 3 years ago edited

This is the solution I cooked up.

if ($form->isSubmitted() && $form->isValid() && "Conditions which you return to the form are not true") {
    $statusCode = 200;
}
else {
    $statusCode = 422;
}

return $this->renderForm('template', [
    'form' => $form,
], new Response(null, $statusCode));

|

Victor SFCASTS akincer 3 years ago

Hey Akincer,

I'm glad you were able to solve this yourself, well done!

Cheers!

|

Braunstetter 4 years ago

Hello Ryan. I start using turbo now first for the frontend in our company. I did the first turbo page now and I have the first problem :).
When I embed a controller with a (contact-)form (to be able to reuse it everywhere in a bunch of marketing sites) this redirect problem occors no matter what. A subrequest seems to be only allowed to send a 202, not a redirect or a 422. So without turbo I can use embed controllers with forms and with turbo not.
I guess this is a common usecase. When this is not possible you will never be able to create some sort of sitebuilding system for your sites - because almost every marketing site has also a form somewhere.

Is there a way to solve that? Do you have an idea?

|

weaverryan SFCASTS Braunstetter 4 years ago edited

Hey Michael B.!

Hmm, I don't do a lot of embedding of controllers... so it's very possible that there IS an issue here and I just haven't experienced it yet. But, I need a little help from you. So, I understand that in the template for a page, you embed a controller (render(controller()) correct?) that renders a contact form.

Question: (ignoring Turbo for a moment - just pretend you're on a non-Turbo site), where does that contact for submit to? Does it submit to a real route above some controller? Or does it submit right back to the same page... and then the sub-controller reads the POSTed data and, when it re-renders, it shows the errors? How did redirects work before?

The setup is a bit foreign to me (that doesn't mean it's wrong), so I need some more info :).

Cheers!

1 |

Braunstetter weaverryan 4 years ago

Hey Ryan. I solved it by using turbo frames. It works like a charm now and I can put it everywhere I want to :D.
I created a route for the contact form and a partial I can include in my sitebuilding. In the partial I have a <turbo-frame url="{{path('contact-form')}}"> tag. It loads, it works even with success message. Like a javascript form. But without any javascript. Its awesome.

|

weaverryan SFCASTS Braunstetter 4 years ago

Oh, sweet! That's sounds perfect! Thanks for sharing your success :)

1 |

Symfony 5.2 Turbo 1.2

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
        "doctrine/annotations": "^1.0", // 1.13.1
        "doctrine/doctrine-bundle": "^2.2", // 2.3.2
        "doctrine/orm": "^2.8", // 2.9.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^6.1", // v6.1.4
        "symfony/asset": "5.3.*", // v5.3.0-RC1
        "symfony/console": "5.3.*", // v5.3.0-RC1
        "symfony/dotenv": "5.3.*", // v5.3.0-RC1
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/form": "5.3.*", // v5.3.0-RC1
        "symfony/framework-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/property-access": "5.3.*", // v5.3.0-RC1
        "symfony/property-info": "5.3.*", // v5.3.0-RC1
        "symfony/proxy-manager-bridge": "5.3.*", // v5.3.0-RC1
        "symfony/runtime": "5.3.*", // v5.3.0-RC1
        "symfony/security-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/serializer": "5.3.*", // v5.3.0-RC1
        "symfony/twig-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/ux-chartjs": "^1.1", // v1.3.0
        "symfony/ux-turbo": "^1.3", // v1.3.0
        "symfony/ux-turbo-mercure": "^1.3", // v1.3.0
        "symfony/validator": "5.3.*", // v5.3.0-RC1
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.2
        "symfony/yaml": "5.3.*", // v5.3.0-RC1
        "twig/extra-bundle": "^2.12|^3.0", // v3.3.1
        "twig/intl-extra": "^3.2", // v3.3.0
        "twig/string-extra": "^3.3", // v3.3.1
        "twig/twig": "^2.12|^3.0" // v3.3.2
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.3.0-RC1
        "symfony/maker-bundle": "^1.27", // v1.31.1
        "symfony/monolog-bundle": "^3.0", // v3.7.0
        "symfony/stopwatch": "^5.2", // v5.3.0-RC1
        "symfony/var-dumper": "^5.2", // v5.3.0-RC1
        "symfony/web-profiler-bundle": "^5.2", // v5.3.0-RC1
        "zenstruck/foundry": "^1.10" // v1.10.0
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.13.13
        "@fortawesome/fontawesome-free": "^5.15.3", // 5.15.3
        "@hotwired/turbo": "^7.0.0-beta.5", // 1.2.6
        "@popperjs/core": "^2.9.1", // 2.9.2
        "@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
        "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/Resources/assets", // 0.1.0
        "@symfony/ux-turbo-mercure": "file:vendor/symfony/ux-turbo-mercure/Resources/assets", // 0.1.0
        "@symfony/webpack-encore": "^1.0.0", // 1.3.0
        "bootstrap": "^5.0.0-beta2", // 5.0.1
        "chart.js": "^2.9.4",
        "core-js": "^3.0.0", // 3.13.0
        "jquery": "^3.6.0", // 3.6.0
        "react": "^17.0.1", // 17.0.2
        "react-dom": "^17.0.1", // 17.0.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "stimulus": "^2.0.0", // 2.0.0
        "stimulus-autocomplete": "https://github.com/weaverryan/stimulus-autocomplete#toggle-event-always-dist", // 2.0.0
        "stimulus-use": "^0.24.0-1", // 0.24.0-2
        "sweetalert2": "^11.0.8", // 11.0.12
        "webpack-bundle-analyzer": "^4.4.0", // 4.4.2
        "webpack-notifier": "^1.6.0" // 1.13.0
    }
}

Previous Challenge

Next Challenge