Search Results | SymfonyCasts

682 search results

Sort By

Comment

Learn JS

Symfony UX: Turbo

Multiple Updates in one Stream

Hey Ryan, I have a Turbo Stream update working well. On my site I have a small Stimulus controller that listens for changes in a form, and then on change submits the form automatically, successfully doing inline editing of objects from my database. But after…

Brandon

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Live Components

Ok, I'll try with turbo 8. Thank you very much for taking the time to reply to me after your live stream ;-) Cyril

Cyril

Read Full Comment

Code

Learn Symfony

30 Days with LAST Stack

Bonus: More on Flowbite

            Copy Code

                            Show All Lines

                        50 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... lines 1 - 5
                            
            import { initFlowbite } from 'flowbite';
        
                Show Lines

                                                    // ... lines 7 - 43
                            
            document.addEventListener('turbo:render', () => {
        
                initFlowbite();
        
            });
        
            document.addEventListener('turbo:frame-render', () => {
        
                initFlowbite();
        
            });

See Code Block in Script

Comment

Learn Symfony

30 Days with LAST Stack

Turbo Frames

The links remain hidden for me when the content is loaded in the turbo frame using src despite using turbo-frame:block in the class for the div. I've added the plugin in the tailwind.config.js as directed.

apphancer

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Fancy things on Modal Form Success

Ryan, I saw this when I was looking for something else so I updated to Turbo 8 and used the action="refresh". You stated: A) User makes an AJAX request to "refresh" whatever page they're on B) The new HTML is "morphed" onto the…

Brandon

Read Full Comment

Code

Learn Symfony

30 Days with LAST Stack

Modal Twig Component

            Copy Code

                            Show All Lines

                        42 lines
            |
            templates/components/Modal.html.twig
        
            <div
        
                {{ attributes.defaults({
        
                    'data-controller': 'modal',
        
                    'data-action': 'turbo:before-cache@window->modal#close',
        
                }) }}
        
            >
        
                Show Lines

                                                    // ... lines 7 - 40
                            
            </div>

See Code Block in Script

Code

Learn Symfony

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

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

Comment

Learn Symfony

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…

ToG

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Fancier Toasts: Auto-close & Fading

… I'd add a `data-turbo-temporary` attribute to the notification message itself so it's not added to the page cache if the user leaves the page before the notification is closed/removed (it would cause a weird behavior if they get back to…

tonysm

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Data Tables with Turbo Frames

Update: the issue with the page jumping to top after using data-turbo-action="advance" happens in Brave browser, not on Firefox, Chrome or Edge.

escobarcampos

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Data Tables with Turbo Frames

Thanks for this great tutorial! Adding data-turbo-action="advance" makes the page jump back to the top of the page again when searching, clicking on the sorting or paging links. Removing it fixes that again. I thought I missed something, but copied your exact…

escobarcampos

Read Full Comment

Code

Learn Symfony

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

Comment

Learn Symfony

AssetMapper: Modern JS with Zero Build System

Installing AssetMapper

Hey @pasquale_pellicani! Are you thinking about Stimulus & Turbo? Or about importmaps and something like AssetMapper? If it is importmaps and AssetMapper, that's a pretty easy answer: it's actually all still quite new in Rails also. Importmaps needed to mature to a certain…

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Stimulus

Stimulus Controllers

I am trying to use AssetMapper, stimulus and turbo. I have a custom bundle that I use. I am lost as to how to use/register the custom bundles's stimulus controllers to my main project. Could you please advise.

hrprakash

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Hey! I've never used Turbo before but I can't wait to discover it on your training! I already have a first question. Is it possible to use Turbo on EasyAdmin? :)

Fabrice

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Installing Turbo

Thanks for all the help. As for the versioning we have: * "symfony/ux-turbo": "^2.9", in composer.json * "@symfony/stimulus-bridge": "^3.2.0", in packages.json

Xavier-V

Read Full Comment

Comment

Learn JS

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

Comment

Learn Symfony 6

Doctrine, Symfony 6 & the Database

Forever Scroll with Turbo Frames

Hey guys, I was wondering, if using turbo frames in production, would that negatively impact a page's SEO score, considering the fact that the potential relevant search results would be initially hidden from the search engines? What's your thought on this? Thanks a…

roenfeldt

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Using a Full HTML Page to Populate a Frame

Hi Ryan. As far as I understood turbo frame is not SEO friendly right? By the way great Stimulus and Turbo tutorials.

Alcides

Read Full Comment

Show Lines	// ... lines 1 - 5
	import { initFlowbite } from 'flowbite';
Show Lines	// ... lines 7 - 43
	document.addEventListener('turbo:render', () => {
	initFlowbite();
	});
	document.addEventListener('turbo:frame-render', () => {
	initFlowbite();
	});

	<div
	{{ attributes.defaults({
	'data-controller': 'modal',
	'data-action': 'turbo:before-cache@window->modal#close',
	}) }}
	>
Show Lines	// ... lines 7 - 40
	</div>

	{% 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">
	<template></template>
	</turbo-stream>
	{% endblock %}

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 %}