Chapters

46 Chapters | 4:55:39 |

01

Symfony UX

5:34
02

Setting up Webpack Encore

5:11
03

encore watch & Code Splitting

4:06
04

Stimulus Controllers

5:53
05

Magic with Events, Properties & HTML from Ajax

4:43
06

Targets: Finding Elements

6:41
07

Actions: Listening to Events

4:43
08

Bootstrapping a "Color Selector" Form Element

9:06
09

Actions & currentTarget

6:41
10

Element.dataset

4:52
11

State in your Controller

6:26
12

The Values API

7:03
13

On Value Change Callback

8:07
14

Search Suggestions

5:49
15

Ajax with fetch(), Polyfills & async/await

5:24
16

HTML-Returning Ajax Endpoint

6:06
17

Stimulus Behaviors: stimulus-use

6:37
18

Form Submit Confirmation Controller

6:22
19

Making a Configurable, Reusable Controller

7:47
20

Multi Controller Communication

9:09
21

Listening to An Event From Another Controller

6:25
22

Ajax-Powered HTML Updates & a CSS Transition

5:13
23

Symfony UX & Chart.js

7:48
24

stimulus-bridge: How UX Packages Work

6:55
25

Extending a UX Controller

8:43
26

React (or Vue) ❤️ Stimulus

6:48
27

Pass Server Data Directly to React Props

7:02
28

Webpack Bundle Analyzer

4:58
29

Async/Dynamic import()

7:26
30

Magic: Lazy-Loading UX Controllers

5:13
31

Making your Custom Controllers Lazy

3:58
32

Product CRUD

7:42
33

Opening a Modal

8:14
34

Loading a Form into the Modal

8:46
35

Ajax-Submitting an Entire Form

6:25
36

Correcting the Form Action & Preventing Default

4:30
37

Ajax Form Response Status Codes

9:36
38

Ajax Element Reloading Controller

6:23
39

Dispatching an Event from modal-form

4:25
40

Reusing the "Reload Content" Controller

5:12
41

CSS Transitions with useTransition

7:05
42

CSS Transition Classes

5:03
43

Free 3rd Party Controllers!

4:31
44

Using the autocomplete-controller

9:45
45

Autocomplete with Transitions

6:08
46

useTransition in a Neat, Reusable Module

5:00

> JavaScript Frameworks & Tools > Symfony UX: Stimulus

Buy Access to Course

34.

Loading a Form into the 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

George-B 2 years ago

Thank you for this excellent screencast. A very minor suggestion: to remove the Save button in _modal.html.twig, replace .modal-body button with .modal-footer button.btn-primary.

1 |

MolloKhan SFCASTS George-B 2 years ago edited

Hey @George-B

Oh I didn't now that. Thanks for sharing it!

|

pasquale_pellicani 2 years ago

Hi, it would be nice to add third party javascript in the form, because in my case they stop working when I call it via ajax.
Thanks

|

weaverryan SFCASTS pasquale_pellicani 2 years ago

For others - conversation continued over here - https://symfonycasts.com/screencast/stimulus/form-ajax#comment-30502

|

discipolat 3 years ago edited

Hi, I'm having a trouble in symfony 6.2.6. Form errors does not show on submit. From an Ajax (with modal) or directly form the normal call.
From a post form Stack overflow a got the code below, but looking for a "native" solution.

$form = $this->createForm(SomeSortOfType::class, $entity, [
    'attr' => [
        // set this if you want to force server-side validation
        'novalidate' => 'novalidate',
    ],
]);

$form->handleRequest($request);

if ($form->isSubmitted()) {
    if ($form->isValid()) {
        $entity = $form->getData();

        // do stuff with the submitted data

        $this->addFlash('success', 'You did it!');
    } else {
        $errors = [];

        foreach ($form->getErrors(true) as $error) {
            $path = $error->getCause()->getPropertyPath();

            if (empty($path)) {
                break;
            }

            $path = \preg_replace('/^(data.)|(.data)|(\\])|(\\[)|children/', '', $path);
            $message = $error->getCause()->getMessage();
            $errors[$path] = $message;
        }

        foreach ($errors as $path => $message) {
            $form->get($path)->addError(new FormError($message));
        }

        $this->addFlash('error', 'You failed!');
    }
}

$response = $this->renderStructure(
    $structure,
    [
        'form' => $form->createView(),
    ],
    $preview,
    $partial,
);

return $response;

|

Victor SFCASTS discipolat 3 years ago

Hey Discipolat,

Yes, nice discover! That's probably something you have to do when you work with JSON responses, i.e. fetch the form errors, return them in your JSON response to the JS endpoint which will then parse them and attach to specific fields in your form... that might lead to complex and big JS code. The easiest solution with Stimulus would be to render the whole HTML form on your server-side, and then return the HTML response (not JSON response) to your JS endpoint (i.e. Stimulus endpoint) and just replace the whole HTML form with the new form HTML code where you have form errors already highlighted. I.e. you basically replace your HTML form code with the new one from the server with highlighted error fields. And that's exactly what makes Stimulus so cool - it will automatically work on your page even after you replaced the part of your old HTML code with the new one.

Another official and out-of-the-box solution would be to use Live Components from Symfony UX, in specific you're looking for Auto-Validating Form. You can learn more on this page: https://ux.symfony.com/live-component/demos/auto-validating-form - it has a nice demo showing how it works... and also useful links to the actual Symfony docs about this that makes it work.

I hope this helps!

Cheers!

1 |

discipolat Victor 3 years ago edited

Got it ! Thank's @Victor .

|

lexhartman 3 years ago

I have a bootstrap-datetime picker in my form. When i load the form via the "new" page the picker works, but when the form is loaded via the modal (with stimulus) the picker doesn't work. Am i doing something wrong or did i forget something? I now what the reason is: i init the picker via jquery whith document.ready. But the picker get's loaded after it. Maybe there is a best-practice with stimulus (i think there is, but not that i'm aware of).

|

Victor SFCASTS lexhartman 3 years ago

Hey Lex,

Hm, looks like that's how that datetime picker works, I suppose it's somehow initialized when the DOM is ready, i.e. when the page is fully loaded by browser, but then you create a modal with AJAX request but that code never initialized because the initialization already happened before.

So, I think you have 2 possible options - either look for a different datetime picker (probably one that even does not need that jQuery - thanks to Stimulus and Webpack Encore we can finally completely get rid of it, but it's up to you of course :) ). Or you can try to read their (this datetime picker) docs and try to find how to initialize the datetime picker on request, and do this after you showed that modal. I think their docs should cover something like this.

I hope this helps!

Cheers!

|

Annemieke-B Victor 3 years ago

Hi SymfonyCasts,

I have the same problems with date picker and with ckeditor.
Is it best practise (and available) to use a datepicker and html wysiwyg of other libraries (stimulus use)?

Thank you for your help !!

|

Victor SFCASTS Annemieke-B 3 years ago edited

Hey @Annemieke-B ,

Well, ideally find a library that works well with Stimulus. Also, it might depend on your specific implementation. For example, instead of trying to activate Bootstrap datetime picker once on the page load - do it manually in the Stimulus controller, right after it brings a new code to the HTML page. IIRC Bootstrap should have some programmatic activating on request - this way you will be sure that when you're trying to activate it all the necessary HTML code is already on the page. The same for CKEditor, try to activate it after Stimulus did all the necessary changes to the HTML to make sure the needed elements are present on the page already.

I hope this helps!

Cheers!

|

lexhartman Victor 3 years ago

Thanks to your reply i found out that my picker doesn't need jquery (after reading the docs; that's why i should read them). Pff... sorry for that but thanks again!

|

Victor SFCASTS lexhartman 3 years ago

Hey Lex,

Haha, that is awesome! :) No problem, I'm glad to hear the docs helped ;)

Cheers!

|

This tutorial works perfectly with Stimulus 3!

Symfony 5.2 Stimulus 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.11.1
        "doctrine/doctrine-bundle": "^2.2", // 2.2.3
        "doctrine/doctrine-migrations-bundle": "^3.0", // 3.0.2
        "doctrine/orm": "^2.8", // 2.8.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^5.6", // v5.6.1
        "symfony/asset": "5.2.*", // v5.2.3
        "symfony/console": "5.2.*", // v5.2.3
        "symfony/dotenv": "5.2.*", // v5.2.3
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/form": "5.2.*", // v5.2.3
        "symfony/framework-bundle": "5.2.*", // v5.2.3
        "symfony/property-access": "5.2.*", // v5.2.3
        "symfony/property-info": "5.2.*", // v5.2.3
        "symfony/proxy-manager-bridge": "5.2.*", // v5.2.3
        "symfony/security-bundle": "5.2.*", // v5.2.3
        "symfony/serializer": "5.2.*", // v5.2.3
        "symfony/twig-bundle": "5.2.*", // v5.2.3
        "symfony/ux-chartjs": "^1.1", // v1.2.0
        "symfony/validator": "5.2.*", // v5.2.3
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.1
        "symfony/yaml": "5.2.*", // v5.2.3
        "twig/extra-bundle": "^2.12|^3.0", // v3.2.1
        "twig/intl-extra": "^3.2", // v3.2.1
        "twig/twig": "^2.12|^3.0" // v3.2.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.2.3
        "symfony/maker-bundle": "^1.27", // v1.30.0
        "symfony/monolog-bundle": "^3.0", // v3.6.0
        "symfony/stopwatch": "^5.2", // v5.2.3
        "symfony/var-dumper": "^5.2", // v5.2.3
        "symfony/web-profiler-bundle": "^5.2" // v5.2.3
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.12.13
        "@popperjs/core": "^2.9.1", // 2.9.1
        "@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
        "@symfony/webpack-encore": "^1.0.0", // 1.0.4
        "bootstrap": "^5.0.0-beta2", // 5.0.0-beta2
        "core-js": "^3.0.0", // 3.8.3
        "jquery": "^3.6.0", // 3.6.0
        "react": "^17.0.1", // 17.0.1
        "react-dom": "^17.0.1", // 17.0.1
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "stimulus": "^2.0.0", // 2.0.0
        "stimulus-autocomplete": "^2.0.1-phylor-6095f2a9", // 2.0.1-phylor-6095f2a9
        "stimulus-use": "^0.24.0-1", // 0.24.0-1
        "sweetalert2": "^10.13.0", // 10.14.0
        "webpack-bundle-analyzer": "^4.4.0", // 4.4.0
        "webpack-notifier": "^1.6.0" // 1.13.0
    }
}

Previous Chapter

Next Chapter