Search Results | SymfonyCasts

682 search results

Sort By

Comment

Learn JS

Symfony UX: Turbo

Frame Redirecting & Dynamic Frame Targets

Hey, i'm using Turbo but it seems by default removing anchor (_fragment) when i use redirectToRoute, here is a way to fix it ?

Joel-L

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Fixing External JS + Analytics Code

…page BEFORE the body content is loaded/refreshed; twice if there was a preview shown. turbo:render fires ATLEAST once on every page, AFTER body content is loaded/refreshed; twice if there was a preview shown. What is the use case for turbo:before-visit?

Nick-F

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Automatically Redirect Ajax Calls to /login

            Copy Code

                            Show All Lines

                        54 lines
            |
            src/EventSubscriber/TurboFrameRedirectSubscriber.php
        
                Show Lines

                                                    // ... lines 1 - 10
                            
            class TurboFrameRedirectSubscriber implements EventSubscriberInterface
        
            {
        
                private UrlGeneratorInterface $urlGenerator;
        
                public function __construct(UrlGeneratorInterface $urlGenerator)
        
                {
        
                    $this->urlGenerator = $urlGenerator;
        
                }
        
                Show Lines

                                                    // ... lines 20 - 37
                            
                private function shouldWrapRedirect(Request $request, Response $response): bool
        
                {
        
                    if (!$response->isRedirection()) {
        
                        return false;
        
                    }
        
                    $location = $response->headers->get('Location');
        
                    if ($location === $this->urlGenerator->generate('app_login')) {
        
                        return true;
        
                    }
        
                    return (bool) $request->headers->get('Turbo-Frame-Redirect');
        
                }
        
            }

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Smart Frame Redirecting with the Server

            Copy Code

                            Show All Lines

                        43 lines
            |
            src/EventSubscriber/TurboFrameRedirectSubscriber.php
        
                Show Lines

                                                    // ... lines 1 - 9
                            
            class TurboFrameRedirectSubscriber implements EventSubscriberInterface
        
            {
        
                public function onKernelResponse(ResponseEvent $event)
        
                {
        
                    if (!$this->shouldWrapRedirect($event->getRequest(), $event->getResponse())) {
        
                        return;
        
                    }
        
                }
        
                Show Lines

                                                    // ... lines 18 - 25
                            
                private function shouldWrapRedirect(Request $request, Response $response): bool
        
                {
        
                    if (!$response->isRedirection()) {
        
                        return false;
        
                    }
        
                    if (!$request->headers->has('Turbo-Frame')) {
        
                        return false;
        
                    }
        
                    if ($request->headers->get('Turbo-Frame-Redirect')) {
        
                        return true;
        
                    }
        
                    return false;
        
                }
        
            }

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Smart Frame Redirecting with the Server

            Copy Code

                            Show All Lines

                        40 lines
            |
            src/EventSubscriber/TurboFrameRedirectSubscriber.php
        
                Show Lines

                                                    // ... lines 1 - 9
                            
            class TurboFrameRedirectSubscriber implements EventSubscriberInterface
        
            {
        
                public function onKernelResponse(ResponseEvent $event)
        
                {
        
                    if (!$this->shouldWrapRedirect($event->getRequest(), $event->getResponse())) {
        
                        return;
        
                    }
        
                    $response = new Response(null, 200, [
        
                        'Turbo-Location' => $event->getResponse()->headers->get('Location'),
        
                    ]);
        
                    $event->setResponse($response);
        
                }
        
                Show Lines

                                                    // ... lines 23 - 30
                            
                private function shouldWrapRedirect(Request $request, Response $response): bool
        
                {
        
                    if (!$response->isRedirection()) {
        
                        return false;
        
                    }
        
                    return (bool) $request->headers->get('Turbo-Frame-Redirect');
        
                }
        
            }

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Smart Frame Redirecting with the Server

            Copy Code

                            Show All Lines

                        40 lines
            |
            src/EventSubscriber/TurboFrameRedirectSubscriber.php
        
                Show Lines

                                                    // ... lines 1 - 9
                            
            class TurboFrameRedirectSubscriber implements EventSubscriberInterface
        
            {
        
                Show Lines

                                                    // ... lines 12 - 30
                            
                private function shouldWrapRedirect(Request $request, Response $response): bool
        
                {
        
                    if (!$response->isRedirection()) {
        
                        return false;
        
                    }
        
                    return (bool) $request->headers->get('Turbo-Frame-Redirect');
        
                }
        
            }

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Full Page Redirect from a Frame

            Copy Code

                            Show All Lines

                        29 lines
            |
            assets/controllers/modal-form_controller.js
        
                Show Lines

                                                    // ... lines 1 - 2
                            
            import * as Turbo from '@hotwired/turbo';
        
            export default class extends Controller {
        
                Show Lines

                                                    // ... lines 6 - 8
                            
                connect() {
        
                    document.addEventListener('turbo:before-fetch-response', (event) => {
        
                        if (!this.modal || !this.modal._isShown) {
        
                            return;
        
                        }
        
                        const fetchResponse = event.detail.fetchResponse;
        
                        if (fetchResponse.succeeded && fetchResponse.redirected) {
        
                            event.preventDefault();
        
                            Turbo.visit(fetchResponse.location);
        
                            this.modal.hide();
        
                        }
        
                    });
        
                }
        
                Show Lines

                                                    // ... lines 23 - 27
                            
            }

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Form Submits & The Preview Feature

            Copy Code

                            Show All Lines

                        36 lines
            |
            templates/registration/register.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block metas %}
        
                <meta name="turbo-cache-control" content="no-preview">
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 8 - 36

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

The Problem of Snapshots & JavaScript Popups

            Copy Code

                            Show All Lines

                        17 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... lines 1 - 12
                            
            document.addEventListener('turbo:before-cache', (event) => {
        
                console.log(event);
        
            });

See Code Block in Script

Comment

Learn JS

Symfony UX: Turbo

What about Turbo and Websocket in Symfony instead of ajax?

Axel

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Mercure Hub's JWT Authorization

I got an Authorization issue using `turbo_stream_listen` with `withCredentials` to connect a private hub in production. > An exception has been thrown during the rendering of a template ("Unable to create authorization cookie for a hub on the different second-level domain mercure…

john-erney-rojas

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Stimulus

Hey |mention:73297| Do you have Turbo enabled? When you click on a link it won't trigger a full page reload, it makes an AJAX request and updates the HTML. Also, double check that your `main.js` is included on your page. In this…

MolloKhan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Hey |mention:54265| I think Turbo is not the case here, but stimulus can be used for it... but it won't be a great solution. Cheers!

sadikoff

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Reloading When JS/CSS Changes

Where do you set data-turbo-track when you use asset mapper instead of webpack? The only supported command - that is similar - is: importmap_script_attributes: 'data-turbo-track': 'reload' in: asset_mapper.yaml But this only affects imports from the import map. Neither other…

nonplusultra

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Prefetching the Next Page

Seems that prefetch now inside turbo 8. https://github.com/hotwired/turbo/pull/1101

Infourok

Read Full Comment

Comment

Learn Symfony 6

Doctrine, Symfony 6 & the Database

Persisting to the Database

…turbo package is missing a dependency. I'm not sure if that bug is already fixed, you can try upgrading it `composer up symfony/ux-turbo`, or you can install the missing dep manually `composer require doctrine/common` - or, if you're not using turbo…

MolloKhan

Read Full Comment

Comment

Learn Symfony 6

Harmonious Development with Symfony 6

Turbo: Supercharge your App

I ran into a problem with turbo, where it made Ajax Calls for stuff in the profiler-bar as well. Every time i hover over an icon in the profiler bar, the ajax call-counter increments and another entry is made. A quick research didn…

Michael-B

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Turbo Drive

…did: *composer require symfony/ux-turbo* at my Easy Admin project. My controllers.json was edited: ``` "controllers": { "@symfony/ux-turbo": { "turbo-core": { "enabled": true, "fetch": "eager" }, "mercure-turbo-stream": { "enabled": false, "fetch": "eager" } } }, ``` At my composer.json I have the *"symfony/ux-turbo": "^2.16…

Tim-V

Read Full Comment

Comment

Learn Symfony

AssetMapper: Modern JS with Zero Build System

Deploying to Platform.sh

Hey Pasquale, Choosing between Stimulus/Turbo and frontend frameworks such as React or Vue.js depends on the type of application you're building, the complexity of the features, and your personal preferences among other factors. Here're some ideas that I believe will help…

Victor

Read Full Comment

Code

Learn Symfony

30 Days with LAST Stack

Modal Twig Component

            Copy Code

                        40 lines
            |
            templates/components/Modal.html.twig
        
            <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"
        
                                data-modal-target="dynamicContent"
        
                                data-action="turbo:before-fetch-request->modal#showLoading"
        
                                class="aria-busy:opacity-50 transition-opacity"
        
                            >
        
                                {{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
        
                            </turbo-frame>
        
                        </div>
        
                    </div>
        
                </dialog>
        
                <template data-modal-target="loadingTemplate">
        
                    <div class="bg-space-pattern bg-cover rounded-lg p-8">
        
                        <div class="space-y-2">
        
                            <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                            <div class="h-4"></div>
        
                            <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
        
                            <div class="h-4"></div>
        
                            <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
        
                        </div>
        
                    </div>
        
                </template>
        
            </div>

See Code Block in Script

8 9 10 11 12

Show Lines	// ... lines 1 - 10
	class TurboFrameRedirectSubscriber implements EventSubscriberInterface
	{
	private UrlGeneratorInterface $urlGenerator;

	public function __construct(UrlGeneratorInterface $urlGenerator)
	{
	$this->urlGenerator = $urlGenerator;
	}

Show Lines	// ... lines 20 - 37

	private function shouldWrapRedirect(Request $request, Response $response): bool
	{
	if (!$response->isRedirection()) {
	return false;
	}

	$location = $response->headers->get('Location');

	if ($location === $this->urlGenerator->generate('app_login')) {
	return true;
	}

	return (bool) $request->headers->get('Turbo-Frame-Redirect');
	}
	}

Show Lines	// ... lines 1 - 9
	class TurboFrameRedirectSubscriber implements EventSubscriberInterface
	{
	public function onKernelResponse(ResponseEvent $event)
	{
	if (!$this->shouldWrapRedirect($event->getRequest(), $event->getResponse())) {
	return;
	}
	}
Show Lines	// ... lines 18 - 25
	private function shouldWrapRedirect(Request $request, Response $response): bool
	{
	if (!$response->isRedirection()) {
	return false;
	}

	if (!$request->headers->has('Turbo-Frame')) {
	return false;
	}

	if ($request->headers->get('Turbo-Frame-Redirect')) {
	return true;
	}

	return false;
	}
	}

Show Lines	// ... lines 1 - 2
	import * as Turbo from '@hotwired/turbo';

	export default class extends Controller {
Show Lines	// ... lines 6 - 8
	connect() {
	document.addEventListener('turbo:before-fetch-response', (event) => {
	if (!this.modal \|\| !this.modal._isShown) {
	return;
	}

	const fetchResponse = event.detail.fetchResponse;
	if (fetchResponse.succeeded && fetchResponse.redirected) {
	event.preventDefault();
	Turbo.visit(fetchResponse.location);
	this.modal.hide();
	}
	});
	}
Show Lines	// ... lines 23 - 27
	}

Show Lines	// ... lines 1 - 4
	{% block metas %}
	<meta name="turbo-cache-control" content="no-preview">
	{% endblock %}
Show Lines	// ... lines 8 - 36

Show Lines	// ... lines 1 - 12

	document.addEventListener('turbo:before-cache', (event) => {
	console.log(event);
	});

	<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"
	data-modal-target="dynamicContent"
	data-action="turbo:before-fetch-request->modal#showLoading"
	class="aria-busy:opacity-50 transition-opacity"
	>
	{{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
	</turbo-frame>
	</div>
	</div>
	</dialog>

	<template data-modal-target="loadingTemplate">
	<div class="bg-space-pattern bg-cover rounded-lg p-8">
	<div class="space-y-2">
	<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
	<div class="h-4"></div>
	<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
	<div class="h-4"></div>
	<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
	</div>
	</div>
	</template>
	</div>