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

19.

HTML dialog for Modals

|

|

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 Challenge

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

32 Comments

Sort By

Login or Register to join the conversation

Coding010 2 years ago

As an alternative of hardcoding (Tailwind) classes into the Stimulus controller, you can also use Stimulus CSS Classes.
They use a logical name approach, but can be a bit tricky to understand and write.

For example:

<div
  class="..."
  data-controller="modal"
  data-modal-open-class="overflow-hidden"
>

Or alternatively use the Twig helper:

<div
  class="..."
  {{ stimulus_controller('modal', {}, { 'open': 'overflow-hidden' }) }}
>

And add to modal_controller.js:

  static classes = ["open"];

And use the class:

  open() {
    this.dialogTarget.showModal();
    document.body.classList.add(this.openClass);
  }
  
  close() {
    if (this.hasDialogTarget) {
      this.dialogTarget.close();
      document.body.classList.remove(this.openClass);
    }
  }

I admit this might not the best use-case to leverage this, because you probably want the overflow-hidden behaviour everytime you're using the modal_controller.

But still wanted to share the solution. Especially when using multiple classes this can help out.

1 |

MolloKhan SFCASTS Coding010 2 years ago

Cool! I was not aware of that feature. Thank you for sharing it!

|

ToG 2 years ago

If anyone has issues getting the modal to close by adding data-turbo-temporary, check you came to the page via a Turbo navigation. If you've landed on the page without a Turbo transition then going back & forward again won't remove the dialog.

This took me a while to work out. I hope I save someone the same.

1 |

ToG ToG 2 years ago

I think that this might have happened because I initially navigated to the page before I commented out the if (shouldPerformTransition()) Turbo.cache.exemptPageFromCache(); in app.js.

|

weaverryan SFCASTS ToG 2 years ago

Yo @ToG!

That might make sense. When I read your first comment, I wasn't sure I understood: the element should be removed not matter how you got to the pae. So this explanation, indeed, makes more sense to me :).

Cheers!

|

barbieswimcrew 2 years ago

Regarding the "blur on backdrop" topic... got that working with CSS:

::backdrop {
    backdrop-filter: blur(3px);
    background: rgba(23, 27, 33, .7);
}

Check out the navigation menu: https://www.bikesport-schindler.de/

1 |

Victor SFCASTS barbieswimcrew 2 years ago edited

Hey @barbieswimcrew ,

That's cool! Thanks for sharing it with others :)

Cheers!

|

Bart-V 10 months ago

I use Encore to build the project. And I added the line in app.js.

import { shouldPerformTransition, performTransition } from 'turbo-view-transitions';

After running 'npm run build' in the console, I get the following error:

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.

does anyone use Encore? And can someone help me with the problem?

|

MolloKhan SFCASTS Bart-V 10 months ago edited

Hey @Bart-V

It is telling you the package turbo-view-transitions was not found (for some reason). Can you double-check that it's installed?
You can install it by running php bin/console importmap:require turbo-view-transitions

Cheers!

|

BigBenJr 11 months ago

Great tutorial, thanks !

Related to the Turbo Page Cache issue discuss at the end of the video, data-action="turbo:before-cache@window->modal#close" was not working for me. After reading the documentation (https://turbo.hotwired.dev/reference/events#document) I replaced window by document and it's working, so data-action="turbo:before-cache@document->modal#close". I don't know if it's due to a recent update or something else, just wanted to give the information.

I have an other issue however. When I am on the page containing the button and the modal, then I go to another page, then I decide to go back to the previous page using the back button of my browser, nothing happen when I click on the button to open the modal. I must refresh the page to be able to open the modal via the button. In other words, navigate to the page containing the modal via the back navigation deactivate somehow the button. Does anyone know how to solve this ?

|

MolloKhan SFCASTS BigBenJr 11 months ago edited

Hey @BigBenJr

Thank you for the observation. I'm not sure why "window" is not working for you - I've used it before and it works

About the modal, when you go back, does the open attribute remains on the dialog element? I'm guessing the close() method is missing something to make this work on all scenarios

Cheers!

|

BigBenJr MolloKhan 11 months ago edited

Thanks for your reply @MolloKhan !

I just realized that because I added data-turbo-temporary to the dialog element, when I navigate to the page containing the modal via the back navigation, because the page I see is from the cache, the dialog element is not anymore on the page. If I don't add data-turbo-temporary to the dialog I don't have this bug anymore. Anyway, as I use turbo:before-cache@document->modal#close I don't need data-turbo-temporary anymore.

EDIT: I just realized as well that the 2 problems were related. Since I removed data-turbo-temporary now I may use window instead of document.

|

MolloKhan SFCASTS BigBenJr 11 months ago

Ha! I love it when a single change fixes the whole thing. Cheers!

|

Nick-F 1 year ago

I'm having inconsistencies in the fadein animation "'fade-in': 'fadeIn .5s ease-out;'," between local and production.
I'm hosting a containerized symfony app on Azure.
The problem is the animation duration. It works fine on my local environment, and the fade in animation is correctly defined on the dialogue element as "fadeIn 0.5s ease-out" in the chrome dev tools.
But when the container is pushed to production, I still see the animate-fade-in class on the dialogue but the definition changed to just "fadeIn ease-out", with the duration missing and so no animation actually occurs.

|

Victor SFCASTS Nick-F 1 year ago

Hey Nick,

Hm, probably something is missing. It's impossible to know for sure, so I may just give you some tips on where to look.

Make sure it's not a cache problem on production, try to open the website in a different browser, in incognito mode, and try hard reloading in your browser. If you're not using hashes for your CSS files, browsers can cache assets that lead to this behavior. But still, even if you're using hashes for assets, try to use hard reload, incognito mode, and a different browser. Such services like Azure may have some layers of caching for assets, probably it's a good idea to make sure that cache is not the reason, I bet there should be some mechanisms to refresh it.

Also, probably the Symfony prod mode causes this problem, try to clear all the cache and run your project locally in Symfony prod mode. Do you still have that 0.5s animation? Probably you include some extra CSS files only in prod Symfony mode and that overrides the default behaviour that you have in dev mode.

And finally, double-check that nothing in your CSS files can override the default behavior, probably you have the same declaration in a few files that overrides each other, the files' load order may sometimes be different on a different OS causing a weird behavior, like on some it works and on some it does not.

I would also suggest you to double-check your build process locally and on production, probably you have different versions of some tools that are installed, and that version difference may cause different behavior.

I hope that helps!

Cheers!

|

DenisSValdenaire 2 years ago

Hi Ryan,

I'm using the dialog on page that contains a form, and it turns out that when the modal closes, it submit the form. I had to add an event.preventDefault() in the close method.

It seems the <form method="dialog"> conflicts with the main on. I removed it and tied the close button to a close() method in the controller. I'll follow the next course and see what happen when posting the form in the modal... but i fear this will mix up badly.

|

Victor SFCASTS DenisSValdenaire 2 years ago

Hey Denis,

Are you trying to follow this course on your personal project? We do recommend you download the course code and follow this course from the start/ directory to have the exact code the course author has in the videos. Yes, you can follow it on a personal project, or a fresher (latest) Symfony version but it may cause more work from your side. In your case, I suppose you need to improve the business logic that's responsible for sending the form, probably using a more specific CSS selector to send the form that is only in the dialog in case it's trying to send every form on the page, etc.

I hope this helps!

Cheers!

|

Nexo 2 years ago

Feeling a bit ashamed for asking, since I haven't paid yet for any course. In future, while hopefully beeing wealthier, I will.
For the form to work within a dialog, the method needs to be set as 'dialog'
Normally I'm using twig helpers for creating forms. But that doesn't seem to work in this case, am I write?
Doing so, according to the docs and as expected, when using something different than 'get' and 'post' as method, 'post' is used and the specified method gets put in a hidden form field like this:

<input type="hidden" name="_method" value="DIALOG">

Do I just have to write the starting of the form by hand in that case?

|

Victor SFCASTS Nexo 2 years ago

Hey Nexo,

If you have a Symfony form type where you want to add a hidden field - I would recommend you to add that field right in the form type, see the HiddenType for that specific case: https://symfony.com/doc/current/reference/forms/types/hidden.html

Then you will be able to render your form with Twig helper, e.g. {{ form(form) }}.

But in case you want/need to put that field manually in the form - then you can render your form with {{ form_start(form) }} and {{ form_end(form) }} methods, between which you will place your custom input. But putting extra fields into your form manually may lead to an error in Symfony forms, so better to do it in the form type and put manually only buttons - those are safe to be added to the form.

Cheers!

|

Nexo Victor 2 years ago

Hi Victor,

Thank you for the answer. I might have been not clear enough. I was talking about when setting the form type in the controller other than get/put, this hidden field will be generated by Symony. In my case it was 'dialog', because that's what I thought is necessary for using forms in <dialog>. I couldnt make the modal dialog getting automatically closed while using a form created in a controller. So I thought, I need to write the form start by hand, instead of using {{form_star(form) }}, for having 'dialog' as form method instead of a hidden field.

While using method 'dialog' would clearly close the dialog, the form didnt got submitted. Back using 'put' as form method, the form got submitted, but the dialog kept beeing open. Eventually I found my problem.
I messed up the empty <turbo-frame id="modal"> while extending twig templates.

Greetings!

|

Victor SFCASTS Nexo 2 years ago

Hey Nexo,

Oh, I see now... Glad you were able to find the problem youself, sometimes it's very simple problem but difficult to be spotted, and you need to double-check everything. Thanks for sharing the evential solution with others btw! It definitely might be useful or someone

Cheers!

|

Kirill 2 years ago

What if we would need to fire this dialog by clicking on different elements on the page, e.g. by buttons in header and footer so we couldn't surround and put it into same button container/controller?
Should we avoid then using Stimulus, or make some application controller with global, custom events firing or what would be the pattern?
Thank you!

|

weaverryan SFCASTS Kirill 2 years ago

Hi @Kirill!

Three possibilities on this:

A) If you load what's in the modal via Ajax, you can use our AJAX-loading system that we build in the next few days to load from anywhere.
B) In many cases, if you have multiple button that open the same modal (and it is not an Ajax modal), then it's often simple enough to embed that modal in all 3 places. I don't see a huge problem with that, though I'm sure you will have some cases where you have a big modal and really want to avoid this.
C) You can always create some small system to do what you're saying. I have created a modal-open-controller.js before that I put in the <button> that should open a modal. I pass in a value called id to the controller. The controller then finds a the modal on the page with that id and opens it (it opens it by firing and event on the modal - e.g. modal:open - which I list for from my modal-controller.js... though even easier might just be to put the id on the <dialog> itself, then call document.getElementById(this.idValue).showModal().

The point is: we have a few options and they're all pretty great and are fairly simple.

Cheers!

2 |

Kirill weaverryan 2 years ago

Hi! Thank you!

|

kbond SFCASTS 2 years ago

In model_controller:clickOutside() I expected you to call this.close() instead of this.dialogTarget.close(). I understand that calling dialogTarget.close() triggers model_controller.close() but could this.close() have been used instead and had the same result?

|

weaverryan SFCASTS kbond 2 years ago

Yo @kbond!

Yup, definitely. The way we've written things (which I really like), we can call this.close() directly... or this.dialogTarget.close() (which will then trigger our this.close()). Probably this.close() would be even a bit simpler, I admit :).

Cheers!

1 |

Adn-B weaverryan 2 years ago edited

I searched for this question in the comments, I had the same reasoning ! Thanks @kbond !

I have mixed feelings about that. In close() method, we called the dialog element close() method.
But, with the same syntax we call the close() method of our controller. Did I understand good ?

|

weaverryan SFCASTS Adn-B 2 years ago

Hey @Adn-B!

I have mixed feelings about that. In close() method, we called the dialog element close() method.
But, with the same syntax we call the close() method of our controller. Did I understand good ?

Let me see if I understand what you're asking. Let's look at the 2 situations of what we could do inside of clickOutside():

Case 1: We call this.dialogTarget.close(). In this case, the <dialog> will, of course, close. That will trigger the browser to dispatch the close event on the <dialog>. Because of our data-action on the <dialog>, that will call the close() method on our controller. This time, because the <dialog> is already closed, it will not close again. But we CAN run our cleanup code.
Case 2: We call this.close(). This case should have the same result, but it's a bit simpler: our close() method closes the dialog and cleans things up. Closing the dialog should also trigger the close method from the browser... and that should cause close() to be called again. But because the dialog is already closed, we can't close it again. I think our "cleanup clode" in close() may be called twice, but it's not a big deal.

Let me know if that helps... or if I just answered the completely wrong question ;).

Cheers!

|

ToG 2 years ago

I'm seeing an error with the adding of the turbo:before-cache@window->modal#close action.

This is what I see in the console…

Error invoking action "turbo:before-cache@window->modal#close"

 Error: Missing target element "dialog" for "modal" controller
    get https://last-stack.wip/assets/vendor/@hotwired/stimulus/stimulus.index-1403742bdb6a75e7674b4906ff85c9d1.js:7
    close https://last-stack.wip/assets/controllers/modal_controller-5d8c0ebe6b6d56804ed921da35a9f3d9.js:13
    invokeWithEvent https://last-stack.wip/assets/vendor/@hotwired/stimulus/stimulus.index-1403742bdb6a75e7674b4906ff85c9d1.js:7
    handleEvent https://last-stack.wip/assets/vendor/@hotwired/stimulus/stimulus.index-1403742bdb6a75e7674b4906ff85c9d1.js:7
    handleEvent https://last-stack.wip/assets/vendor/@hotwired/stimulus/stimulus.index-1403742bdb6a75e7674b4906ff85c9d1.js:7
    w https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:7
    notifyApplicationBeforeCachingSnapshot https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    viewWillCacheSnapshot https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    cacheSnapshot https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    cacheSnapshot https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    loadCachedSnapshot https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    render https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    loadCachedSnapshot https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    visitStarted https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    start https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    startVisit https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    historyPoppedToLocationWithRestorationIdentifier https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    onPopState https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    start https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    start https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    Ce https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:21
    <anonymous> https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:30

Anyone else had this & worked out why?

|

ToG ToG 2 years ago HIGHLIGHTED

OK. So I've updated the close() method as follows as it appears that Firefox Developer Edition may remove the dialog before calling the close() handler…

    close() {
        if(this.hasDialogTarget) {
            this.dialogTarget.close();
        }
        document.body.classList.remove('overflow-hidden', 'blur-sm');
    }

I wonder if this is something to do with the View Transitions support in FF?

3 |

julien_bonnier ToG 2 years ago edited

Same problem here, thanks @ToG

1 |

weaverryan SFCASTS julien_bonnier 2 years ago edited

@julien_bonnier was it also on FF for you? If so, normal version of dev edition?

I'll add a note about this either way - just curious to learn more.

Thanks!

|

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 Challenge

Next Chapter