Search Results for: Turbo

585 search results for Turbo

Sort By

Code

Learn JS Frameworks & Tools

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

Symfony UX: Turbo

Frame-Powered Inline Editing

            Copy Code

                            Show All Lines

                        53 lines
            |
            templates/product/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 16
                            
                        <h1>
        
                            {{ product.name }}
        
                            {% if is_granted('ROLE_ADMIN') %}
        
                                <a
        
                                    href="{{ path('product_admin_edit', {
        
                                        id: product.id
        
                                    }) }}"
        
                                    class="btn btn-sm btn-secondary"
        
                                    data-turbo-frame="product-info"
        
                                >Edit</a>
        
                            {% endif %}
        
                        </h1>
        
                Show Lines

                                                    // ... lines 29 - 53

See Code Block in Script

Code

Learn JS Frameworks & Tools

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

Symfony UX: Turbo

Adding a "Read More" Ajax Frame

            Copy Code

                            Show All Lines

                        34 lines
            |
            templates/cart/_featuredSidebar.html.twig
        
                Show Lines

                                                    // ... lines 1 - 16
                            
                        {% if showDescription %}
        
                            {{ featuredProduct.description }}
        
                        {% else %}
        
                            {{ featuredProduct.description|u.truncate(25)|trim }}...
        
                            <a
        
                                data-turbo-frame="cart-sidebar"
        
                                href="{{ path('_app_cart_product_featured', {
        
                                description: true,
        
                            }) }}">(read more)</a>
        
                        {% endif %}
        
                Show Lines

                                                    // ... lines 30 - 34

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Turbo Frames: Lazy Frames

            Copy Code

                            Show All Lines

                        34 lines
            |
            package.json
        
                Show Lines

                                                    // ... line 1
                            
                "devDependencies": {
        
                    "@babel/preset-react": "^7.0.0",
        
                    "@fortawesome/fontawesome-free": "^5.15.3",
        
                    "@hotwired/turbo": "^7.0.0-beta.5",
        
                    "@popperjs/core": "^2.9.1",
        
                    "@symfony/stimulus-bridge": "^2.0.0",
        
                Show Lines

                                                    // ... lines 8 - 34

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

The "defer" Attribute & Conditionally Activating Turbo

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 27
                            
                                <ul class="navbar-nav" data-turbo="true">
        
                                    <li class="nav-item">
        
                                        <a class="nav-link" href="{{ path('app_cart') }}">
        
                                            Shopping Cart ({{ count_cart_items() }})
        
                                        </a>
        
                                    </li>
        
                Show Lines

                                                    // ... lines 35 - 84

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

                        7 lines
            |
            templates/voyage/_delete_form.html.twig
        
            <form method="post" data-turbo-frame="_top" action="{{ path('app_voyage_delete', {'id': voyage.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
        
                Show Lines

                                                    // ... lines 2 - 5
                            
            </form>

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">
        
                        <form
        
                Show Lines

                                                    // ... lines 39 - 42
                            
                            data-turbo-frame="voyage-list"
        
                        >
        
                Show Lines

                                                    // ... lines 45 - 55
                            
                        </form>
        
                Show Lines

                                                    // ... lines 57 - 135
                            
                    </section>
        
                </div>
        
            {% endblock %}

See Code Block in Script

Video

Learn Symfony 6

30 Days with LAST Stack

Hello LAST Stack

... fun to match a whole new paradigm. It stands for Live Components, AssetMapper, Stimulus, and Turbo. It's a front-end stack that'll let us build a truly rich user interface - like a single-page application, with modals ...

4:01

Video

Learn Symfony 6

Upgrading & What's New in Symfony 6!

Form Improvements for Symfony 6

... .. though the status code is now 422. Symfony made this change for two reasons. First... it's just technically more correct to have an error status code if there is a validation error. And second, if you're using Turbo ...

4:13

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Toast Notifications

... not sure! :). I am not aware of a built-in way to do this (i.e. I am not aware of any `data-turbo="restore"` type of attribute you could add somewhere to opt into this). To do this, I would try to "cancel" the visit ...

weaverryan

Read Full Comment

Comment

Learn Symfony 5

All about Uploading Files in Symfony

Setup for Uploading Private Article References

... " onto the page so the new user shows up there. Stimulus can help do this pretty cleanly. If you were using Turbo (that's a whole other topic), you could probably use a Turbo frame + Turbo Streams to accomplish this. Or ...

weaverryan

Read Full Comment

Video

Learn JS Frameworks & Tools

Symfony UX: Turbo

Entity Broadcast

... There's one super cool feature of the Turbo Mercure UX package that we installed earlier that we have not talked about. And it's this: the ability to publish a Mercure update automatically whenever an entity is created ...

7:02

Video

Learn JS Frameworks & Tools

Symfony UX: Turbo

Listening Publishing

... " in Mercure - a topic is like a message key or category. Second, in PHP, publish a message to that topic containing Turbo Stream HTML. And finally, when our JavaScript receives a message, make it pass the Turbo Stream HTML ...

5:42

Video

Learn JS Frameworks & Tools

Symfony UX: Turbo

Fixing the Sweetalert Modal

... tackled some of the most annoying problems with Turbo, which is cleaning up the snapshot, let's organize all of the new event code to make room for more turbo event listeners later. That will put us in a great position to ...

7:14

Comment

Learn Symfony 5

All about Uploading Files in Symfony

Coding the API Upload Endpoint

... approaches to this: 1) Use Turbo Frames. You don't have to use the rest of Turbo (you could disable Turbo Drive), but this is a wonderful use-case for Turbo Frames. Wrap that entire widget in a ``. Then add all the ...

weaverryan

Read Full Comment

Comment

Learn Symfony 6

AssetMapper: Modern JS with Zero Build System

Deploying to Platform.sh

Hey Pasquale, Choosing between Stimulus/Turbo and frontend frameworks such as React or Vue.js depends on the type of application you're building, the complexity of the features, and your personal preferences among ...

Victor

Read Full Comment

Comment

Learn Symfony 7

Cosmic Coding with Symfony 7

Stimulus: Writing Pro JavaScript

Hey |mention:56475| , That https://symfonycasts.com/screencast/last-stack course is the latest indeed, but it includes more topics besides Stimulus & Turbo. If you're looking for a Stimulus and Turbo course in more ...

Victor

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Live Components

Hey @Cyril! That's an interesting situation! Internally, when you redirect from `LiveAction`, LiveComponents sees that and checks to see if `Turbo` is installed. If it is, it does a `Turbo.visit()` instead of a real ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Redirecting the Full Page from a Frame

Hi, I am sorry if I missed something, but I have taken this course to figure out how to make advanced dialogs using Turbo and Stimulus with Symfony. The solution in the tutorial looks fine, but I have noticed two things ...

Karloci

Read Full Comment

	{{ 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 - 16
	<h1>
	{{ product.name }}
	{% if is_granted('ROLE_ADMIN') %}
	<a
	href="{{ path('product_admin_edit', {
	id: product.id
	}) }}"
	class="btn btn-sm btn-secondary"
	data-turbo-frame="product-info"
	>Edit</a>
	{% endif %}
	</h1>
Show Lines	// ... lines 29 - 53

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 - 16

	{% if showDescription %}
	{{ featuredProduct.description }}
	{% else %}
	{{ featuredProduct.description\|u.truncate(25)\|trim }}...

	<a
	data-turbo-frame="cart-sidebar"
	href="{{ path('_app_cart_product_featured', {
	description: true,
	}) }}">(read more)</a>
	{% endif %}

Show Lines	// ... lines 30 - 34

Show Lines	// ... line 1
	"devDependencies": {
	"@babel/preset-react": "^7.0.0",
	"@fortawesome/fontawesome-free": "^5.15.3",
	"@hotwired/turbo": "^7.0.0-beta.5",
	"@popperjs/core": "^2.9.1",
	"@symfony/stimulus-bridge": "^2.0.0",
Show Lines	// ... lines 8 - 34

Show Lines	// ... lines 1 - 27

	<ul class="navbar-nav" data-turbo="true">
	<li class="nav-item">
	<a class="nav-link" href="{{ path('app_cart') }}">
	Shopping Cart ({{ count_cart_items() }})
	</a>
	</li>
Show Lines	// ... lines 35 - 84

	<form method="post" data-turbo-frame="_top" action="{{ path('app_voyage_delete', {'id': voyage.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
Show Lines	// ... lines 2 - 5
	</form>

Show Lines	// ... lines 1 - 27
	{% block body %}
	<div class="flex">
Show Lines	// ... lines 30 - 36
	<section class="flex-1 ml-10">
	<form
Show Lines	// ... lines 39 - 42
	data-turbo-frame="voyage-list"
	>
Show Lines	// ... lines 45 - 55
	</form>
Show Lines	// ... lines 57 - 135
	</section>
	</div>
	{% endblock %}