Search Results for: Turbo

590 search results for Turbo

Sort By

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

Hi I installed turbo and I get this error DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "turbo-frame" has already been used with this registry I don't know why thnaks! ...

ethnerom

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

CSS Page Transitions

Pausable rendering has been implemented since this video https://github.com/hotwired/turbo/pull/290 I'm going to try to implement it on my own but a video on integrating Swup with Turbo would be awesome ...

Nick-F

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Toast Notifications

            Copy Code

                            Show All Lines

                        49 lines
            |
            templates/broadcast/Review.stream.html.twig
        
            {% block create %}
        
                Show Lines

                                                    // ... lines 2 - 18
                            
                <turbo-stream action="append" target="product-{{ entity.product.id }}-toasts">
        
                    <template>
        
                        {{ include('_toast.html.twig', {
        
                            title: 'New Review!',
        
                            body: 'A new review was just posted for this product'
        
                        }) }}
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 28 - 49

See Code Block in Script

Code

Learn JS Frameworks & Tools

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 Frameworks & Tools

Symfony UX: Turbo

turbo-frame inside a Modal

            Copy Code

                            Show All Lines

                        34 lines
            |
            templates/_modal.html.twig
        
            <div
        
                class="modal fade"
        
                tabindex="-1"
        
                aria-hidden="true"
        
                data-modal-form-target="modal"
        
            >
        
                Show Lines

                                                    // ... lines 7 - 14
                            
                        <turbo-frame
        
                            class="modal-body"
        
                            data-modal-form-target="modalBody"
        
                            data-action="submit->modal-form#submitForm"
        
                            src="{{ modalSrc }}"
        
                        >
        
                            {{ modalContent|default('Loading...') }}
        
                        </turbo-frame>
        
                Show Lines

                                                    // ... lines 23 - 32
                            
            </div>

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Targeting Links in or out of the Frame

            Copy Code

                            Show All Lines

                        32 lines
            |
            templates/cart/cart.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                        <aside class="col-12 col-md-4 order-2 order-md-1">
        
                            <turbo-frame id="cart-sidebar" src="{{ fragment_uri(controller('App\\Controller\\CartController::_cartFeaturedProduct')) }}" target="_top">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 17 - 32

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Manual Visits with Turbo

            Copy Code

                        17 lines
            |
            assets/controllers/counter_controller.js
        
            import { Controller } from 'stimulus';
        
            import * as Turbo from '@hotwired/turbo';
        
            export default class extends Controller {
        
                count = 0;
        
                static targets = ['count'];
        
                increment() {
        
                    this.count++;
        
                    this.countTarget.innerText = this.count;
        
                    if (this.count === 10) {
        
                        Turbo.visit('/you-won');
        
                    }
        
                }
        
            }

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Turbo Stream Responses

            Copy Code

                            Show All Lines

                        123 lines
            |
            src/Controller/VoyageController.php
        
                Show Lines

                                                    // ... lines 1 - 13
                            
            use Symfony\UX\Turbo\TurboBundle;
        
                Show Lines

                                                    // ... lines 15 - 16
                            
            class VoyageController extends AbstractController
        
            {
        
                Show Lines

                                                    // ... lines 19 - 27
                            
                public function new(Request $request, EntityManagerInterface $entityManager): Response
        
                {
        
                Show Lines

                                                    // ... lines 30 - 33
                            
                    if ($form->isSubmitted() && $form->isValid()) {
        
                Show Lines

                                                    // ... lines 35 - 39
                            
                        if ($request->headers->has('turbo-frame')) {
        
                            $request->setRequestFormat(TurboBundle::STREAM_FORMAT);
        
                            return $this->renderBlock('voyage/new.html.twig', 'stream_success', [
        
                                'voyage' => $voyage
        
                            ]);
        
                        }
        
                Show Lines

                                                    // ... lines 47 - 48
                            
                    }
        
                Show Lines

                                                    // ... lines 50 - 54
                            
                }
        
                Show Lines

                                                    // ... lines 56 - 121
                            
            }

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

More with fun Modals! Editing & Deleting

            Copy Code

                            Show All Lines

                        97 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 - 51
                            
                    <div
        
                Show Lines

                                                    // ... lines 53 - 54
                            
                    >
        
                        <dialog
        
                Show Lines

                                                    // ... lines 57 - 59
                            
                        >
        
                            <div class="flex grow p-5">
        
                                <div class="grow overflow-auto p-1">
        
                                    <turbo-frame
        
                Show Lines

                                                    // ... lines 64 - 67
                            
                                    >
        
                                        {{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
        
                                    </turbo-frame>
        
                                </div>
        
                            </div>
        
                        </dialog>
        
                Show Lines

                                                    // ... lines 74 - 89
                            
                    </div>
        
                Show Lines

                                                    // ... lines 91 - 94
                            
                </body>
        
            </html>

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Turbo Frames

            Copy Code

                            Show All Lines

                        50 lines
            |
            templates/planet/show.html.twig
        
                Show Lines

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

                                                    // ... lines 7 - 8
                            
                <turbo-frame id="planet-info">
        
                    <table class="min-w-full bg-gray-800 text-white">
        
                Show Lines

                                                    // ... lines 11 - 33
                            
                    </table>
        
                </turbo-frame>
        
                Show Lines

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

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Turbo Frames

            Copy Code

                            Show All Lines

                        63 lines
            |
            templates/main/homepage.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <div class="flex">
        
                    <aside class="hidden md:block md:w-64 bg-gray-900 px-2 py-6">
        
                Show Lines

                                                    // ... line 8
                            
                        <turbo-frame id="planet-info">
        
                            {{ include('main/_planet_list.html.twig') }}
        
                        </turbo-frame>
        
                    </aside>
        
                Show Lines

                                                    // ... lines 13 - 60
                            
                </div>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Data Tables with Turbo Frames

            Copy Code

                            Show All Lines

                        139 lines
            |
            templates/main/homepage.html.twig
        
                Show Lines

                                                    // ... lines 1 - 27
                            
            {% block body %}
        
                <div class="flex">
        
                Show Lines

                                                    // ... lines 30 - 36
                            
                    <section class="flex-1 ml-10">
        
                Show Lines

                                                    // ... lines 38 - 56
                            
                        <turbo-frame id="voyage-list" class="aria-busy:opacity-50 aria-busy:blur-sm transition-all">
        
                Show Lines

                                                    // ... lines 58 - 134
                            
                        </turbo-frame>
        
                    </section>
        
                </div>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Popover!

            Copy Code

                        11 lines
            |
            templates/planet/_card.html.twig
        
            <turbo-frame id="planet-card-{{ planet.id }}">
        
                <div class="px-6 py-4">
        
                    <h4>
        
                        <a class="hover:text-blue-300 transition-colors duration-100" href="{{ path('app_planet_show', { id: planet.id }) }}">
        
                            {{ planet.name }}
        
                        </a>
        
                    </h4>
        
                    <small>{{ planet.lightYearsFromEarth|round|number_format }} ly</small>
        
                </div>
        
            </turbo-frame>

See Code Block in Script

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Listening & Publishing

First of all, thank you very much for the detailed response! Much appreciated! 1) On the controllers.json issue, I added the `mercure-turbo-stream` key (which was not there even though I ran recipes). So my file now ...

CDesign

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

Hey Nick! I was just answering almost the same question for someone else this evening :). In short, while you can use Turbo Frames in some places (nice job getting this working btw!), you cannot use Turbo Drive with ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

Hey @Xavier-V! > Module build failed: Module not found: "../../vendor/symfony/ux-turbo/assets/dist/turbo_controller.js" contains a reference to the file "@hotwired/stimulus". This actually makes me think we have ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Form 422 Status & renderForm()

Hello Ryan. I start using turbo now first for the frontend in our company. I did the first turbo page now and I have the first problem :). When I embed a controller with a (contact-)form (to be able to reuse it ...

Braunstetter

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Fancy things on Modal Form Success

Hi, I came across this comment while trying to reload a table with sorting and pagination after adding an entry. I installed Turbo 8 and experimented with the 'refresh' action along with the ``, and it works perfectly ...

Sucram

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Data Tables with Turbo Frames

Thanks for this great tutorial! Adding data-turbo-action="advance" makes the page jump back to the top of the page again when searching, clicking on the sorting or paging links. Removing it fixes that again. I thought ...

escobarcampos

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Hey Fabrice, In theory, it should be possible, you should just enable it for those pages in the way we show in our Turbo tutorial: https://symfonycasts.com/screencast/turbo . Though if you watched that course ...

Victor

Read Full Comment

	{% block create %}
Show Lines	// ... lines 2 - 18
	<turbo-stream action="append" target="product-{{ entity.product.id }}-toasts">
	<template>
	{{ include('_toast.html.twig', {
	title: 'New Review!',
	body: 'A new review was just posted for this product'
	}) }}
	</template>
	</turbo-stream>
	{% endblock %}
Show Lines	// ... lines 28 - 49

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
	}

	<div
	class="modal fade"
	tabindex="-1"
	aria-hidden="true"
	data-modal-form-target="modal"
	>
Show Lines	// ... lines 7 - 14
	<turbo-frame
	class="modal-body"
	data-modal-form-target="modalBody"
	data-action="submit->modal-form#submitForm"
	src="{{ modalSrc }}"
	>
	{{ modalContent\|default('Loading...') }}
	</turbo-frame>
Show Lines	// ... lines 23 - 32
	</div>

Show Lines	// ... lines 1 - 10
	<aside class="col-12 col-md-4 order-2 order-md-1">
	<turbo-frame id="cart-sidebar" src="{{ fragment_uri(controller('App\\Controller\\CartController::_cartFeaturedProduct')) }}" target="_top">
	Loading...
	</turbo-frame>
	</aside>

Show Lines	// ... lines 17 - 32

	import { Controller } from 'stimulus';
	import * as Turbo from '@hotwired/turbo';

	export default class extends Controller {
	count = 0;
	static targets = ['count'];

	increment() {
	this.count++;
	this.countTarget.innerText = this.count;

	if (this.count === 10) {
	Turbo.visit('/you-won');
	}
	}
	}

Show Lines	// ... lines 1 - 13
	use Symfony\UX\Turbo\TurboBundle;
Show Lines	// ... lines 15 - 16
	class VoyageController extends AbstractController
	{
Show Lines	// ... lines 19 - 27
	public function new(Request $request, EntityManagerInterface $entityManager): Response
	{
Show Lines	// ... lines 30 - 33
	if ($form->isSubmitted() && $form->isValid()) {
Show Lines	// ... lines 35 - 39
	if ($request->headers->has('turbo-frame')) {
	$request->setRequestFormat(TurboBundle::STREAM_FORMAT);

	return $this->renderBlock('voyage/new.html.twig', 'stream_success', [
	'voyage' => $voyage
	]);
	}
Show Lines	// ... lines 47 - 48
	}
Show Lines	// ... lines 50 - 54
	}
Show Lines	// ... lines 56 - 121
	}

	<!DOCTYPE html>
	<html>
Show Lines	// ... lines 3 - 15
	<body class="bg-black text-white font-mono">
Show Lines	// ... lines 17 - 51
	<div
Show Lines	// ... lines 53 - 54
	>
	<dialog
Show Lines	// ... lines 57 - 59
	>
	<div class="flex grow p-5">
	<div class="grow overflow-auto p-1">
	<turbo-frame
Show Lines	// ... lines 64 - 67
	>
	{{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
	</turbo-frame>
	</div>
	</div>
	</dialog>
Show Lines	// ... lines 74 - 89
	</div>
Show Lines	// ... lines 91 - 94
	</body>
	</html>

Show Lines	// ... lines 1 - 4
	{% block body %}
	<div class="m-4 p-4 bg-gray-800 rounded-lg">
Show Lines	// ... lines 7 - 8
	<turbo-frame id="planet-info">
	<table class="min-w-full bg-gray-800 text-white">
Show Lines	// ... lines 11 - 33
	</table>
	</turbo-frame>
Show Lines	// ... lines 36 - 47
	</div>
	{% endblock %}

Show Lines	// ... lines 1 - 27
	{% block body %}
	<div class="flex">
Show Lines	// ... lines 30 - 36
	<section class="flex-1 ml-10">
Show Lines	// ... lines 38 - 56
	<turbo-frame id="voyage-list" class="aria-busy:opacity-50 aria-busy:blur-sm transition-all">
Show Lines	// ... lines 58 - 134
	</turbo-frame>
	</section>
	</div>
	{% endblock %}

	<turbo-frame id="planet-card-{{ planet.id }}">
	<div class="px-6 py-4">
	<h4>
	<a class="hover:text-blue-300 transition-colors duration-100" href="{{ path('app_planet_show', { id: planet.id }) }}">
	{{ planet.name }}
	</a>
	</h4>
	<small>{{ planet.lightYearsFromEarth\|round\|number_format }} ly</small>
	</div>
	</turbo-frame>