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

16.

HTML-Returning Ajax Endpoint

|

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

15 Comments

Sort By

Login or Register to join the conversation

Cyril 4 years ago

Hi
When my twig template uses a twitter bootstrap behaviour like "tooltip" or "popover", this behaviour is lost after an Ajax loading with "this.resultTarget.innerHTML = await response.text();"
Did you ever experiment this issue? Is there a way to fix it?
Thanks
Cyril

1 |

MolloKhan SFCASTS Cyril 4 years ago edited

Hey Cyril S.

You can attach the bootstrap tooltip function to a parent element which is always present in your page, or, you can start using Stimulus in your site. If you want to learn more about using Stimulus you can watch our tutorial about Symfony UX https://symfonycasts.com/sc...

Cheers!

1 |

Cyril MolloKhan 4 years ago

I’m still using stimulus and axios to load and refresh this part of html. That’s why I’m surprised by this issue as stimulus is supposed to manage this sort of Ajax refresh habitual problem...

2 |

MolloKhan SFCASTS Cyril 4 years ago edited

Ohh, you're using Stimulus, that's great! The problem relies on how you're loading bootstrap tooltip now. You can create a Stimulus controller an attach it to all elements that uses the tooltip


// tooltip_controller.js
import $ from 'jquery';
import 'bootstrap/js/dist/tooltip';

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    connect() {
        $(this.element).tooltip();
    }
}

Cheers!

|

Cyril MolloKhan 4 years ago edited

Yes, it works!
As I'm using stimulus 2, bootstrap 5 and vanilla JS, I finally did:
`
//bs-tooltip_controller.js
import { Controller } from "stimulus";
import { Tooltip } from "bootstrap";

/ stimulusFetch: 'lazy' /
export default class extends Controller {
connect() {

  new Tooltip(this.element);

}
}
`
and in my template, to attach the elements, I used data-controller="bs-tooltip" instead of the bootstrap-classic data-bs-toggle="tooltip"

Thanks a lot Diego!
Cyril

1 |

MolloKhan SFCASTS Cyril 4 years ago

Nice job man! You managed to figure out the missing parts. Cheers!

|

Steven J. 5 years ago

I didn't know we can use else without an if in twig 😮

1 |

Victor SFCASTS Steven J. 5 years ago

Hey Steven,

Yeah, this is a little-known feature from Twig :)
https://twig.symfony.com/do...

Cheers!

1 |

jgwiazdowski Steven J. 5 years ago

oh my, me too,
so far best thing I've learned, thanks! : D

|

Vladyslav-Chernyshov 2 years ago

Axios example:

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

export default class extends Controller {
    axios = require('axios').default;

    static targets = ['result']

    static values = {
        url: String,
    }

    async onSearchInput(event) {
        const params = new URLSearchParams({
            q: event.currentTarget.value,
            preview: 1
        });

        const response = await this.axios.get(this.urlValue, {
            params: params
        });

        this.resultTarget.innerHTML = await response.data;
    }
}

|

Victor SFCASTS Vladyslav-Chernyshov 2 years ago

Hey Vladyslav,

Thanks for sharing an Axios example with others :)

Cheers!

|

SamuelVicent 4 years ago

Hi,
We are trying to load html content with data-src image paths using lazy loading via native browser after an ajax call. But when we set the response data to this.resultTarget.innerHTML, the images are not loaded (do load if do not use lazy load). Do you know any hack for this issue? thanks a lot!

|

sadikoff SamuelVicent 4 years ago edited

Hello SamuelVicent

As a tip do not use innerHTML for complex code, try to use insertAdjacentHTML or some library that will insert it and trigger correct DOM changes so every listener will be executed

Cheers!

|

SamuelVicent sadikoff 4 years ago

Hi,
First of all, thank your for answering :)

We also tryied insertAdjacentHTML and no luck: this.contentTarget.insertAdjacentHTML('beforeend', response.data.data.content);

The idea is using stimulus and force re-render contents from an ajax request without doing it manually or using additional libraries, having in mind that lazy load is a built-in feature in chrome and other browsers.

Just asking if you know any kind of setup for this to work automatically. Thanks a lot!

|

sadikoff SamuelVicent 4 years ago

hm interesting question, I can think only about Turbo tech from Stimulus devs probably it's the best use-case for it, however I'm not fully sure about it.

|

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