Search Results for: Turbo

585 search results for Turbo

Sort By

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Hi Ryan Thanks. Yes I wanted to use new Update() or Entity Broadcast to render user specific views. Returning the turbo frame with the src to get this content works well e.g. ``` // _list.stream.html.twig ...

Dave B.

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Reloading When JS/CSS Changes

Hey Ewald V.! That's... actually a great question! There are two parts to this: A) In Turbo, they need to know which things we consider as "assets" that should be tracked. So, they make us add this attribute. Maybe ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Turbo Frames: Lazy Frames

... IIRC it's a change in Turbo, so now no error is supposed to happen anymore.

jmsche

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Automatically Redirect Ajax Calls to /login

I think this chapter can be skipped for users of a recent version of Turbo :) ...

jmsche

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Lazy Modal & Big Cleanup

            Copy Code

                            Show All Lines

                        104 lines
            |
            src/Controller/ProductAdminController.php
        
                Show Lines

                                                    // ... lines 1 - 81
                            
                    return $this->renderForm('product_admin/edit.html.twig', [
        
                        'product' => $product,
        
                        'form' => $form,
        
                        'formTarget' => $request->headers->get('Turbo-Frame', '_top')
        
                    ]);
        
                }
        
                Show Lines

                                                    // ... lines 89 - 104

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Form Submits & The Preview Feature

            Copy Code

                            Show All Lines

                        36 lines
            |
            templates/registration/register.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block metas %}
        
                <meta name="turbo-cache-control" content="no-preview">
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 8 - 36

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 - 11
                            
                    {% endblock %}
        
                </head>
        
                <body data-turbo="false">
        
                    <div class="page-top">
        
                        <header class="header px-2">
        
                Show Lines

                                                    // ... lines 17 - 84

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

HTML dialog for Modals

            Copy Code

                            Show All Lines

                        34 lines
            |
            templates/_flashes.html.twig
        
            {% for message in app.flashes('success') %}
        
                <div
        
                Show Lines

                                                    // ... lines 3 - 4
                            
                    data-turbo-temporary
        
                Show Lines

                                                    // ... lines 6 - 7
                            
                >
        
                Show Lines

                                                    // ... lines 9 - 31
                            
                </div>
        
            {% endfor %}

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

HTML dialog for Modals

            Copy Code

                            Show All Lines

                        42 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... lines 1 - 20
                            
            document.addEventListener('turbo:load', () => {
        
                // View Transitions don't play nicely with Turbo cache
        
                // if (shouldPerformTransition()) Turbo.cache.exemptPageFromCache();
        
            });
        
                Show Lines

                                                    // ... lines 25 - 42

See Code Block in Script

Code

Learn Symfony 6

AssetMapper: Modern JS with Zero Build System

Preloading

            Copy Code

                            Show All Lines

                        37 lines
            |
            importmap.php
        
                Show Lines

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

                                                    // ... lines 17 - 23
                            
                '@hotwired/stimulus' => [
        
                Show Lines

                                                    // ... line 25
                            
                    'preload' => true,
        
                ],
        
                '@symfony/stimulus-bundle' => [
        
                Show Lines

                                                    // ... line 29
                            
                    'preload' => true,
        
                ],
        
                '@hotwired/turbo' => [
        
                Show Lines

                                                    // ... line 33
                            
                    'preload' => true,
        
                ],
        
            ];

See Code Block in Script

Blog

Live Stream 8 Live Component JavaScript Internals

... & the new UX 2.14.1 version 1:30 Pull request for the icon package! 3:30 Monthly release structure for UX 9:30 The new Type component for Symfony 11:45 Turbo 8 is out! 15:00 Hello LiveComponents JavaScript 18:40 What happens ...

By weaverryan

Read Full Post

Blog

Your LAST Stack

... Components A AssetMapper S Stimulus (or Symfony) T Turbo (or Twig) LAST stack is about web standards. AssetMapper (stable in Symfony 6.4) leverages importmaps: a standard that's now supported on all major browsers (and ...

By weaverryan and stof

Read Full Post

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

... controllers. It is amazing when you get symfony ux in there. I add/remove rows on my index pages and update menu badges in real time with mercure and turbo streams from webhooks. Also, overriding any of the form templates and ...

Nick-F

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Stimulus

Listening to An Event From Another Controller

Hi Ryan, nice work!! Just a note. When I have nested stimulus controllers and the child one inside a turbo frame like this: ``` ``` The method_name in controller_2 is ...

Alcides

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Hi Thanks for all the great content. Was just wondering if there is some way to keep the existing Turbo frame content instead of replacing it with a temporary loading icon etc until new frame content is rendered? For ...

Dave B.

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Stimulus

Free 3rd Party Controllers!

... ;) > I will also say that Stimulus integration has been the most exciting thing for me since learning Symfony! I feel that same way - along with Turbo. It's completely changed the JavaScript paradigm for me, and ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

How Turbo Drive Works

... JavaScript, then Turbo wouldn't be active and each "click" on your site would be a normal full page refresh, and so that would work perfectly too. And third, in case it helps you be more confident, Turbo (as Turbolinks) has been around for *years* and I can't find anyone complaining about SEO problems after switching to it. Cheers!

weaverryan

Read Full Comment

Comment

Learn Symfony 5

API Platform Part 2: Security

Logout & Passing API Data to JS on Page Load

... appropriate. For others, we talked about how to handle this with Turbo Frames just a few days ago https://symfonycasts.com/screencast/turbo/login-redirect Cheers!

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

... don't think we will have it earlier than in May :) I would like to suggest you to subscribe to this course on the course intro page: https://symfonycasts.com/screencast/turbo - we will notify you when we will start releasing it. P.S. We're very excited about this Turbo feature as well in SymfonyCasts! ;) Cheers!

Victor

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

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

            Copy Code

                        29 lines
            |
            templates/product/_reviews.html.twig
        
            <turbo-frame id="product-review">
        
            {% for review in product.reviews %}
        
                <div class="component-light my-3 p-3">
        
                    <p><i class="fas fa-user-circle me-2"></i>{{ review.owner.email }} <i class="fas fa-star ms-4"></i> {{ review.stars }}/5</p>
        
                    <div>
        
                        {{ review.content }}
        
                    </div>
        
                </div>
        
            {% else %}
        
                <p>This product has not been reviewed yet!</p>
        
            {% endfor %}
        
            <hr>
        
            {% if reviewForm|default(false) %}
        
                <h4>Post your own review</h4>
        
                {{ form_start(reviewForm, {
        
                    'action': path('app_product_reviews', { id: product.id })
        
                }) }}
        
                    {{ form_row(reviewForm.stars) }}
        
                    {{ form_row(reviewForm.content) }}
        
                    <button class="btn btn-primary" formnovalidate>Add Review</button>
        
                {{ form_end(reviewForm) }}
        
            {% elseif not is_granted('ROLE_USER') %}
        
                <p><a href="{{ path('app_login') }}">Log in</a> to post your review</p>
        
            {% endif %}
        
            </turbo-frame>

See Code Block in Script

Show Lines	// ... lines 1 - 81

	return $this->renderForm('product_admin/edit.html.twig', [
	'product' => $product,
	'form' => $form,
	'formTarget' => $request->headers->get('Turbo-Frame', '_top')
	]);
	}
Show Lines	// ... lines 89 - 104

Show Lines	// ... lines 1 - 4
	{% block metas %}
	<meta name="turbo-cache-control" content="no-preview">
	{% endblock %}
Show Lines	// ... lines 8 - 36

Show Lines	// ... lines 1 - 11
	{% endblock %}
	</head>
	<body data-turbo="false">
	<div class="page-top">
	<header class="header px-2">
Show Lines	// ... lines 17 - 84

	{% for message in app.flashes('success') %}
	<div
Show Lines	// ... lines 3 - 4
	data-turbo-temporary
Show Lines	// ... lines 6 - 7
	>
Show Lines	// ... lines 9 - 31
	</div>
	{% endfor %}

Show Lines	// ... lines 1 - 20
	document.addEventListener('turbo:load', () => {
	// View Transitions don't play nicely with Turbo cache
	// if (shouldPerformTransition()) Turbo.cache.exemptPageFromCache();
	});
Show Lines	// ... lines 25 - 42

Show Lines	// ... lines 1 - 15
	return [
Show Lines	// ... lines 17 - 23
	'@hotwired/stimulus' => [
Show Lines	// ... line 25
	'preload' => true,
	],
	'@symfony/stimulus-bundle' => [
Show Lines	// ... line 29
	'preload' => true,
	],
	'@hotwired/turbo' => [
Show Lines	// ... line 33
	'preload' => true,
	],
	];

	<turbo-frame id="product-review">
	{% for review in product.reviews %}
	<div class="component-light my-3 p-3">
	<p><i class="fas fa-user-circle me-2"></i>{{ review.owner.email }} <i class="fas fa-star ms-4"></i> {{ review.stars }}/5</p>
	<div>
	{{ review.content }}
	</div>
	</div>
	{% else %}
	<p>This product has not been reviewed yet!</p>
	{% endfor %}

	<hr>

	{% if reviewForm\|default(false) %}
	<h4>Post your own review</h4>
	{{ form_start(reviewForm, {
	'action': path('app_product_reviews', { id: product.id })
	}) }}
	{{ form_row(reviewForm.stars) }}
	{{ form_row(reviewForm.content) }}

	<button class="btn btn-primary" formnovalidate>Add Review</button>
	{{ form_end(reviewForm) }}
	{% elseif not is_granted('ROLE_USER') %}
	<p><a href="{{ path('app_login') }}">Log in</a> to post your review</p>
	{% endif %}
	</turbo-frame>