Search Results for: Turbo

590 search results for Turbo

Sort By

Code

Learn Symfony 6

Doctrine, Symfony 6 & the Database

Forever Scroll with Turbo Frames

            Copy Code

                            Show All Lines

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

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

                                                    // ... lines 29 - 49
                            
                    </turbo-frame>
        
                Show Lines

                                                    // ... lines 51 - 54

See Code Block in Script

Comment

Learn Symfony 6

30 Days with LAST Stack

Live Components

... added to the database from the modal. This second column is wrapped in a Turbo Frame. The challenge I'm facing is that the original Live Component in column one is loaded in a Turbo Frame. When there is a form success ...

Brandon

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Turbo Frames

Hey @Brandon! Hmm. Short answer: you can disable the turbo page cache. It's not a super important part of Turbo and it tends to be the toughest part to get right. Long answer: you said you're using `Tailwind Nav ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Reloading When JS/CSS Changes

In turbo 8 we also have "dynamic" for CSS, see https://github.com/hotwired/turbo/pull/1140 ...

Infourok

Read Full Comment

Comment

Learn JS Frameworks & Tools

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

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 - 29
                            
            {% block remove %}
        
                <turbo-stream action="remove" target="product-review-{{ id }}"></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

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

                                                    // ... lines 1 - 6
                            
            <turbo-stream action="replace" target="product-{{ product.id }}-review-list">
        
                <template>
        
                    {{ include('product/_reviews_list.html.twig') }}
        
                </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

                        35 lines
            |
            templates/product/_reviews.html.twig
        
            <div {{ turbo_stream_listen('product-reviews') }}></div>
        
            {{ include('product/_reviews_list.html.twig') }}
        
                Show Lines

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

                                                    // ... lines 8 - 33
                            
            </turbo-frame>

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Streams: Reusing Templates

            Copy Code

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

See Code Block in Script

Code

Learn JS Frameworks & Tools

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

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

Symfony UX: Turbo

turbo-frame inside a Modal

            Copy Code

                            Show All Lines

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

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

                                                    // ... lines 21 - 32

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Adding a "Read More" Ajax Frame

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 11
                            
                            <turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
        
                                Loading...
        
                            </turbo-frame>
        
                Show Lines

                                                    // ... lines 15 - 32

See Code Block in Script

Code

Learn JS Frameworks & Tools

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

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 Symfony 6

30 Days with LAST Stack

More with fun Modals! Editing & Deleting

            Copy Code

                        4 lines
            |
            templates/voyage/delete.html.twig
        
            {% block success_stream %}
        
                <turbo-stream action="remove" target="voyage-list-item-{{ id }}"></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

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

                                                    // ... lines 1 - 25
                            
            {% block stream_success %}
        
                <turbo-stream action="update" target="modal">
        
                Show Lines

                                                    // ... line 28
                            
                </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

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

                                                    // ... lines 1 - 25
                            
            {% block stream_success %}
        
                <turbo-stream action="update" target="modal">
        
                    <template></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

                        5 lines
            |
            templates/modalFrame.html.twig
        
            <turbo-frame id="modal">
        
                {% block body %}{% endblock %}
        
                {{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
        
            </turbo-frame>

See Code Block in Script

Code

Learn Symfony 6

AssetMapper: Modern JS with Zero Build System

Symfony UX Stimulus Packages

            Copy Code

                            Show All Lines

                        34 lines
            |
            importmap.php
        
                Show Lines

                                                    // ... lines 1 - 15
                            
            return [
        
                Show Lines

                                                    // ... lines 17 - 29
                            
                '@hotwired/turbo' => [
        
                    'url' => 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm',
        
                ],
        
            ];

See Code Block in Script

6 7 8 9 10

Show Lines	// ... lines 1 - 27
	<turbo-frame id="mix-browse-list-{{ pager.currentPage }}">
Show Lines	// ... lines 29 - 49
	</turbo-frame>
Show Lines	// ... lines 51 - 54

Show Lines	// ... lines 1 - 29
	{% block remove %}
	<turbo-stream action="remove" target="product-review-{{ id }}"></turbo-stream>
	{% endblock %}

Show Lines	// ... lines 1 - 6
	<turbo-stream action="replace" target="product-{{ product.id }}-review-list">
	<template>
	{{ include('product/_reviews_list.html.twig') }}
	</template>
	</turbo-stream>

	<div {{ turbo_stream_listen('product-reviews') }}></div>

	{{ include('product/_reviews_list.html.twig') }}
Show Lines	// ... lines 4 - 6
	<turbo-frame id="product-reviews-form">
Show Lines	// ... lines 8 - 33
	</turbo-frame>

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

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

Show Lines	// ... lines 1 - 11
	<turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
	Loading...
	</turbo-frame>
Show Lines	// ... lines 15 - 32

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

	{% block success_stream %}
	<turbo-stream action="remove" target="voyage-list-item-{{ id }}"></turbo-stream>
	{% endblock %}

Show Lines	// ... lines 1 - 25
	{% block stream_success %}
	<turbo-stream action="update" target="modal">
Show Lines	// ... line 28
	</turbo-stream>
	{% endblock %}

	<turbo-frame id="modal">
	{% block body %}{% endblock %}
	{{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
	</turbo-frame>

Show Lines	// ... lines 1 - 15
	return [
Show Lines	// ... lines 17 - 29
	'@hotwired/turbo' => [
	'url' => 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm',
	],
	];