Search Results for: Turbo

585 search results for Turbo

Sort By

Video

Learn Symfony 6

30 Days with LAST Stack

Fantastic Modal UX with a Loading State

... Let's pick up where we left off yesterday. The Ajax-powered modal loads! Try to submit it. Uh oh - something went wrong. It went to some page that didn't have a <turbo-frame id="modal">... which is odd, because every ...

8:04

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Frame Loading Animations

            Copy Code

                            Show All Lines

                        186 lines
            |
            assets/styles/app.css
        
                Show Lines

                                                    // ... lines 1 - 18
                            
            turbo-frame {
        
                display: block;
        
            }
        
            turbo-frame[busy] {
        
                opacity: .7;
        
            }
        
            turbo-frame[busy] .frame-loading-hide, turbo-frame .frame-loading-show {
        
                display: none;
        
            }
        
            turbo-frame[busy] .frame-loading-show {
        
                display: inline-block;
        
            }
        
                Show Lines

                                                    // ... lines 31 - 186

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Turbo Stream Responses

            Copy Code

                            Show All Lines

                        38 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>
        
                <turbo-stream action="update" target="modal">
        
                    <template></template>
        
                </turbo-stream>
        
                <turbo-stream action="append" target="flash-container">
        
                    <template>{{ include('_flashes.html.twig') }}</template>
        
                </turbo-stream>
        
            {% endblock %}

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Smartly Updating Elements for all Users

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 2
                            
            <turbo-frame id="product-{{ product.id }}-review">
        
                Show Lines

                                                    // ... lines 4 - 13
                            
            </turbo-frame>
        
            <hr>
        
            <turbo-frame id="product-reviews-form">
        
                Show Lines

                                                    // ... lines 19 - 44
                            
            </turbo-frame>

See Code Block in Script

Comment

Learn Symfony 6

30 Days with LAST Stack

HTML dialog for Modals

... w https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index-810f44ef1a202a441e4866b7a4c72d11.js:7 notifyApplicationBeforeCachingSnapshot https://last-stack.wip/assets/vendor/@hotwired/turbo/turbo.index ...

ToG

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Prefetching the Next Page

            Copy Code

                            Show All Lines

                        16 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... lines 1 - 12
                            
            import './turbo/turbo-helper';
        
            import './turbo/prefetch';

See Code Block in Script

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Adding a Custom Request Header Based on the Frame

Turbo has had a lot of updates. Here's a much simpler way to get the same functionality using stimulus (I'm not using the global turbo-helper): Sorry, this text editor kind of screws up the code and changes some ...

Nick-F

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Processing Streams by Hand for Fun & Profit

Hello, My solution was to add the *data-turbo-cach"false"* directly into the div.alert within the turbo-stream from the stimulus controller. I aslo added the attribute to the default div.alert from base.html.twig for ...

Nondediou

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Entity Broadcast

            Copy Code

                            Show All Lines

                        25 lines
            |
            templates/broadcast/Review.stream.html.twig
        
            {% block create %}
        
                <turbo-stream action="update" target="product-{{ product.id }}-quick-stats">
        
                    <template>
        
                        {{ include('product/_quickStats.html.twig') }}
        
                    </template>
        
                </turbo-stream>
        
                <turbo-stream action="append" target="product-{{ product.id }}-review-list">
        
                    <template>
        
                        {{ include('product/_review.html.twig', {
        
                            review: newReview,
        
                            isNew: true
        
                        }) }}
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 17 - 25

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Multiple Updates in one Stream

            Copy Code

                        12 lines
            |
            templates/product/reviews.stream.html.twig
        
            <turbo-stream action="update" target="product-quick-stats">
        
                <template>
        
                    {{ include('product/_quickStats.html.twig') }}
        
                </template>
        
            </turbo-stream>
        
            <turbo-stream action="replace" target="product-review">
        
                <template>
        
                    {{ include('product/_reviews.html.twig') }}
        
                </template>
        
            </turbo-stream>

See Code Block in Script

Code

Learn Symfony 6

Doctrine, Symfony 6 & the Database

Forever Scroll with Turbo Frames

            Copy Code

                            Show All Lines

                        56 lines
            |
            templates/vinyl/browse.html.twig
        
                Show Lines

                                                    // ... lines 1 - 27
                            
                    <turbo-frame id="mix-browse-list-{{ pager.currentPage }}">
        
                        <div class="row">
        
                Show Lines

                                                    // ... lines 30 - 47
                            
                            {% if pager.hasNextPage %}
        
                                <turbo-frame id="mix-browse-list-{{ pager.nextPage }}" src="{{ pagerfanta_page_url(pager, pager.nextPage) }}" loading="lazy"></turbo-frame>
        
                            {% endif %}
        
                        </div>
        
                    </turbo-frame>
        
                Show Lines

                                                    // ... lines 53 - 56

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Frame Redirecting and Clearing the Snapshot Cache

            Copy Code

                            Show All Lines

                        48 lines
            |
            templates/product/_cart_add_controls.html.twig
        
            <turbo-frame
        
                id="add-to-cart-controls"
        
                data-turbo-form-redirect="true"
        
            >
        
                Show Lines

                                                    // ... lines 5 - 46
                            
            </turbo-frame>

See Code Block in Script

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

Hey @Marc! Hmm. That is weird. It *sounds* like Turbo is somehow being initialized *twice*. Internally, Turbo registers `turbo-frame` as a custom element (on CustomElementRegistry). So the error seems to be clearly ...

weaverryan

Read Full Comment

Code

Learn Symfony 6

30 Days with LAST Stack

Turbo Drive

            Copy Code

                            Show All Lines

                        26 lines
            |
            assets/controllers.json
        
            {
        
                "controllers": {
        
                Show Lines

                                                    // ... lines 3 - 12
                            
                    "@symfony/ux-turbo": {
        
                        "turbo-core": {
        
                            "enabled": true,
        
                            "fetch": "eager"
        
                        },
        
                        "mercure-turbo-stream": {
        
                            "enabled": false,
        
                            "fetch": "eager"
        
                        }
        
                    }
        
                },
        
                Show Lines

                                                    // ... line 24
                            
            }

See Code Block in Script

Code

Learn Symfony 6

AssetMapper: Modern JS with Zero Build System

Symfony UX Stimulus Packages

            Copy Code

                        16 lines
            |
            assets/controllers.json
        
            {
        
                "controllers": {
        
                    "@symfony/ux-turbo": {
        
                        "turbo-core": {
        
                            "enabled": true,
        
                            "fetch": "eager"
        
                        },
        
                        "mercure-turbo-stream": {
        
                            "enabled": false,
        
                            "fetch": "eager"
        
                        }
        
                    }
        
                },
        
                "entrypoints": []
        
            }

See Code Block in Script

Video

Learn Symfony 6

30 Days with LAST Stack

HTML dialog for Modals

... in app.js, we disabled a feature in Turbo called page cache... because it apparently doesn't always play nicely with view transitions. When view transitions become standard in Turbo 8, I'm guessing this won't be a ...

13:18

Comment

Learn Symfony 6

30 Days with LAST Stack

Turbo Drive

I just did: *composer require symfony/ux-turbo* at my Easy Admin project. My controllers.json was edited: ``` "controllers": { "@symfony/ux-turbo": { "turbo-core ...

Tim-V

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Frame Loading Animations

            Copy Code

                            Show All Lines

                        180 lines
            |
            assets/styles/app.css
        
                Show Lines

                                                    // ... lines 1 - 18
                            
            turbo-frame[busy] .frame-loading-hide, turbo-frame .frame-loading-show {
        
                display: none;
        
            }
        
            turbo-frame[busy] .frame-loading-show {
        
                display: inline-block;
        
            }
        
                Show Lines

                                                    // ... lines 25 - 180

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

More with fun Modals! Editing & Deleting

            Copy Code

                        9 lines
            |
            templates/_frameSuccessStreams.html.twig
        
            {% if app.request.headers.get('turbo-frame') == frame %}
        
                <turbo-stream action="append" target="flash-container">
        
                    <template>{{ include('_flashes.html.twig') }}</template>
        
                </turbo-stream>
        
                {% for stream in app.flashes('stream') %}
        
                    {{ stream|raw }}
        
                {% endfor %}
        
            {% endif %}

See Code Block in Script

Video

Learn JS Frameworks & Tools

Symfony UX: Turbo

Publishing Mercure Updates in PHP

We now know that we can easily subscribe to a Mercure topic in JavaScript. And, if we publish a message to that topic with <turbo-stream> HTML in it, our JavaScript will instantly notice & process it. Sweet! So far ...

3:47

4 5 6 7 8

Show Lines	// ... lines 1 - 18
	turbo-frame {
	display: block;
	}
	turbo-frame[busy] {
	opacity: .7;
	}
	turbo-frame[busy] .frame-loading-hide, turbo-frame .frame-loading-show {
	display: none;
	}
	turbo-frame[busy] .frame-loading-show {
	display: inline-block;
	}
Show Lines	// ... lines 31 - 186

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>
	<turbo-stream action="update" target="modal">
	<template></template>
	</turbo-stream>
	<turbo-stream action="append" target="flash-container">
	<template>{{ include('_flashes.html.twig') }}</template>
	</turbo-stream>
	{% endblock %}

Show Lines	// ... lines 1 - 2
	<turbo-frame id="product-{{ product.id }}-review">
Show Lines	// ... lines 4 - 13
	</turbo-frame>

	<hr>

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

Show Lines	// ... lines 1 - 12

	import './turbo/turbo-helper';
	import './turbo/prefetch';

	{% block create %}
	<turbo-stream action="update" target="product-{{ product.id }}-quick-stats">
	<template>
	{{ include('product/_quickStats.html.twig') }}
	</template>
	</turbo-stream>

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

Show Lines	// ... lines 1 - 27
	<turbo-frame id="mix-browse-list-{{ pager.currentPage }}">
	<div class="row">
Show Lines	// ... lines 30 - 47
	{% if pager.hasNextPage %}
	<turbo-frame id="mix-browse-list-{{ pager.nextPage }}" src="{{ pagerfanta_page_url(pager, pager.nextPage) }}" loading="lazy"></turbo-frame>
	{% endif %}
	</div>
	</turbo-frame>
Show Lines	// ... lines 53 - 56

	<turbo-frame
	id="add-to-cart-controls"
	data-turbo-form-redirect="true"
	>
Show Lines	// ... lines 5 - 46
	</turbo-frame>

	{
	"controllers": {
Show Lines	// ... lines 3 - 12
	"@symfony/ux-turbo": {
	"turbo-core": {
	"enabled": true,
	"fetch": "eager"
	},
	"mercure-turbo-stream": {
	"enabled": false,
	"fetch": "eager"
	}
	}
	},
Show Lines	// ... line 24
	}

	{% if app.request.headers.get('turbo-frame') == frame %}
	<turbo-stream action="append" target="flash-container">
	<template>{{ include('_flashes.html.twig') }}</template>
	</turbo-stream>
	{% for stream in app.flashes('stream') %}
	{{ stream\|raw }}
	{% endfor %}
	{% endif %}