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

05.

Magic with Events, Properties & HTML from Ajax

|

Autoplay

Previous Challenge

Next Chapter

Login or register to check out the script

15 Comments

Sort By

Login or Register to join the conversation

Ryan-L 2 years ago

JQuery event listeners actually can be attached to new elements, so long as you approach it from the perspective of a containing element.
For example, instead of $('.class').on('click', function() {});
You do this: $('#container').on('click', '.class', function() {});
http://api.jquery.com/on/

For example, if each row in a table came with a specific cell that was rendered as a link, which you could click to edit, you could do something like:
$('#nameOfTable').on('click', '.editLinkClass', function() { code to launch editing nonsense ));

Even if new rows came in, a page refresh isn't necessary; the function still triggers because it's technically listening to the table, and only firing off when the clicked element has the class in question. Well, either way, I'm sure Stimulus will be much, much easier to work with.

|

MolloKhan SFCASTS Ryan-L 2 years ago edited

Hey @Ryan-L

Yea, you're right about jQuery, if you attach the event to a parent element, the event will be attached automatically to new elements, but that's something you don't need to know or care anymore with Stimulus :)

Cheers!

|

pasquale_pellicani 3 years ago

Hi, the fact that with each click it increases me by 2 instead of 1 is due to some structure of the html.twig file, right ? Thanks

|

pasquale_pellicani pasquale_pellicani 3 years ago

[SOLVED] I found, it is the layout too full of other js files that caused me the double event, I restarted from a very poor layout and stilus is working again.

|

Victor SFCASTS pasquale_pellicani 3 years ago edited

Hey @pasquale_pellicani ,

Glad to hear you were able to find the solution. Thanks for sharing the actual problem

Cheers!

|

pasquale_pellicani Victor 3 years ago

I think it's a matter of import and positions of the generated assets, for example now I miss the jQuery but if I include it manually (without the webpack) it goes back to firing the clicks two at a time...

|

Victor SFCASTS pasquale_pellicani 3 years ago

Hm, it sounds like you include something twice... or probably you have 2 Stimulus controllers created? Better to import it correctly, or even better to stop using jQuery :)

Cheers!

|

pasquale_pellicani Victor 3 years ago edited

Hi @Victor thanks for the suggestion but now that i have only one controller it keeps loading me the connect() event twice ... why ? I loaded the app.js file into the main view :(

I solved with / stimulusFetch: 'lazy' / in controller code...

import { Controller } from '@hotwired/stimulus';

/* stimulusFetch: 'lazy' */
export default class extends Controller {....

|

Victor SFCASTS pasquale_pellicani 3 years ago edited

Hey @pasquale_pellicani ,

That stimulusFetch: 'lazy' is a good idea, all my Stimulus controllers have that. But even without that the connect should not be called more than once, unless you assigned that controller to more than 1 element.

Cheers!

|

pasquale_pellicani Victor 3 years ago

...strange because I assigned it only to a one unique div present in the view index. I don't know what could be the cause.

|

pasquale_pellicani pasquale_pellicani 3 years ago edited

in console I've this output:

application #starting
conteggia #initialize //conteggia is my stimulus controller
conteggia #connect
application #start
conteggia #disconnect
conteggia #connect

...... any problem in my code ?

|

Eddie 3 years ago

Hello, I have a question. What is the right way to manipulate a global variable? Let's say I have two "click me" elements and 1 counter variable. I want If I click on element 1 or element 2, both elements counters to increment by 1. In this scenario, where should I put the global variable?

|

MolloKhan SFCASTS Eddie 3 years ago edited

Hey Eddie

As a recommendation, try to avoid using global variables, they just add complexity to your code and there are alternatives. If you're doing it using Stimulus, it comes to my mind that you can emit an event whenever an element is clicked, so you can listen to that event and increase the counter. Does it makes sense to you?
Btw, if you don't know how to work with events in Stimulus controllers, this chapter will be of great help https://symfonycasts.com/sc...

Cheers!

|

Alberto rafael P. 5 years ago

hey guys, we are waiting the tutos....

|

Victor SFCASTS Alberto rafael P. 5 years ago

Hey Alberto,

Thank you for your interest in this tutorial! The video is already published, pleasant viewing ;)

P.S. More will come soon, usually we're trying to release at least one video a day, but sometimes things go busy, thank you for your patience!

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 Challenge

Next Chapter