Search Results | SymfonyCasts

682 search results

Sort By

Comment

Learn JS

Symfony UX: Stimulus

HTML-Returning Ajax Endpoint

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.

sadikoff

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Form 422 Status & renderForm()

Hey Ryan. I solved it by using turbo frames. It works like a charm now and I can put it everywhere I want to :D. I created a route for the contact form and a partial I can include in my sitebuilding. In the partial…

Braunstetter

Read Full Comment

Comment

Learn JS

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 everywhere in a…

Braunstetter

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Multiple Updates in one Stream

Instead of adding another else statement to the template you can also add an "append" turbo stream to the reviews frame to add a button within the turbo frame tags: ``` <a href="{{ path('app_product_reviews', {id: product.id}) }}" class="btn btn-success">…

Nick-F

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

CSS Page Transitions

Yeah... it looks like swup and turbo do almost the same exact thing: turn all the links in the body to ajax calls. So, right now it looks to me like there's no point in using both together, it's either one or the…

Nick-F

Read Full Comment

Comment

Learn JS

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

Comment

Learn Symfony 5

Symfony 5: Mastering Doctrine Relations

Yup! I'm building it this week - Turbo had a few more chapters than I expected. I'm hoping to release this next week :)

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Reloading When JS/CSS Changes

This does seem to be the case: https://discuss.hotwired.dev/t/turbo-always-reloading-when-asset-js-css-is-added-with-turbo-track/3179/5

Vafilor

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Processing Streams by Hand for Fun & Profit

            Copy Code

                            Show All Lines

                        28 lines
            |
            assets/controllers/counter_controller.js
        
                Show Lines

                                                    // ... line 1
                            
            import { visit, renderStreamMessage } from '@hotwired/turbo';
        
                Show Lines

                                                    // ... line 3
                            
            export default class extends Controller {
        
                Show Lines

                                                    // ... lines 5 - 7
                            
                increment() {
        
                    this.count++;
        
                    this.countTarget.innerText = this.count;
        
                    const streamMessage = `
        
            <turbo-stream action="update" target="flash-container">
        
                <template>
        
                    <div class="alert alert-success">
        
                        Thanks for clicking ${this.count} times!
        
                    </div>
        
                </template>
        
            </turbo-stream>
        
                    `;
        
                    renderStreamMessage(streamMessage);
        
                    if (this.count === 10) {
        
                        visit('/you-won');
        
                    }
        
                }
        
            }

See Code Block in Script

Comment

Learn JS

Symfony UX: Turbo

Adding a Custom Request Header Based on the Frame

Hey team! I was sceptical about stimulus and turbo at first, mostly because I spent a lot of time learning react to give my front end a better user experience, but after playing around with stimulus for a bit, I must admit, I love it…

KableCH

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Lazy Modal & Big Cleanup

            Copy Code

                        7 lines
            |
            templates/product_admin/_form.html.twig
        
            {{ form_start(form, {
        
                attr: { 'data-turbo-frame': formTarget|default('_top') }
        
            }) }}
        
                {{ form_widget(form) }}
        
                <button class="btn btn-primary" formnovalidate>{{ button_label|default('Save') }}</button>
        
            {{ form_end(form) }}

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Lazy Modal & Big Cleanup

            Copy Code

                            Show All Lines

                        26 lines
            |
            templates/_modal.html.twig
        
                Show Lines

                                                    // ... lines 1 - 14
                            
                        <turbo-frame
        
                            class="modal-body"
        
                            src="{{ modalSrc }}"
        
                            id="{{ id }}"
        
                            loading="lazy"
        
                        >
        
                            {{ modalContent|default('Loading...') }}
        
                        </turbo-frame>
        
                Show Lines

                                                    // ... lines 23 - 26

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

turbo-frame inside a Modal

            Copy Code

                            Show All Lines

                        33 lines
            |
            templates/_modal.html.twig
        
                Show Lines

                                                    // ... lines 1 - 14
                            
                        <turbo-frame
        
                            class="modal-body"
        
                            src="{{ modalSrc }}"
        
                            id="{{ id }}"
        
                        >
        
                            {{ modalContent|default('Loading...') }}
        
                        </turbo-frame>
        
                Show Lines

                                                    // ... lines 22 - 33

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Frame Redirecting & Dynamic Frame Targets

            Copy Code

                        7 lines
            |
            templates/product_admin/_form.html.twig
        
            {{ form_start(form, {
        
                attr: { 'data-turbo-frame': formTarget|default('_top') }
        
            }) }}
        
                {{ form_widget(form) }}
        
                <button class="btn btn-primary" formnovalidate>{{ button_label|default('Save') }}</button>
        
            {{ form_end(form) }}

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Frames & Form "action" Attributes

            Copy Code

                        7 lines
            |
            templates/product_admin/_form.html.twig
        
            {{ form_start(form, {
        
                attr: { 'data-turbo-frame': 'product-info' }
        
            }) }}
        
                {{ form_widget(form) }}
        
                <button class="btn btn-primary" formnovalidate>{{ button_label|default('Save') }}</button>
        
            {{ form_end(form) }}

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Review this Product... in a turbo-frame!

            Copy Code

                            Show All Lines

                        33 lines
            |
            templates/product/_reviews.html.twig
        
                Show Lines

                                                    // ... lines 1 - 28
                            
            {% elseif not is_granted('ROLE_USER') %}
        
                <p><a href="{{ path('app_login') }}" data-turbo-frame="_top">Log in</a> to post your review</p>
        
            {% endif %}
        
                Show Lines

                                                    // ... lines 32 - 33

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Using a Full HTML Page to Populate a Frame

            Copy Code

                            Show All Lines

                        101 lines
            |
            templates/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 87
                            
                    {% block weather_widget %}
        
                        <turbo-frame id="weather_widget" src="{{ path('app_weather') }}"></turbo-frame>
        
                    {% endblock %}
        
                Show Lines

                                                    // ... lines 93 - 101

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Using a Full HTML Page to Populate a Frame

            Copy Code

                            Show All Lines

                        101 lines
            |
            templates/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 87
                            
                    {% block weather_widget %}
        
                        <turbo-frame id="weather_widget" src="{{ path('app_weather') }}" loading="lazy"></turbo-frame>
        
                    {% endblock %}
        
                Show Lines

                                                    // ... lines 93 - 101

See Code Block in Script

Code

Learn JS

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 JS

Symfony UX: Turbo

Manual Visits with Turbo

            Copy Code

                        17 lines
            |
            assets/controllers/counter_controller.js
        
            import { Controller } from 'stimulus';
        
            import { visit } 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) {
        
                        visit('/you-won');
        
                    }
        
                }
        
            }

See Code Block in Script

Show Lines	// ... line 1
	import { visit, renderStreamMessage } from '@hotwired/turbo';
Show Lines	// ... line 3
	export default class extends Controller {
Show Lines	// ... lines 5 - 7
	increment() {
	this.count++;
	this.countTarget.innerText = this.count;

	const streamMessage = `
	<turbo-stream action="update" target="flash-container">
	<template>
	<div class="alert alert-success">
	Thanks for clicking ${this.count} times!
	</div>
	</template>
	</turbo-stream>
	`;
	renderStreamMessage(streamMessage);

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

	{{ form_start(form, {
	attr: { 'data-turbo-frame': formTarget\|default('_top') }
	}) }}
	{{ form_widget(form) }}
	<button class="btn btn-primary" formnovalidate>{{ button_label\|default('Save') }}</button>
	{{ form_end(form) }}

Show Lines	// ... lines 1 - 14
	<turbo-frame
	class="modal-body"
	src="{{ modalSrc }}"
	id="{{ id }}"
	loading="lazy"
	>
	{{ modalContent\|default('Loading...') }}
	</turbo-frame>
Show Lines	// ... lines 23 - 26

	{{ form_start(form, {
	attr: { 'data-turbo-frame': 'product-info' }
	}) }}
	{{ form_widget(form) }}
	<button class="btn btn-primary" formnovalidate>{{ button_label\|default('Save') }}</button>
	{{ form_end(form) }}

Show Lines	// ... lines 1 - 28
	{% elseif not is_granted('ROLE_USER') %}
	<p><a href="{{ path('app_login') }}" data-turbo-frame="_top">Log in</a> to post your review</p>
	{% endif %}
Show Lines	// ... lines 32 - 33

Show Lines	// ... lines 1 - 87

	{% block weather_widget %}
	<turbo-frame id="weather_widget" src="{{ path('app_weather') }}"></turbo-frame>
	{% endblock %}

Show Lines	// ... lines 93 - 101

	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');
	}
	}
	}

	import { Controller } from 'stimulus';
	import { visit } 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) {
	visit('/you-won');
	}
	}
	}