Search Results for: Turbo

590 search results for Turbo

Sort By

Comment

Learn Symfony 6

Doctrine, Symfony 6 & the Database

Persisting to the Database

Hey |mention:79070| The Symfony ux-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 you can remove it Cheers! ...

MolloKhan

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

HTML dialog for Modals

If anyone has issues getting the modal to close by adding `data-turbo-temporary`, check you came to the page via a Turbo navigation. If you've landed on the page without a Turbo transition then going back & forward again won't remove the dialog. This took me a while to work out. I hope I save someone the same. ...

ToG

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

That was not the error, I was using v1 of symfony-turbo, but now using version 2 I have a different problem "../../vendor/symfony/ux-turbo/assets/dist/turbo_controller.js" contains a reference to the file "@hotwired/turbo". my assets folder is not in the standard place ...

Xavier-V

Read Full Comment

Comment

Learn Symfony 5

Symfony 5 Security: Authenticators

Registration Form

... Ohh, you're using Turbo. Sometimes Turbo does unexpected things. I believe the error is because you're not returning the exact HTTP error code that Turbo requires. Try setting the response status code to "422" or, if you're using the Symfony Form component, you can use this controller shortcut method `$this->renderForm()` ...

MolloKhan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

CSS Page Transitions

Yes, I need to try this :). > but a video on integrating Swup with Turbo would be awesome It's not that you would integrate Swup WITH Turbo... more that you would take advantage of the "pausable" rendering in order to ...

weaverryan

Read Full Comment

Comment

Learn Symfony 5

Symfony 5 Security: Authenticators

Hey It O.! This is the *next* tutorial - so it's right after Turbo. My guess would be about 3 weeks - it won't be significantly delayed because it's definitely happening after Turbo (I'm mostly not sure because I don't know yet exactly how long Turbo will go). So, soon! Cjeers! ...

weaverryan

Read Full Comment

Code

Learn JS Frameworks & Tools

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

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Multiple Updates in one Stream

            Copy Code

                            Show All Lines

                        41 lines
            |
            templates/product/_reviews.html.twig
        
            <turbo-frame id="product-review">
        
                Show Lines

                                                    // ... lines 2 - 18
                            
            {% if reviewForm|default(false) %}
        
                Show Lines

                                                    // ... lines 20 - 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>
        
            {% else %}
        
                <div class="alert alert-success">
        
                    Thanks for your "real" review you "human" ?!
        
                </div>
        
                <a href="{{ path('app_product_reviews', {
        
                    id: product.id
        
                }) }}">Love the product *that* much? Add another review!</a>
        
            {% endif %}
        
            </turbo-frame>

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Multiple Updates in one Stream

            Copy Code

                            Show All Lines

                        37 lines
            |
            templates/product/_reviews.html.twig
        
            <turbo-frame id="product-review">
        
                Show Lines

                                                    // ... lines 2 - 18
                            
            {% if reviewForm|default(false) %}
        
                Show Lines

                                                    // ... lines 20 - 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>
        
            {% else %}
        
                <div class="alert alert-success">
        
                    Thanks for your "real" review you "human" ?!
        
                </div>
        
            {% endif %}
        
            </turbo-frame>

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Redirecting the Full Page from a Frame

            Copy Code

                            Show All Lines

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

                                                    // ... lines 9 - 14
                            
                        <turbo-frame
        
                            class="modal-body"
        
                            src="{{ modalSrc }}"
        
                            id="{{ id }}"
        
                            loading="lazy"
        
                            data-turbo-form-redirect="true"
        
                        >
        
                            {{ modalContent|default('Loading...') }}
        
                        </turbo-frame>
        
                    </div>
        
                </div>
        
            </div>

See Code Block in Script

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Smart Frame Redirecting with the Server

Hey @Tom-R! Hmm. Maybe. But I can say a few things :). A) In more recent versions of turbo, you can (in general) make a `turbo-frame` change the URL when it navigates by adding `data-turbo-action="advance ...

weaverryan

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Toast Notifications

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 6
                            
            <turbo-frame id="product-reviews-form">
        
                Show Lines

                                                    // ... line 8
                            
            {% for flash in app.flashes('review_success') %}
        
                {{ include('_toast.html.twig', {
        
                    title: 'Success!',
        
                    body: flash
        
                }) }}
        
            {% endfor %}
        
                Show Lines

                                                    // ... lines 15 - 36
                            
            </turbo-frame>

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Broadcasting Frontend Changes on Entity Update/Remove

            Copy Code

                            Show All Lines

                        33 lines
            |
            templates/broadcast/Review.stream.html.twig
        
                Show Lines

                                                    // ... lines 1 - 19
                            
            {% block update %}
        
                <turbo-stream action="replace" target="product-review-{{ entity.id }}">
        
                    <template>
        
                        {{ include('product/_review.html.twig', {
        
                            review: entity
        
                        }) }}
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 29 - 33

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Visually Highlighting new Items that Pop onto the Page

            Copy Code

                            Show All Lines

                        15 lines
            |
            templates/product/reviews.stream.html.twig
        
                Show Lines

                                                    // ... lines 1 - 6
                            
            <turbo-stream action="append" target="product-{{ product.id }}-review-list">
        
                <template>
        
                    {{ include('product/_review.html.twig', {
        
                        review: newReview,
        
                        isNew: true
        
                    }) }}
        
                </template>
        
            </turbo-stream>

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Smartly Updating Elements for all Users

            Copy Code

                            Show All Lines

                        14 lines
            |
            templates/product/reviews.stream.html.twig
        
                Show Lines

                                                    // ... lines 1 - 6
                            
            <turbo-stream action="append" target="product-{{ product.id }}-review-list">
        
                <template>
        
                    {{ include('product/_review.html.twig', {
        
                        review: newReview,
        
                    }) }}
        
                </template>
        
            </turbo-stream>

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Turbo Streams

            Copy Code

                        6 lines
            |
            templates/product/reviews.stream.html.twig
        
            <turbo-stream action="update" target="product-quick-stats">
        
                <template>
        
                    Will this <strong>really</strong> work???
        
                </template>
        
            </turbo-stream>

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Fancy things on Modal Form Success

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 24
                            
            {% block stream_success %}
        
                <turbo-stream action="prepend" targets="#voyage-list tbody">
        
                    <template>
        
                        {{ include('voyage/_row.html.twig') }}
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Fancy things on Modal Form Success

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 24
                            
            {% block stream_success %}
        
                <turbo-stream action="prepend" targets="#voyage-list tbody">
        
                    <template>
        
                        <tr><td>{{ voyage.purpose }}</td></tr>
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}

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

                        34 lines
            |
            templates/voyage/edit.html.twig
        
                Show Lines

                                                    // ... lines 1 - 25
                            
            {% block stream_success %}
        
                Show Lines

                                                    // ... lines 27 - 29
                            
                <turbo-stream action="replace" target="voyage-list-item-{{ voyage.id }}">
        
                    <template>{{ include('voyage/_row.html.twig') }}</template>
        
                </turbo-stream>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Turbo Frames

            Copy Code

                            Show All Lines

                        19 lines
            |
            tailwind.config.js
        
            const plugin = require('tailwindcss/plugin');
        
            /** @type {import('tailwindcss').Config} */
        
            module.exports = {
        
                Show Lines

                                                    // ... lines 5 - 12
                            
              plugins: [
        
                plugin(function({ addVariant }) {
        
                  addVariant('turbo-frame', 'turbo-frame[src] &')
        
                }),
        
              ],
        
            }

See Code Block in Script

7 8 9 10 11

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

	<turbo-frame id="product-review">
Show Lines	// ... lines 2 - 18
	{% if reviewForm\|default(false) %}
Show Lines	// ... lines 20 - 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>
	{% else %}
	<div class="alert alert-success">
	Thanks for your "real" review you "human" ?!
	</div>

	<a href="{{ path('app_product_reviews', {
	id: product.id
	}) }}">Love the product that much? Add another review!</a>
	{% endif %}
	</turbo-frame>

	<div
	class="modal fade"
	tabindex="-1"
	aria-hidden="true"
	data-modal-form-target="modal"
	>
	<div class="modal-dialog">
	<div class="modal-content">
Show Lines	// ... lines 9 - 14
	<turbo-frame
	class="modal-body"
	src="{{ modalSrc }}"
	id="{{ id }}"
	loading="lazy"
	data-turbo-form-redirect="true"
	>
	{{ modalContent\|default('Loading...') }}
	</turbo-frame>
	</div>
	</div>
	</div>

Show Lines	// ... lines 1 - 6
	<turbo-frame id="product-reviews-form">
Show Lines	// ... line 8
	{% for flash in app.flashes('review_success') %}
	{{ include('_toast.html.twig', {
	title: 'Success!',
	body: flash
	}) }}
	{% endfor %}
Show Lines	// ... lines 15 - 36
	</turbo-frame>

Show Lines	// ... lines 1 - 19
	{% block update %}
	<turbo-stream action="replace" target="product-review-{{ entity.id }}">
	<template>
	{{ include('product/_review.html.twig', {
	review: entity
	}) }}
	</template>
	</turbo-stream>
	{% endblock %}
Show Lines	// ... lines 29 - 33

Show Lines	// ... lines 1 - 6
	<turbo-stream action="append" target="product-{{ product.id }}-review-list">
	<template>
	{{ include('product/_review.html.twig', {
	review: newReview,
	isNew: true
	}) }}
	</template>
	</turbo-stream>

	<turbo-stream action="update" target="product-quick-stats">
	<template>
	Will this <strong>really</strong> work???
	</template>
	</turbo-stream>

Show Lines	// ... lines 1 - 24
	{% block stream_success %}
	<turbo-stream action="prepend" targets="#voyage-list tbody">
	<template>
	{{ include('voyage/_row.html.twig') }}
	</template>
	</turbo-stream>
	{% endblock %}

Show Lines	// ... lines 1 - 25
	{% block stream_success %}
Show Lines	// ... lines 27 - 29
	<turbo-stream action="replace" target="voyage-list-item-{{ voyage.id }}">
	<template>{{ include('voyage/_row.html.twig') }}</template>
	</turbo-stream>
	{% endblock %}

	const plugin = require('tailwindcss/plugin');

	/** @type {import('tailwindcss').Config} */
	module.exports = {
Show Lines	// ... lines 5 - 12
	plugins: [
	plugin(function({ addVariant }) {
	addVariant('turbo-frame', 'turbo-frame[src] &')
	}),
	],
	}