Chapters

32 Chapters | 4:16:27 |

01

¡Hola ÚLTIMA PILA!

4:01
02

Mapeador de activos

5:18
03

Módulos JavaScript

6:33
04

paquetes JavaScript de terceros

5:05
05

CSS

6:22
06

Tailwind CSS

9:24
07

Stimulus (estímulo)

6:45
08

Paquetes Symfony UX

6:47
09

Turbo Drive

5:42
10

Marcos Turbo

8:43
11

¡Popover!

11:44
12

Formularios de envío automático

3:37
13

Paginación y ordenación por columnas

8:04
14

Tablas de datos con Turbo Frames

7:03
15

Ver Transiciones

7:04
16

Notificaciones Toast

3:46
17

Tostadas más elegantes: Auto-cierre y Desvanecimiento

7:34
18

Turbo Streams: Actualiza cualquier elemento

5:23
19

Diálogo HTML para Módulos

13:18
20

¡Modal AJAX!

8:29
21

Fantástica UX modal con un estado de carga

8:04
22

Cosas extravagantes en el Éxito del Formulario Modal

8:30
23

¡Más con Modales divertidos! Editar y borrar

10:05
24

Respuestas Turbo Streams

4:24
25

Componentes Twig

10:52
26

Componente Twig modal

11:54
27

Componentes en vivo

11:47
28

Validación en tiempo real y campos de formulario dependientes

11:37
29

Pruebas, Parte 1: Twig y Componentes Vivos

5:32
30

Pruebas Parte 2: Pruebas funcionales

12:36
31

Rendimiento

9:16
32

Bonus: Más sobre Flowbite

11:08

> Symfony 6 > 30 días con LAST Stack

Buy Access to Course

20.

¡Modal AJAX!

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!

Ayer construimos un sistema modal asesino gracias al elemento dialog. Con sólo este marcado y un pequeño controlador Stimulus, me siento peligroso.

Así que déjame hablarte del objetivo de hoy, ¡que es grande y audaz! Cuando hago clic en "Nuevo viaje", quiero que el "nuevo formulario modal" se cargue mediante AJAX y aparezca en el modal. ¡Pero más que eso! Cuando envíe el formulario, los errores de validación deben permanecer en el modal, éste debe cerrarse cuando tenga éxito y debemos ver notificaciones de tostadas. Y, quizá lo más importante, quiero que todo este sistema sea reutilizable para que podamos cargar rápidamente cualquier formulario de nuestro sitio en un modal. Vamos a hacerlo, o moriremos en el intento. Espero que lo hagamos... Creo que lo haremos.

Para ponerlo en marcha, copia todo el marcado modal. Ya está. Luego entra enbase.html.twig y, hasta el final, antes de la etiqueta de cierre body, pega:

            
Copy Code

Show All Lines

                        104 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
Show Lines

                                                    // ... lines 3 - 15
                            
                <body class="bg-black text-white font-mono">
        
                    <div class="container mx-auto min-h-screen flex flex-col">
        
Show Lines

                                                    // ... lines 18 - 70
                            
                        <dialog
        
                            class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
        
                            data-modal-target="dialog"
        
                            data-action="close->modal#close click->modal#clickOutside"
        
                        >
        
                            <div class="flex grow p-5">
        
                                <div class="grow overflow-auto p-1">
        
                                    <div class="text-white space-y-4">
        
                                        <div class="flex justify-between items-center">
        
                                            <h2 class="text-xl font-bold">Create new Voyage</h2>
        
                                            <form method="dialog">
        
                                                <button class="text-lg absolute top-5 right-5">
        
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
        
                                                </button>
        
                                            </form>
        
                                        </div>
        
                                        <p class="text-gray-400">
        
                                            Join us on an exciting journey through the cosmos! Discover the
        
                                            mysteries of the universe and explore distant galaxies.
        
                                        </p>
        
                                        <div class="flex justify-end">
        
                                            <button
        
                                                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        
                                                Let's Go!
        
                                            </button>
        
                                        </div>
        
                                    </div>
        
                                </div>
        
                            </div>
        
                        </dialog>
        
                    </div>
        
                </body>
        
            </html>

De nuevo en index.html.twig, quita la dialog... y ya no necesitaremos lo del controlador modal:

            
Copy Code

Show All Lines

                        50 lines
            |
            templates/voyage/index.html.twig
        
Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="m-4 p-4 bg-gray-800 rounded-lg">
        
                <div
        
                    class="flex justify-between"
        
                >
        
                    <h1 class="text-xl font-semibold text-white mb-4">Voyages</h1>
        
                    <button
        
Show Lines

                                                    // ... line 13
                            
                        class="flex items-center space-x-1 bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold px-4 rounded"
        
                    >
        
Show Lines

                                                    // ... lines 16 - 17
                            
                    </button>
        
                </div>
        
Show Lines

                                                    // ... lines 20 - 47
                            
            </div>
        
            {% endblock %}

Esto es ahora un h1 normal y un botón normal... que no hace nada. Enbase.html.twig, haz lo contrario: quita el button, el h1 y la clase en el div:

            
Copy Code

Show All Lines

                        93 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
Show Lines

                                                    // ... lines 3 - 15
                            
                <body class="bg-black text-white font-mono">
        
Show Lines

                                                    // ... lines 17 - 55
                            
                    <div
        
                        data-controller="modal"
        
                        data-action="turbo:before-cache@window->modal#close"
        
                    >
        
                        <dialog
        
                            class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
        
                            data-modal-target="dialog"
        
                            data-action="close->modal#close click->modal#clickOutside"
        
                        >
        
                            <div class="flex grow p-5">
        
                                <div class="grow overflow-auto p-1">
        
                                    <div class="text-white space-y-4">
        
                                        <div class="flex justify-between items-center">
        
                                            <h2 class="text-xl font-bold">Create new Voyage</h2>
        
                                            <form method="dialog">
        
                                                <button class="text-lg absolute top-5 right-5">
        
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
        
                                                </button>
        
                                            </form>
        
                                        </div>
        
                                        <p class="text-gray-400">
        
                                            Join us on an exciting journey through the cosmos! Discover the
        
                                            mysteries of the universe and explore distant galaxies.
        
                                        </p>
        
                                        <div class="flex justify-end">
        
                                            <button
        
                                                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        
                                                Let's Go!
        
                                            </button>
        
                                        </div>
        
                                    </div>
        
                                </div>
        
                            </div>
        
                        </dialog>
        
                    </div>
        
                </body>
        
            </html>

Ahora es un div que contiene un dialog... que está cerrado.

Ahora viene el toque mágico: elimina las tripas del dialog: conserva sólo estos dos divs: nos ayudan a dar relleno y un buen comportamiento de desplazamiento. Dentro, añade un<turbo-frame> con id="modal":

            
Copy Code

Show All Lines

                        74 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
Show Lines

                                                    // ... lines 3 - 15
                            
                <body class="bg-black text-white font-mono">
        
Show Lines

                                                    // ... lines 17 - 55
                            
                    <div
        
                        data-controller="modal"
        
                        data-action="turbo:before-cache@window->modal#close"
        
                    >
        
                        <dialog
        
                            class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
        
                            data-modal-target="dialog"
        
                            data-action="close->modal#close click->modal#clickOutside"
        
                        >
        
                            <div class="flex grow p-5">
        
                                <div class="grow overflow-auto p-1">
        
                                    <turbo-frame id="modal"></turbo-frame>
        
                                </div>
        
                            </div>
        
                        </dialog>
        
                    </div>
        
                </body>
        
            </html>

Eso, amigos míos, ha sido un movimiento de poder de codificación. Ahora tenemos en cada página un<turbo-frame id="modal"> en el que podemos cargar contenido dinámicamente Y, ¡vive dentro de un diálogo!

Observa: en la página índice, cambia el botón de nuevo viaje por una etiqueta a y establece suhref en la ruta app_voyage_new. Es una etiqueta normal que nos llevaría a esa página. Pero ahora añade data-turbo-frame="modal":

            
Copy Code

Show All Lines

                        51 lines
            |
            templates/voyage/index.html.twig
        
Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="m-4 p-4 bg-gray-800 rounded-lg">
        
                <div
        
                    class="flex justify-between"
        
                >
        
                    <h1 class="text-xl font-semibold text-white mb-4">Voyages</h1>
        
                    <a
        
                        href="{{ path('app_voyage_new') }}"
        
                        data-turbo-frame="modal"
        
                        class="flex items-center space-x-1 bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold px-4 rounded"
        
                    >
        
Show Lines

                                                    // ... lines 17 - 18
                            
                    </a>
        
                </div>
        
Show Lines

                                                    // ... lines 21 - 48
                            
            </div>
        
            {% endblock %}

Compruébalo. Actualiza y haz clic. En lugar de cambiar la página, cargó el contenido en el marco modal. Pero... no pasó nada.

Vale, hizo una llamada AJAX a la página del nuevo viaje. Pero si la abrimos en una nueva pestaña, no hay ningún marco modal en esta página. Bueno, en realidad sí lo hay. Como todas las páginas, en la parte inferior, tiene un marco modal vacío. Así que cuando hacemos clic en ese enlace, funciona... pero el resultado es que el marco Turbo se queda vacío. No es muy útil.

Para solucionarlo, en new.html.twig, añade un <turbo-frame id="modal"> alrededor de todo... con una etiqueta de cierre al final:

            
Copy Code

Show All Lines

                        26 lines
            |
            templates/voyage/new.html.twig
        
Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <turbo-frame id="modal">
        
                <div class="m-4 p-4 bg-gray-800 rounded-lg">
        
Show Lines

                                                    // ... lines 8 - 22
                            
                </div>
        
                </turbo-frame>
        
            {% endblock %}

Compruébalo. Cuando hacemos clic ahora, ¡sí! Dentro de <turbo-frame>, ¡tenemos el formulario! El modal aún no se abre, pero está listo.

Ahora, antes de averiguar cómo abrir el modal, tenemos un problema... y una oportunidad. Si fuéramos directamente a la página del nuevo viaje, tendríamos dos elementos<turbo-frame id="modal">: el que rodea el formulario y el vacío de la parte inferior. Eso... no es válido.

Además, aunque quiero poder cargar este formulario dentro del modal, también quiero que se comporte de forma normal si vamos a la página directamente. Fíjate: ahora mismo, si relleno esto correctamente y lo guardo, ¡pasan cosas raras! Lo he enviado a <turbo-frame id="modal">... y me redirige a la página índice... que tiene ese marco coincidente... pero está vacía.

Eso no es lo que quiero. Si voy a esta página directamente, quiero que actúe como si fuera normal.

Vamos a manejar esto con un truco. En new.html.twig, elimina la plantilla <turbo-frame>... y extiende una nueva plantilla base llamada modalBase.html.twig:

            
Copy Code

Show All Lines

                        24 lines
            |
            templates/voyage/new.html.twig
        
            {% extends 'modalBase.html.twig' %}
        
Show Lines

                                                    // ... lines 2 - 24

Ooh. Copia ese nombre y en el directorio templates/, créala: modalBase.html.twig. Ésta tendrá una línea: una etiqueta extends que es dinámica. Siapp.request.headers.get('turbo-frame') es igual a modal -por tanto, si se está realizando una petición AJAX a esta página desde el turbo frame modal, extiende una nuevamodalFrame.html.twig. Si no, extiende la normal base.html.twig:

            
Copy Code

                        2 lines
            |
            templates/modalBase.html.twig
        
            {% extends app.request.headers.get('turbo-frame') == 'modal' ? 'modalFrame.html.twig' : 'base.html.twig' %}

Si vamos a la página normal, se extenderá base.html.twig. Aquí no hay turbo marco, es completamente normal, y se enviará de forma normal.

Vamos a crear esa otra plantilla base. Copia su nombre y, en templates/, crea modalFrame.html.twig. Todo lo que esto necesita es un <turbo-frame id="modal">... con {% block body %} y {% endblock %} dentro:

            
Copy Code

                        4 lines
            |
            templates/modalFrame.html.twig
        
            <turbo-frame id="modal">
        
                {% block body %}{% endblock %}
        
            </turbo-frame>

Así, si hacemos una petición a esta página desde el marco modal, toda la respuesta será este único marco con el contenido de la página dentro. Eso resuelve nuestro problema. Y significa que si queremos que una página pueda cargar su formulario dentro de un modal... la única línea que debemos cambiar está justo aquí. Lo demostraré el día 23.

Pero ahora mismo, volvemos a la situación en la que hacemos clic en este enlace y... si indago en los elementos del modal, se está cargando el formulario en el turbo-frame... pero el modal no se abre. ¿Cómo podemos hacerlo?

Bueno, tengo 2 requisitos para abrir el modal. El primero es que quiero que sea superfácil de abrir. Si aparece HTML dentro de este turbo-frame -no importa cómo se añada- quiero que el sistema sea lo suficientemente inteligente como para verlo y abrir el modal. Y segundo, quiero que el modal se abra al instante. No quiero hacer clic en este botón... y luego esperar 500 milisegundos antes de ver el modal. Esa no es una buena experiencia de usuario.

Para la primera parte -abrir este modal en cuanto haya contenido en turbo-frame - vamos a utilizar un truco dentro de nuestro controlador Stimulus. Permíteme cerrar algunos archivos. En base.html.twig, haz que este turbo-frame sea un objetivo:data-modal-target="dynamicContent":

            
Copy Code

Show All Lines

                        74 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
Show Lines

                                                    // ... lines 3 - 15
                            
                <body class="bg-black text-white font-mono">
        
Show Lines

                                                    // ... lines 17 - 55
                            
                    <div
        
Show Lines

                                                    // ... lines 57 - 58
                            
                    >
        
                        <dialog
        
Show Lines

                                                    // ... lines 61 - 63
                            
                        >
        
                            <div class="flex grow p-5">
        
                                <div class="grow overflow-auto p-1">
        
                                    <turbo-frame id="modal" data-modal-target="dynamicContent"></turbo-frame>
        
                                </div>
        
                            </div>
        
                        </dialog>
        
                    </div>
        
                </body>
        
            </html>

Esta es la idea: si un modal tiene este objetivo y el HTML entra dentro de este elemento por cualquier motivo, quiero que nuestro código se dé cuenta y abra el modal. Para ello, en modal_controller.js, añade ese objetivo:

            
Copy Code

Show All Lines

                        53 lines
            |
            assets/controllers/modal_controller.js
        
Show Lines

                                                    // ... lines 1 - 2
                            
            export default class extends Controller {
        
                static targets = ['dialog', 'dynamicContent'];
        
Show Lines

                                                    // ... lines 5 - 51
                            
            }

Y luego pegaré el código más complejo que vamos a ver en este tutorial:

            
Copy Code

Show All Lines

                        53 lines
            |
            assets/controllers/modal_controller.js
        
Show Lines

                                                    // ... lines 1 - 2
                            
            export default class extends Controller {
        
Show Lines

                                                    // ... lines 4 - 5
                            
                observer = null;
        
                connect() {
        
                    if (this.hasDynamicContentTarget) {
        
                        // when the content changes, call this.open()
        
                        this.observer = new MutationObserver(() => {
        
                            const shouldOpen = this.dynamicContentTarget.innerHTML.trim().length > 0;
        
                            if (shouldOpen && !this.dialogTarget.open) {
        
                                this.open();
        
                            } else if (!shouldOpen && this.dialogTarget.open) {
        
                                this.close();
        
                            }
        
                        });
        
                        this.observer.observe(this.dynamicContentTarget, {
        
                            childList: true,
        
                            characterData: true,
        
                            subtree: true
        
                        });
        
                    }
        
                }
        
                disconnect() {
        
                    if (this.observer) {
        
                        this.observer.disconnect();
        
                    }
        
                    if (this.dialogTarget.open) {
        
                        this.close();
        
                    }
        
                }
        
Show Lines

                                                    // ... lines 36 - 51
                            
            }

Pero, espera: aunque parezca complejo, lo que está haciendo es sencillo. Si tenemos un objetivo dynamicContent, este código vigila ese elemento por si hay algún cambio. Cada vez que hay un cambio, llama a nuestra función. Luego comprobamos si el elemento dynamicContentTarget tiene algún HTML. Si lo tiene, ¡ábrelo! Si no, ciérralo. Así de sencillo.

En disconnect(), desactivamos ese sistema. Y también, por si acaso, si nuestro elemento controlador modal se elimina alguna vez de la página por cualquier motivo, esto cerrará el diálogo y hará la limpieza.

El resultado de esto es... bastante increíble. Actualiza la página. Vamos a jugar. Voy a editar el <turbo-frame> como HTML y escribir: "¿se abrirá?". ¡Boom! Lo hace! Y si vaciamos el contenido... se cierra.

¡Y, lo que es más importante, cuando hacemos clic en el enlace "Nuevo", se abre el formulario! ¡Increíble!

Vale, creo que ya es suficiente por hoy. Mañana, vamos a asegurarnos de que este formulario se envíe. Y como no puedo evitarlo, añadiremos algunas cosas más: como abrir el modal instantáneamente en lugar de esperar a que termine la llamada AJAX.

4 Comments

Sort By

Brandon 4 months ago

Ryan,

I have several modal pages, and I just ran into a spot where a button that lives in a modal would need to go to another modal, which is fine for my UI experience, but what is the best way to return someone back to the previous modal they came from?

| Reply |

weaverryan SFCASTS Brandon 4 months ago

Hey @Brandon!

That is something I thought about tackling in this tutorial, but eventually didn't, because it's potentially a pretty complex problem. In short, I'm not sure! It only makes senes to have a single <dialog> open via showModal() on the page at once. So you're not really opening another modal... but really you're replacing the dialog's content with other content.

In theory, the solution might be relatively simple. If your modal content opens inside a <turbo-frame id="modal">, then any link clicks or even redirects to another page would cause that content's page to also be shown in the modal (assuming that page, of course, extends the modalBase.html.twig so that the page returns inside of a modal frame). The tricky part is that, when you do this, your previous dialog content is lost: it was replaced. That might be ok in some cases, but I feel like this workflow is normally done because you're on FormA inside the modal, then want to go to FormB real quick to create something... so you can come back and continue filling out FormB. I just don't have a generic solution in mind for that yet. I'm sure it's possible, but I'd have to sit and hack on it for awhile.

So, I don't have a great answer for you yet on this one. If anything comes to your mind, I'd love to know.

Cheers!

| Reply |

ik3rib 4 months ago

at this point I have a problem with modal controller not connecting to dynamiContent target. I got this error:
Modal with id dynamicContent does not exist. Are you sure that the data-modal-target attribute points to the correct dynamicContent id?.

The problem is that flowbite has some js witch uses data-modal-target and conflicts (https://github.com/themesberg/flowbite/blob/6f331833e39f696142eda720b622ce24b7594751/src/components/modal/index.ts#L271)

I changed the controller name from modal_controller to leihoa_controller and changed related stuff and now works ok.

| Reply |

weaverryan SFCASTS ik3rib 4 months ago

Hey @ik3rib!

Sorry for the slow reply - holidays! Yea, if you're using the Flowbite JS, there is an unfortunate naming collision. I'm adding a bonus chapter - https://symfonycasts.com/screencast/last-stack/flowbite - to talk about Flowbite, this part included. The tl;dr is:

A) I don't use the Flowbite js, but you can
B) If you do, yea, probably the best fix is to NOT have a Stimulus controller named modal or popover - i.e. rename it like you proposed.

Cheers!

| Reply |

Symfony 6.4

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
    }
}

Previous Chapter

Next Chapter

¡Modal AJAX!

Share this awesome video!

Keep on Learning!

4 Comments

Delete comment?

What PHP libraries does this tutorial use?

	<!DOCTYPE html>
	<html>
Show Lines	// ... lines 3 - 15
	<body class="bg-black text-white font-mono">
	<div class="container mx-auto min-h-screen flex flex-col">
Show Lines	// ... lines 18 - 70
	<dialog
	class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
	data-modal-target="dialog"
	data-action="close->modal#close click->modal#clickOutside"
	>
	<div class="flex grow p-5">
	<div class="grow overflow-auto p-1">
	<div class="text-white space-y-4">
	<div class="flex justify-between items-center">
	<h2 class="text-xl font-bold">Create new Voyage</h2>
	<form method="dialog">
	<button class="text-lg absolute top-5 right-5">
	<svg xmlns="http://www.w3.org/2000/svg" class="w-4" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
	</button>
	</form>
	</div>
	<p class="text-gray-400">
	Join us on an exciting journey through the cosmos! Discover the
	mysteries of the universe and explore distant galaxies.
	</p>
	<div class="flex justify-end">
	<button
	class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
	Let's Go!
	</button>
	</div>
	</div>
	</div>
	</div>
	</dialog>
	</div>
	</body>
	</html>

Show Lines	// ... lines 1 - 4
	{% block body %}
	<div class="m-4 p-4 bg-gray-800 rounded-lg">
	<div
	class="flex justify-between"
	>
	<h1 class="text-xl font-semibold text-white mb-4">Voyages</h1>

	<button
Show Lines	// ... line 13
	class="flex items-center space-x-1 bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold px-4 rounded"
	>
Show Lines	// ... lines 16 - 17
	</button>
	</div>
Show Lines	// ... lines 20 - 47
	</div>
	{% endblock %}

	{% extends 'modalBase.html.twig' %}
Show Lines	// ... lines 2 - 24

	<turbo-frame id="modal">
	{% block body %}{% endblock %}
	</turbo-frame>

Show Lines	// ... lines 1 - 2
	export default class extends Controller {
	static targets = ['dialog', 'dynamicContent'];
Show Lines	// ... lines 5 - 51
	}

¡Modal AJAX!

Keep on Learning!

Añadir un Marco modal al Diseño

Cargar contenido en el marco modal

Añadir el diseño base del modal

Autoabrir el modal

4 Comments

What PHP libraries does this tutorial use?