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

11.

State in your Controller

|

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

5 Comments

Sort By

Login or Register to join the conversation

EssKy 1 year ago

Hi SfC

When I colsole.log(event), in selectColor method, the object has event.target object populated however the event.currentTarget is null?

Why is this?

Thanks.

|

Victor SFCASTS EssKy 1 year ago

Hey Simon,

The reason why event.currentTarget is null might happen due to how you are referencing the selectColor() method.

If the method is being invoked manually or out of the expected context, the currentTarget could be null because event.currentTarget refers to the DOM element that the event handler is attached to.

I hope this helps!

Cheers!

|

Dave V. 4 years ago

I found at least in chrome that setting the value of selectTarget to null doesn't reset the selector to show its placeholder, but empty string '' as you had done does.

|

carnaqe Dave V. 1 year ago

I am on Chrome on Mac and it worked. At least nowadays.

1 |

MolloKhan SFCASTS Dave V. 4 years ago

Ha! That's interesting, thanks for the tip :)

|

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 Challenge

Next Chapter