Chapters

32 Chapters | 4:16:27 |

01

Hello LAST Stack!

4:01
02

Asset Mapper

5:18
03

JavaScript Modules

6:33
04

3rd Party JavaScript Packages

5:05
05

CSS

6:22
06

Tailwind CSS

9:24
07

Stimulus

6:45
08

Symfony UX Packages

6:47
09

Turbo Drive

5:42
10

Turbo Frames

8:43
11

Popover!

11:44
12

Auto-Submitting Forms

3:37
13

Pagination & Column Sorting

8:04
14

Data Tables with Turbo Frames

7:03
15

View Transitions

7:04
16

Toast Notifications

3:46
17

Fancier Toasts: Auto-close & Fading

7:34
18

Turbo Streams: Update any Element

5:23
19

HTML dialog for Modals

13:18
20

AJAX Modal!

8:29
21

Fantastic Modal UX with a Loading State

8:04
22

Fancy things on Modal Form Success

8:30
23

More with fun Modals! Editing & Deleting

10:05
24

Turbo Stream Responses

4:24
25

Twig Components

10:52
26

Modal Twig Component

11:54
27

Live Components

11:47
28

Real-Time Validation & Dependent Form Fields

11:37
29

Testing Part 1: Twig & Live Components

5:32
30

Testing Part 2: Functional Testing

12:36
31

Performance

9:16
32

Bonus: More on Flowbite

11:08

> Symfony > 30 Days with LAST Stack

Buy Access to Course

21.

Fantastic Modal UX with a Loading State

|

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

15 Comments

Sort By

Login or Register to join the conversation

sylvaindeloux 1 year ago edited

Hi,

Thanks for the tutorial! :)
I believe there’s an issue with the recent update regarding async CSRF. Since I’m using the StimulusBundle Flex recipe, I’m encountering problems with the new csrf_protection_controller.js. Now, every form inside a Turbo modal stops working (even though it works fine with a regular request outside the modal).

The issue might stem from the document.addEventListener('submit', function (event) { … }) found in the controller. This event never gets triggered when using the modal, as described in the tutorial. I suspect it could be something related to the modal Stimulus controller of the tuto, but I can’t figure out what exactly.

1 |

sadikoff sylvaindeloux 1 year ago edited

hey @sylvaindeloux

yeah, that's pretty weird, but I'd recommend disabling stateless csrf the code here is not configured to use it, so it causes issues, and the problem is not in this controller, but in new csrf.yaml where stateless csrf is configured. To solve issue just disable it.

Cheers!

|

mariusfaber sadikoff 1 year ago

Looks like this can be fixed by removing / stimulusFetch: 'lazy' / from the csrf_protection_controller.js
https://github.com/symfony/symfony/issues/59571#issuecomment-2610555055

1 |

sadikoff mariusfaber 1 year ago

Thanks for the tip

1 |

Hugo-Le-Goff 1 year ago

Hello !

I'm having a really weird issue and I found nothing about it in the Symfony UX or the Turbo documentation, GitHub repos or internet at all.

I have CSRF protection enabled on my website and when sumitting the form in the turbo frame I have a form validation error "Invalid CSRF Token" and this log "CSRF validation failed: double-submit info was used in a previous request but is now missing.''

The form is working perfectly on the dedicated page, but inside a frame this happen. Also the form in the frame works again for a short period when deleting the PHPSESSID cookie.

Is there something to know about turbo frame and submitting form with CSRF protection ? Or should I write an issue in symfony UX or turbo in GitHub ?

1 |

Victor SFCASTS Hugo-Le-Goff 1 year ago

Hey Hugo,

As a workaround, you can just turn off the CSRF protection for some forms that are handled in turbo frames. Yeah, CSRF may indeed cause some issues in some cases, especially when we're talking about async requests.

But actually, even with Turbo frames it should work well I think, though probably you have a more complex setup? Maybe the problem in Turbo drive cache. You should try to find steps to reproduce. When you will have them, and when you will be 100% sure that following those steps you will get the issue with CSRF protection - analyze the steps to see the problem, I bet it will be more obvious to see the problem and a possible fixes when you take a look at the steps to reproduce.

I hope that helps!

Cheers!

|

Fedale 2 years ago

Hi, I'm confusing about "loadingContent" and "loadingTemplate".
For example, I read: "Over in the modal controller, add a new target called loadingContent:" but in the code the target is "loadingTemplate".
Also in other parts of tutorial there are these little mistakes... or am I missing something?

|

MolloKhan SFCASTS Fedale 2 years ago edited

Hey @Fedale

Thanks for reporting it. Indeed this is a little mistake. I'll look for a way to make it right

Cheers!

1 |

webstack 2 years ago

Hi Ryan,

Cool stuff, really! I do however have a question, I have implemented the ajax modal and use the openModal way so we have the out-of-the-box escape close handler. I also have the stimulus action to listen to the native close event so we can close everything.

But.... (there's always one), how do you handle the following:

Let's say the user clicks a link, modal with turbo frame opens but the loading time is longer then expected. During this process the user presses the Escape key, the modal closes BUT (there it is) the fetch call is still running, when it's finished it still replaces the turbo-frame and through the MutationObserver the modal gets re-opened.

I tried watching if the turbo-frame has a aria-busy when the close method is being called, but it always is undefined. So my guess these two events are triggered passed each other.

The ultimate solution would be to maybe abort the turbo fetch request all together, or have a way to block the modal from opening again.

Maybe I missed something in the other tutorials and there is a solutions somewhere.

Keep up the nice work!

|

webstack webstack 2 years ago

Sometimes you spend a good amount of time typing a message and find a solution a few minutes after it, I stumbled upon this tutorial, which has the answer for now:

https://symfonycasts.com/screencast/turbo/prevent-frame-rendering

Putting the code below in the controller now prevents the frame rendering from taking place if the modal isn't open (anymore).

If there is more to it, maybe you can let us now.

connect() {
    this.element.addEventListener('turbo:before-fetch-response', (event) => {
        if (!this.dialogTarget.open) {
            event.preventDefault();
        }
    })
}

1 |

MolloKhan SFCASTS webstack 2 years ago edited

Ha! Yea, sometimes you just need to put your problem into words. Thank you for sharing your solution, and by the way, you can use our search form at the top of the page to look for course-related topics (choose the "In this course" option)

Cheers!

|

webstack MolloKhan 2 years ago

Ah Thanks! Have a good one.

|

Hauke 2 years ago

This might just be my favourite episode so far. So many things coming together!

|

weaverryan SFCASTS Hauke 2 years ago

Woo! It might be mine too :)

|

Victor SFCASTS Hauke 2 years ago

Hey Hauke,

Thank you for your feedback! We're super happy you liked it :)

Cheers!

|

Symfony 6.4 Tailwind CSS 3 Flowbite 2 Stimulus 3 Turbo 7

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "4.x-dev", // 4.x-dev
        "doctrine/doctrine-bundle": "^2.10", // 2.12.x-dev
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.4.x-dev
        "doctrine/orm": "^2.16", // 2.18.x-dev
        "knplabs/knp-time-bundle": "dev-main", // dev-main
        "pagerfanta/doctrine-orm-adapter": "4.x-dev", // 4.x-dev
        "pagerfanta/twig": "4.x-dev", // 4.x-dev
        "symfony/asset": "6.4.*", // 6.4.x-dev
        "symfony/asset-mapper": "6.4.*", // 6.4.x-dev
        "symfony/console": "6.4.x-dev", // 6.4.x-dev
        "symfony/dotenv": "6.4.x-dev", // 6.4.x-dev
        "symfony/flex": "^2", // 2.x-dev
        "symfony/form": "6.4.x-dev", // 6.4.x-dev
        "symfony/framework-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/monolog-bundle": "^3.0", // dev-master
        "symfony/runtime": "6.4.x-dev", // 6.4.x-dev
        "symfony/security-csrf": "6.4.x-dev", // 6.4.x-dev
        "symfony/stimulus-bundle": "2.x-dev", // 2.x-dev
        "symfony/twig-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/ux-autocomplete": "2.x-dev", // 2.x-dev
        "symfony/ux-live-component": "2.x-dev", // 2.x-dev
        "symfony/ux-turbo": "2.x-dev", // 2.x-dev
        "symfony/ux-twig-component": "2.x-dev", // 2.x-dev
        "symfony/validator": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-link": "6.4.*", // 6.4.x-dev
        "symfony/yaml": "6.4.x-dev", // 6.4.x-dev
        "symfonycasts/dynamic-forms": "dev-main", // dev-main
        "symfonycasts/tailwind-bundle": "dev-main", // dev-main
        "tales-from-a-dev/flowbite-bundle": "dev-main", // dev-main
        "twig/extra-bundle": "^2.12|^3.0", // 3.x-dev
        "twig/twig": "^2.12|^3.0" // 3.x-dev
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.6.x-dev
        "phpunit/phpunit": "^9.5", // 9.6.x-dev
        "symfony/browser-kit": "6.4.*", // 6.4.x-dev
        "symfony/css-selector": "6.4.*", // 6.4.x-dev
        "symfony/debug-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/maker-bundle": "^1.51", // dev-main
        "symfony/panther": "^2.1", // v2.1.1
        "symfony/phpunit-bridge": "7.1.x-dev", // 7.1.x-dev
        "symfony/stopwatch": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-profiler-bundle": "6.4.x-dev", // 6.4.x-dev
        "zenstruck/browser": "1.x-dev", // 1.x-dev
        "zenstruck/foundry": "^1.36" // 1.x-dev
    }
}

What JavaScript libraries does this tutorial use?

// importmap.php

return [
  'app' => [
    'path' => './assets/app.js',
    'entrypoint' => true,
  ],
  'js-confetti' => [
    'version' => '0.11.0',
  ],
  '@hotwired/stimulus' => [
    'version' => '3.2.2',
  ],
  '@symfony/stimulus-bundle' => [
    'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
  ],
  'tom-select' => [
    'version' => '2.3.1',
  ],
  'tom-select/dist/css/tom-select.default.css' => [
    'version' => '2.3.1',
    'type' => 'css',
  ],
  '@hotwired/turbo' => [
    'version' => '7.3.0',
  ],
  'stimulus-popover' => [
    'version' => '6.2.0',
  ],
  'debounce' => [
    'version' => '1.2.1',
  ],
  'turbo-view-transitions' => [
    'version' => '0.3.0',
  ],
  'stimulus-use' => [
    'version' => '0.52.1',
  ],
  'flowbite' => [
    'version' => '2.2.1',
  ],
  '@popperjs/core' => [
    'version' => '2.11.8',
  ],
  'flowbite-datepicker' => [
    'version' => '1.2.6',
  ],
];

Previous Chapter

Next Chapter