Search Results | SymfonyCasts

682 search results

Sort By

Code

Learn JS

Symfony UX: Turbo

Full Page Redirect from a Frame

            Copy Code

                            Show All Lines

                        30 lines
            |
            assets/controllers/modal-form_controller.js
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            export default class extends Controller {
        
                Show Lines

                                                    // ... lines 6 - 8
                            
                connect() {
        
                    document.addEventListener('turbo:before-fetch-response', this.beforeFetchResponse);
        
                }
        
                Show Lines

                                                    // ... lines 12 - 17
                            
                beforeFetchResponse(event) {
        
                    if (!this.modal || !this.modal._isShown) {
        
                        return;
        
                    }
        
                    const fetchResponse = event.detail.fetchResponse;
        
                    if (fetchResponse.succeeded && fetchResponse.redirected) {
        
                        event.preventDefault();
        
                        Turbo.visit(fetchResponse.location);
        
                    }
        
                }
        
            }

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Close the Modal after turbo-frame Success

            Copy Code

                            Show All Lines

                        19 lines
            |
            assets/controllers/modal-form_controller.js
        
                Show Lines

                                                    // ... lines 1 - 3
                            
            export default class extends Controller {
        
                Show Lines

                                                    // ... lines 5 - 7
                            
                connect() {
        
                    this.element.addEventListener('turbo:submit-end', (event) => {
        
                        console.log(event);
        
                    });
        
                }
        
                Show Lines

                                                    // ... lines 13 - 17
                            
            }

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Close the Modal after turbo-frame Success

            Copy Code

                            Show All Lines

                        22 lines
            |
            assets/controllers/modal-form_controller.js
        
                Show Lines

                                                    // ... lines 1 - 3
                            
            export default class extends Controller {
        
                Show Lines

                                                    // ... lines 5 - 7
                            
                connect() {
        
                    this.element.addEventListener('turbo:submit-end', (event) => {
        
                        console.log(event);
        
                        if (event.detail.success) {
        
                            this.modal.hide();
        
                        }
        
                    });
        
                }
        
                Show Lines

                                                    // ... lines 16 - 20
                            
            }

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Full Page Redirect from a Frame

            Copy Code

                            Show All Lines

                        35 lines
            |
            assets/controllers/modal-form_controller.js
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            export default class extends Controller {
        
                Show Lines

                                                    // ... lines 6 - 13
                            
                disconnect() {
        
                    document.removeEventListener('turbo:before-fetch-response', this.boundBeforeFetchResponse);
        
                }
        
                Show Lines

                                                    // ... lines 17 - 33
                            
            }

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Prevent a turbo-frame from Rendering

            Copy Code

                            Show All Lines

                        22 lines
            |
            assets/controllers/modal-form_controller.js
        
                Show Lines

                                                    // ... lines 1 - 3
                            
            export default class extends Controller {
        
                Show Lines

                                                    // ... lines 5 - 7
                            
                connect() {
        
                    document.addEventListener('turbo:before-fetch-response', (event) => {
        
                        console.log(event);
        
                        if (event.detail.success) {
        
                            //this.modal.hide();
        
                        }
        
                    });
        
                }
        
                Show Lines

                                                    // ... lines 16 - 20
                            
            }

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Prevent a turbo-frame from Rendering

            Copy Code

                            Show All Lines

                        28 lines
            |
            assets/controllers/modal-form_controller.js
        
                Show Lines

                                                    // ... lines 1 - 3
                            
            export default class extends Controller {
        
                Show Lines

                                                    // ... lines 5 - 7
                            
                connect() {
        
                    document.addEventListener('turbo:before-fetch-response', (event) => {
        
                        console.log(event);
        
                        if (!this.modal || !this.modal._isShown) {
        
                            return;
        
                        }
        
                        const fetchResponse = event.detail.fetchResponse;
        
                        if (fetchResponse.succeeded && fetchResponse.redirected) {
        
                            event.preventDefault();
        
                            this.modal.hide();
        
                        }
        
                    });
        
                }
        
                Show Lines

                                                    // ... lines 22 - 26
                            
            }

See Code Block in Script

Code

Learn JS

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

Comment

Learn JS

Symfony UX: Turbo

With the sudden departure of the 2 maintainers of Turbo and Stimulus which leaves the projects pretty much dead for now, will this course still be released?

Michael S.

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Hi! I see that Turbo feature was merged into the main symfony-ux branch recently. When can we expect the first chapters on this course? I'm not trying to put any pressure on you guys, I know that you have a lot of things…

adeoweb

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

AJAX Modal!

Hey, I did run this is the console 'php bin/console importmap:require turbo-view-transitions'. I removed the old node_module folder and reinstall through 'npm install'. But still it gives the same error. I cannt find anything on how to install it with…

Bart-V

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

AJAX Modal!

…The turbo-frame gets the HTML from the view. But the modal_controller doesnt trigger to open the dialog. I have 2 errors in the browser console: ``` Uncaught SyntaxError: The requested module 'http://127.0.0.1:8000/assets/vendor/@symfony/stimulus-bridge/stimulus-bridge…

Bart-V

Read Full Comment

Comment

Learn Symfony

Cosmic Coding with Symfony 7

Turbo: Your Single Page App

…you have any idea why when i install symfony/ux-turbo, i have this exception : `An exception has been thrown during the rendering of a template ("Could not find an asset mapper path that points to the "turbo-core" controller in package "symfony/ux-turbo"…

Ludovic-J

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Form 422 Status & renderForm()

…within a Turbo Frame. Form submission works , but when I want to dynamically show form fields, the new fields are not shown. I see the request being sent in the Web Inspector, but the dynamic fields do not show. When i set the data-turbo:…

MichaelB

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Mercure Hub's JWT Authorization

Hi, I'm wondering about the template function `turbo_stream_listen` and authorization. I have not set the anonymous directive within the mercure config. The php publish method is using the configured jwt and the message is published. Whereas on the listening part I always…

Sucram

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Turbo Stream Responses

Hey |mention:58721| It's hard to tell what's causing that unexpected behavior from Turbo, the only thing that catches my attention is the Response status code, try with 301, or 302 Cheers!

MolloKhan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Form 422 Status & renderForm()

Do we still need to do the manipulation to make the forms compatible with turbo in symfony 6.4? I have the impression that it works correctly even without changing anything...

Jeremy-B

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

More with fun Modals! Editing & Deleting

The deeper we go, the more confusig turbo-frames are...

VinniV

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Testing Part 2: Functional Testing

Hello |mention:12406| Great catch. in fact with turbo you should first wait for it to appear on the page, and then wait for disappear, it can be achieved with some `spin()` functions like here described https://docs.behat.org/en/v2.5/cookbook/using…

sadikoff

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Testing Part 2: Functional Testing

I have issues with test execution speed :/ It looks like that `waitForTurboFrameLoad`check for any `turbo-frame[aria-busy="true"]` in the page is executed before Turbo adds the `aria-busy="true"` attribute to the frame. I had similar issue with the modal loading. The…

fbourigault

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Data Tables with Turbo Frames

Hello.. When I add `data-turbo-frame="voyage-list"` to the element (~3:22 in the video), I don't see any change when searching. It still does a full-page reload and the cursor resets to the beginning of the field. I have triple…

CDesign

Read Full Comment

Show Lines	// ... lines 1 - 4
	export default class extends Controller {
Show Lines	// ... lines 6 - 8
	connect() {
	document.addEventListener('turbo:before-fetch-response', this.beforeFetchResponse);
	}
Show Lines	// ... lines 12 - 17
	beforeFetchResponse(event) {
	if (!this.modal \|\| !this.modal._isShown) {
	return;
	}

	const fetchResponse = event.detail.fetchResponse;
	if (fetchResponse.succeeded && fetchResponse.redirected) {
	event.preventDefault();
	Turbo.visit(fetchResponse.location);
	}
	}
	}

Show Lines	// ... lines 1 - 3
	export default class extends Controller {
Show Lines	// ... lines 5 - 7
	connect() {
	this.element.addEventListener('turbo:submit-end', (event) => {
	console.log(event);
	});
	}
Show Lines	// ... lines 13 - 17
	}

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