Chapters

57 Chapters | 6:19:46 |

01

Turbo: Drive, Frames & Streams!

5:03
02

Installing Turbo

3:41
03

How Turbo Drive Works

9:37
04

Turbo-Friendly JavaScript

6:56
05

The "defer" Attribute & Conditionally Activating Turbo

4:02
06

Form 422 Status & renderForm()

9:05
07

Form Submits & The Preview Feature

7:06
08

The Problem of Snapshots & JavaScript Popups

9:46
09

Cleanup Before Snapshotting (e.g. Modals)

6:03
10

Fixing the Sweetalert Modal

7:14
11

Organizing our Turbo Events Code

3:12
12

3rd Party JavaScript Widgets

7:52
13

Fixing External JS + Analytics Code

8:46
14

Reloading When JS/CSS Changes

6:52
15

Manual Visits with Turbo

5:04
16

CSS Page Transitions

7:24
17

Polished CSS Transitions

8:58
18

Prefetching the Next Page

5:19
19

<link rel="prefetch">

7:37
20

Turbo Frames: Lazy Frames

6:32
21

Turbo Frames Look for & Load the Matching Frame

4:24
22

Using a Full HTML Page to Populate a Frame

7:24
23

Reliably Load External JS with Stimulus

9:57
24

Targeting Links in or out of the Frame

5:00
25

Adding a "Read More" Ajax Frame

8:02
26

Frame Loading Animations

7:45
27

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

7:50
28

Globally Disable Buttons on Form Submit

5:50
29

Frame-Powered Inline Editing

6:45
30

Frames & Form "action" Attributes

7:45
31

Frame Redirecting & Dynamic Frame Targets

6:21
32

turbo-frame inside a Modal

7:06
33

Lazy Modal & Big Cleanup

4:59
34

Close the Modal after turbo-frame Success

6:17
35

Prevent a turbo-frame from Rendering

6:34
36

Full Page Redirect from a Frame

6:05
37

Redirecting the Full Page from a Frame

5:14
38

Frame Redirecting and Clearing the Snapshot Cache

6:51
39

Manual "Restore" Visit

8:11
40

Adding a Custom Request Header Based on the Frame

7:02
41

Smart Frame Redirecting with the Server

6:29
42

Automatically Redirect Ajax Calls to /login

5:14
43

Turbo Streams

8:01
44

Streams: Reusing Templates

4:37
45

Multiple Updates in one Stream

7:00
46

Processing Streams by Hand for Fun & Profit

5:18
47

Mercure: Pushing Stream Updates Async

4:43
48

Running the Mercure Service in the symfony Binary

4:28
49

Listening & Publishing

5:42
50

Mercure Hub's JWT Authorization

6:58
51

Publishing Mercure Updates in PHP

3:47
52

Turbo Stream for Instant Review Update

8:50
53

Smartly Updating Elements for all Users

7:06
54

Visually Highlighting new Items that Pop onto the Page

5:26
55

Entity Broadcast

7:02
56

Broadcasting Frontend Changes on Entity Update/Remove

7:28
57

Toast Notifications

10:14

> JavaScript Frameworks & Tools > Symfony UX: Turbo

Buy Access to Course

37.

Redirecting the Full Page from a Frame

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Challenge

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

9 Comments

Sort By

Login or Register to join the conversation

Karloci 2 years ago

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.

First, after successfully submitting the form, the server will give you a response with the HTML of the page you are supposed to be redirected. This response contains new data which has been submitted in the form.

Second, if you put any flash messages after the form submission, the messages won't show up because the first response from the first reason is ignored. This response just serves to check if the form is submitted successfully or not.

So, I need help with Turbo to figure out if is there any way to avoid using Turbo visit but try to use the HTML response that the server gives you after the form is submitted and successfully validated. This will be much better because the data on the website will be automatically updated, flash messages will be visible, and the front end doesn't need to fetch any extra data because everything is already delivered as a response immediately after submission.

|

weaverryan SFCASTS Karloci 2 years ago

Hey @Karloci!

I might have a simple answer for you :). Have you checked out the modal system we created for the LAST stack tutorial? https://symfonycasts.com/screencast/last-stack It's a bit more recent, and I really tried to solve all of the issues there. This includes rendering the flash messages on success and updating the current page (through Turbo streams).

However, I do think you still have a nice question:

So, I need help with Turbo to figure out if is there any way to avoid using Turbo visit but try to use the HTML response that the server gives you after the form is submitted and successfully validated

This is interesting. What you're basically wanting is for the <form> in the modal to submit via a turbo-frame and load into the turbo frame if the validation fails. But as soon as validation is successful and you redirect, make this work like a real, full-page Turbo navigation. You're not alone to ask about this :) https://github.com/hotwired/turbo/issues/138

There are a bunch of workaround there. The simplest is to add an event listener that sees the 200 status code, then does a Turbo.visit() to the new URL. The problem is that, in reality, the target page is rendered twice: once on the form submit / redirect, then again with the Turbo.visit(). Unfortunately, it is that SECOND request that you ultimately render... and it will be missing the flash messages because they were rendered on the first request (whose response is ignored).

So my favorite work-around is this "flavor": https://github.com/hotwired/turbo/issues/138#issuecomment-1032866471

Basically, you stop using a turbo-frame and, on submit with an error, return a turbo-stream that updates the modal element. On successful submit, you redirect.

I wish there were a better solution where Turbo could just "use" the HTML from the initial redirect, bit it's not possible (and I half understand the technical reasons in Turbo why).

Cheers!

|

Hugo-Le-Goff weaverryan 1 year ago edited

Hey !

I've been struggling with this problem for a full day, spending time first to understand why my flashes weren't displayed. After figuring out, I found this post.

I don't really like the idea to stop using the frame in the modal which is really convenient.

So I figured out another workaround. When redirecting I also add a flash called _redirect. Then in my modal template I render flashes only if the request is from the modal frame AND if the _redirect flashbag is empty. Moreover, in my base template I render flashes only if the request is not from a modal frame.

The cool part is that the _redirect flashbag is cleaned up just by checking if it's not empty. And then on the next page flashes will be rendered correctly.

The counterpart is to use addFlash before every redirect, it can be automated by creating a service or even overriding the default redirectToRoute function maybe ?

Controller :

if ($form->isSubmitted() and $form->isValid()) {
    $entityManager->remove($domain);

    $entityManager->flush();

    $this->addFlash('success', 'Message !');

    $this->addFlash('_redirect', true);

    return $this->redirectToRoute('admin_category_domains', ['id' => $domain->getCategory()->getId()], Response::HTTP_SEE_OTHER);
}

Modal flash rendering :
(notice that app.flashes('_redirect') comes first in the if statement to process it in any cases, beacause if checking first app.request.headers.get('turbo-frame') == 'modal' and it's returned false, it would not process the second part of the AND)

{% if app.flashes('_redirect') is empty and app.request.headers.get('turbo-frame') == 'modal' %}
    <turbo-stream action="append" target="flash-container">
      <template>
        {{ include('_render_flashes.html.twig') }}
      </template>
    </turbo-stream>
    {% for stream in app.flashes('stream') %}
        {{ stream|raw }}
    {% endfor %}
{% endif %}

base template :

<!DOCTYPE html>
<html lang="fr" class="h-full bg-white">
  <head>
    ...
  </head>
  <body class="h-full">
    {% block body %}

    {% endblock %}
    {{ include('modal/_modal.html.twig') }}
    <div id="flash-container">
        {% if app.request.headers.get('turbo-frame') != 'modal' %}
          {{ include('_render_flashes.html.twig') }}
        {% endif %}
    </div>
  </body>
</html>

1 |

Victor SFCASTS Hugo-Le-Goff 1 year ago

Hey Hugo,

That's an interesting workaround, thanks for sharing it with others!

Cheers!

|

Ole 3 years ago

I'm sorry, I did not completly understand, how is the turbo-helper instantiated? Does/should it happen automatically, oder do i have to create it from within app.js manually?

|

weaverryan SFCASTS Ole 3 years ago

Hey @Ole!

No worries :). It IS imported from app.js - we did it WAY back on chapter 11 - https://symfonycasts.com/screencast/turbo/organize#codeblock-b154ca5114

Let me know if that helps!

Cheers!

|

Ole weaverryan 3 years ago

Thanks for the quick reply :-)

Well, OK, importing the js file seems to be enough, at least beforeFetchResponse is called now. But I have one more problem now:

Altough beforeFetchResponse is called, it is only called for the second request, which is already redirected. It is never called for the first redirect response (Status Code 302/303).

Is this the expected behaviour? Seems a little bit irritating to me.

Also, the second requests generate an exception:

`Twig\Error\LoaderError:

Unable to find template "default/default.turbo_stream.twig"`

(while calling that URL directly in the browser renders just fine using an completly different template).

Sorry, if this sounds a bit confusing.

|

Ole Ole 3 years ago edited

Well, this works for me now, I'm not sure what caused this, maybe it was an cache issue? I also added an empty "templates/default/default.turbo_stream.twig" file to the project tree. Anyway, thanks for your support :-)!

|

MolloKhan SFCASTS Ole 3 years ago

Yea, sometimes the cache is the problem. When I'm not sure if the my browser downloaded the most recent assets I just do a hard refresh

Cheers!

|

Symfony 5.2 Turbo 1.2

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
        "doctrine/annotations": "^1.0", // 1.13.1
        "doctrine/doctrine-bundle": "^2.2", // 2.3.2
        "doctrine/orm": "^2.8", // 2.9.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^6.1", // v6.1.4
        "symfony/asset": "5.3.*", // v5.3.0-RC1
        "symfony/console": "5.3.*", // v5.3.0-RC1
        "symfony/dotenv": "5.3.*", // v5.3.0-RC1
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/form": "5.3.*", // v5.3.0-RC1
        "symfony/framework-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/property-access": "5.3.*", // v5.3.0-RC1
        "symfony/property-info": "5.3.*", // v5.3.0-RC1
        "symfony/proxy-manager-bridge": "5.3.*", // v5.3.0-RC1
        "symfony/runtime": "5.3.*", // v5.3.0-RC1
        "symfony/security-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/serializer": "5.3.*", // v5.3.0-RC1
        "symfony/twig-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/ux-chartjs": "^1.1", // v1.3.0
        "symfony/ux-turbo": "^1.3", // v1.3.0
        "symfony/ux-turbo-mercure": "^1.3", // v1.3.0
        "symfony/validator": "5.3.*", // v5.3.0-RC1
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.2
        "symfony/yaml": "5.3.*", // v5.3.0-RC1
        "twig/extra-bundle": "^2.12|^3.0", // v3.3.1
        "twig/intl-extra": "^3.2", // v3.3.0
        "twig/string-extra": "^3.3", // v3.3.1
        "twig/twig": "^2.12|^3.0" // v3.3.2
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.3.0-RC1
        "symfony/maker-bundle": "^1.27", // v1.31.1
        "symfony/monolog-bundle": "^3.0", // v3.7.0
        "symfony/stopwatch": "^5.2", // v5.3.0-RC1
        "symfony/var-dumper": "^5.2", // v5.3.0-RC1
        "symfony/web-profiler-bundle": "^5.2", // v5.3.0-RC1
        "zenstruck/foundry": "^1.10" // v1.10.0
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.13.13
        "@fortawesome/fontawesome-free": "^5.15.3", // 5.15.3
        "@hotwired/turbo": "^7.0.0-beta.5", // 1.2.6
        "@popperjs/core": "^2.9.1", // 2.9.2
        "@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
        "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/Resources/assets", // 0.1.0
        "@symfony/ux-turbo-mercure": "file:vendor/symfony/ux-turbo-mercure/Resources/assets", // 0.1.0
        "@symfony/webpack-encore": "^1.0.0", // 1.3.0
        "bootstrap": "^5.0.0-beta2", // 5.0.1
        "chart.js": "^2.9.4",
        "core-js": "^3.0.0", // 3.13.0
        "jquery": "^3.6.0", // 3.6.0
        "react": "^17.0.1", // 17.0.2
        "react-dom": "^17.0.1", // 17.0.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "stimulus": "^2.0.0", // 2.0.0
        "stimulus-autocomplete": "https://github.com/weaverryan/stimulus-autocomplete#toggle-event-always-dist", // 2.0.0
        "stimulus-use": "^0.24.0-1", // 0.24.0-2
        "sweetalert2": "^11.0.8", // 11.0.12
        "webpack-bundle-analyzer": "^4.4.0", // 4.4.2
        "webpack-notifier": "^1.6.0" // 1.13.0
    }
}

Previous Challenge

Next Chapter