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

20.

AJAX Modal!

|

|

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

13 Comments

Sort By

Login or Register to join the conversation

Bart-V 10 months ago

I did everything from this tutorial video. The turbo-frame gets the HTML from the view.
But the modal_controller doesnt trigger to open the dialog.

I have 2 errors in the browser console:

Uncaught SyntaxError: The requested module 'http://127.0.0.1:8000/assets/vendor/@symfony/stimulus-bridge/stimulus-bridge.index-Pxc8eCp.js' doesn't provide an export named: 'startStimulusApp'

Uncaught Error: Cannot find module 'turbo-view-transitions'

I work with the Encore build stuff, and I get the error with the 'npm run build' in the console

99% done plugins FriendlyErrorsWebpackPlugin ERROR  Failed to compile with 1 errors   

Module build failed: Module not found:
"./assets/app.js" contains a reference to the file "turbo-view-transitions".
This file can not be found, please check it for typos or update it if the file got moved.

I cant find anything about missing file 'turbo-view-transitions' on stackoverflow, so is here anyone that can help me?

|

MolloKhan SFCASTS Bart-V 10 months ago edited

Hey @Bart-V

I just answered your other message, but I just realized that you're using Webpack Encore, not AssetMapper, right? In general, you need to install the package turbo-view-transitions and rebuild your assets

Cheers!

|

Bart-V MolloKhan 10 months ago

Hey,

I did run this is the console 'php bin/console importmap:require turbo-view-transitions'.
I removed the old node_module folder and reinstall through 'npm install'.
But still it gives the same error.

I cannt find anything on how to install it with webpack Encore. And i am new in the Symfony and Encore world.

|

MolloKhan SFCASTS Bart-V 10 months ago

I see your problem, you're using both asset managers (Webpack and AssetMapper). This tutorial is focused on using AssetMapper, so if you want to follow along but use Webpack, you need to install and configure Webpack Encore in your project.
We have a specific tutorial about it here https://symfonycasts.com/screencast/webpack-encore

Cheers!

|

Skylar 2 years ago

Hello,

I am having a bit of a problem getting the content to load in the turbo-frame in the dialog. I followed the video, and when I click new voyage, the turbo-frame says completed, but there is nothing inside. I made sure to surround the new.html.twig with <turbo-frame id=modal>, but I don't know what else to do. Can you help me trouble shoot this?

Thank you.

|

MolloKhan SFCASTS Skylar 2 years ago edited

Can you check if there are any errors in the web console toolbar? Also, inspect your modal after clicking the button and check if the HTML is inside it. Something odd it's going on

Cheers!

|

Skylar MolloKhan 2 years ago

This is what the element looks like after the button is clicked <turbo-frame id="modal" data-modal-target="dynamicContent" src="https://127.0.0.1:8000/planet/new" complete> </turbo-frame>

|

MolloKhan SFCASTS Skylar 2 years ago

Ok, so there's your issue. When you click on the "new" button it should fetch the content of the new voyage form and put it inside the modal element. Double-check your templates, something funny is going on in there

Cheers!

|

Skylar MolloKhan 2 years ago

Thank you for responding!

I checked the toolbar and the console and could not find an error. I also checked the modal turbo-frame and there was no html inside it.

|

Brandon 2 years ago

Ryan,

I have several modal pages, and I just ran into a spot where a button that lives in a modal would need to go to another modal, which is fine for my UI experience, but what is the best way to return someone back to the previous modal they came from?

|

weaverryan SFCASTS Brandon 2 years ago

Hey @Brandon!

That is something I thought about tackling in this tutorial, but eventually didn't, because it's potentially a pretty complex problem. In short, I'm not sure! It only makes senes to have a single <dialog> open via showModal() on the page at once. So you're not really opening another modal... but really you're replacing the dialog's content with other content.

In theory, the solution might be relatively simple. If your modal content opens inside a <turbo-frame id="modal">, then any link clicks or even redirects to another page would cause that content's page to also be shown in the modal (assuming that page, of course, extends the modalBase.html.twig so that the page returns inside of a modal frame). The tricky part is that, when you do this, your previous dialog content is lost: it was replaced. That might be ok in some cases, but I feel like this workflow is normally done because you're on FormA inside the modal, then want to go to FormB real quick to create something... so you can come back and continue filling out FormB. I just don't have a generic solution in mind for that yet. I'm sure it's possible, but I'd have to sit and hack on it for awhile.

So, I don't have a great answer for you yet on this one. If anything comes to your mind, I'd love to know.

Cheers!

|

ik3rib 2 years ago

at this point I have a problem with modal controller not connecting to dynamiContent target. I got this error:
Modal with id dynamicContent does not exist. Are you sure that the data-modal-target attribute points to the correct dynamicContent id?.

The problem is that flowbite has some js witch uses data-modal-target and conflicts (https://github.com/themesberg/flowbite/blob/6f331833e39f696142eda720b622ce24b7594751/src/components/modal/index.ts#L271)

I changed the controller name from modal_controller to leihoa_controller and changed related stuff and now works ok.

|

weaverryan SFCASTS ik3rib 2 years ago

Hey @ik3rib!

Sorry for the slow reply - holidays! Yea, if you're using the Flowbite JS, there is an unfortunate naming collision. I'm adding a bonus chapter - https://symfonycasts.com/screencast/last-stack/flowbite - to talk about Flowbite, this part included. The tl;dr is:

A) I don't use the Flowbite js, but you can
B) If you do, yea, probably the best fix is to NOT have a Stimulus controller named modal or popover - i.e. rename it like you proposed.

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