Search Results | SymfonyCasts

682 search results

Sort By

Comment

Learn Symfony

AssetMapper: Modern JS with Zero Build System

Is it possible (would you recommend) using react or vue, ux-turbo, stimulus, assetmapper AND webpack encore at the same time in one project? I really like assetmapper so i want to use it in my new project but i also would like to keep…

lexhartman

Read Full Comment

Code

Learn Symfony

30 Days with LAST Stack

AJAX Modal!

            Copy Code

                            Show All Lines

                        26 lines
            |
            templates/voyage/new.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <turbo-frame id="modal">
        
                <div class="m-4 p-4 bg-gray-800 rounded-lg">
        
                Show Lines

                                                    // ... lines 8 - 22
                            
                </div>
        
                </turbo-frame>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony

30 Days with LAST Stack

Fancy things on Modal Form Success

            Copy Code

                            Show All Lines

                        32 lines
            |
            templates/voyage/new.html.twig
        
                Show Lines

                                                    // ... lines 1 - 24
                            
            {% block stream_success %}
        
                <turbo-stream action="prepend" targets="#voyage-list tbody">
        
                    <template>
        
                        <tr><td>{{ voyage.purpose }}</td></tr>
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony

30 Days with LAST Stack

Fancy things on Modal Form Success

            Copy Code

                            Show All Lines

                        32 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>
        
            {% 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

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

                                                    // ... lines 1 - 25
                            
            {% block stream_success %}
        
                Show Lines

                                                    // ... lines 27 - 29
                            
                <turbo-stream action="replace" target="voyage-list-item-{{ voyage.id }}">
        
                    <template>{{ include('voyage/_row.html.twig') }}</template>
        
                </turbo-stream>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony

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 Symfony

30 Days with LAST Stack

More with fun Modals! Editing & Deleting

            Copy Code

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

See Code Block in Script

Code

Learn Symfony

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

Comment

Learn Symfony

30 Days with LAST Stack

HTML dialog for Modals

I think that this might have happened because I initially navigated to the page before I commented out the `if (shouldPerformTransition()) Turbo.cache.exemptPageFromCache();` in `app.js`.

ToG

Read Full Comment

Code

Learn Symfony

30 Days with LAST Stack

HTML dialog for Modals

            Copy Code

                            Show All Lines

                        83 lines
            |
            templates/voyage/index.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="m-4 p-4 bg-gray-800 rounded-lg">
        
                <div
        
                Show Lines

                                                    // ... line 8
                            
                    data-action="turbo:before-cache@window->modal#close"
        
                Show Lines

                                                    // ... line 10
                            
                >
        
                Show Lines

                                                    // ... lines 12 - 51
                            
                </div>
        
                Show Lines

                                                    // ... lines 53 - 80
                            
            </div>
        
            {% endblock %}

See Code Block in Script

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…

weaverryan

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Turbo Frames

…the JavaScript isn't written in a way where it doesn't like being removed from the page then re-added (this is what happens when you hit Back: Turbo originally took a snapshot of the previous page when you first navigated off of it…

weaverryan

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

                                                    // ... lines 38 - 56
                            
                        <turbo-frame id="voyage-list" data-turbo-action="advance" class="aria-busy:opacity-50 aria-busy:blur-sm transition-all">
        
                Show Lines

                                                    // ... lines 58 - 134
                            
                        </turbo-frame>
        
                    </section>
        
                </div>
        
            {% endblock %}

See Code Block in Script

Comment

Learn Symfony

30 Days with LAST Stack

…a bit to allow for Turbo to be used. I would LOVE to see this happen and even help with it. As you'll see in this tutorial, we could do some *really* nice things like modals, etc easily in EasyAdmin if it embraced Turbo. …

weaverryan

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

This looks sick. I've worked with stimulus and turbo for a while, implemented one feature using live components in my SaaS but haven't dug very deep because it's kind of hard to know where live components are superior to stimulus. I do…

Nick-F

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Installing Turbo

Hey @Xavier-V! > Module build failed: Module not found: "../../vendor/symfony/ux-turbo/assets/dist/turbo_controller.js" contains a reference to the file "@hotwired/stimulus". This actually makes me think we have... sort of a "version" problem. Before version 3 (so v2 and…

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Automatically Redirect Ajax Calls to /login

LATE reply on this, but I was just trying the app on Turbo 7.3, and it still looks like it fails... which I think makes sense. When we make an Ajax request and its redirected to `/login`, that's unfortunately "transparent" to JavaScript: they…

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Installing Turbo

…the error, I was using v1 of symfony-turbo, but now using version 2 I have a different problem "../../vendor/symfony/ux-turbo/assets/dist/turbo_controller.js" contains a reference to the file "@hotwired/turbo". my assets folder is not in the standard place

Xavier-V

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Toast Notifications

The way I see it, there are 2 approaches to target specific pages with mercure turbo streams. 1. You can add an identifier to the target element's ID, like you do in this course 2. You can add an identifier to the topic that…

Nick-F

Read Full Comment

Comment

Learn Symfony 6

Doctrine, Symfony 6 & the Database

Forever Scroll with Turbo Frames

Hey Seb, Yes, in this case, we embedded a turbo-frame containing the HTML of the subsequent pages into the main turbo-frame, which contains the first page results Cheers!

MolloKhan

Read Full Comment

Show Lines	// ... lines 1 - 4
	{% block body %}
	<turbo-frame id="modal">
	<div class="m-4 p-4 bg-gray-800 rounded-lg">
Show Lines	// ... lines 8 - 22
	</div>
	</turbo-frame>
	{% endblock %}

Show Lines	// ... lines 1 - 24
	{% block stream_success %}
	<turbo-stream action="prepend" targets="#voyage-list tbody">
	<template>
	<tr><td>{{ voyage.purpose }}</td></tr>
	</template>
	</turbo-stream>
	{% endblock %}

Show Lines	// ... lines 1 - 25
	{% block stream_success %}
Show Lines	// ... lines 27 - 29
	<turbo-stream action="replace" target="voyage-list-item-{{ voyage.id }}">
	<template>{{ include('voyage/_row.html.twig') }}</template>
	</turbo-stream>
	{% endblock %}

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

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

Show Lines	// ... lines 1 - 27
	{% block body %}
	<div class="flex">
Show Lines	// ... lines 30 - 36
	<section class="flex-1 ml-10">
Show Lines	// ... lines 38 - 56
	<turbo-frame id="voyage-list" data-turbo-action="advance" class="aria-busy:opacity-50 aria-busy:blur-sm transition-all">
Show Lines	// ... lines 58 - 134
	</turbo-frame>
	</section>
	</div>
	{% endblock %}