… element. Ah, the problem is that, even though we closed the modal, the turbo-frame still followed the redirect to the product review page. Then, like it always does, it looked for a with id="product-info…

…Copy the modal code, remove it, create a new method below called closeModal() and paste. Then, back up inside the turbo:before-cache callback, say this.closeModal(). Repeat this for Sweetalert: copy all of the Sweetalert code, create a new method called closeSweetalert(), paste... and..…

…well, we learned why in the last chapter! By adding them here, they won't be re-executed on every Turbo visit. But normally, adding script tags to the head is bad for performance. When your browser sees a script tag, it freezes the page…

…new review" form submits, we want the page to not navigate away: we want everything to happen in this reviews area. Isn't that... exactly what Turbo Frames are for? If we wrapped this entire template in a ... wouldn't that do it…

Turbo streams would be much more interesting if we could subscribe to something that could send us stream updates in real time. Like, imagine we're viewing a page... and generally minding our own business. At the same moment, someone else - on the other side…

Our Turbo-frame-powered modal is now almost perfect. When we submit successfully, it closes the modal. But... dang! That's all it did. The product list did not update... so it's not super obvious that this worked! Look at the console log of…

With Turbo Drive, when we click a link or submit a form, and that takes longer than 500 milliseconds to load, we get a loading animation on the top of the page... which we don't see here because this is all loading fast, but…

…console. Ooh. Form responses must redirect to another location. Okay. Part of what makes Turbo so cool is that you get the single page app experience without making any changes to your server code. But the one big exception to that rule is forms. Don…

Thanks to the turbo-frame system, we're now lazily-loading just part of the weather page down in the footer. And... notice that this is working... which actually proves something: script tags inside frames are executed. Let me find that frame... here it is…

How does Turbo handle when a JavaScript or CSS file that's downloaded onto our page changes? When we navigate, it's smart enough to merge any new CSS or JS into our head element without duplicating anything that's already there. But what about…

…if you need to load an external widget - like our weather widget - but that widget might be loaded onto the page at any time, even via a custom, non-Turbo Drive Ajax call. This solution basically involves running the same code that we have here…

Our modal is now powered by a turbo-frame: the form was Ajax loaded by the frame system. But when we submit, wah, wah. It submits to the whole page. Let's see what's going on. Reopen the modal and inspect it. Hmm. Ah…

Where else could we use our new turbo frame redirect system? Go to the cart. On the featured product sidebar, we could leverage a frame around the cart controls. Right now, this form submits to the whole page. And so, on success, the entire page…

One of the cooler features of Turbo Drive is its snapshot feature, which we know about already. When we visit a page that we've already been to, like Office Supplies or Furniture, it instantly shows the snapshot while it waits for the new Ajax…

There's one super cool feature of the Turbo Mercure UX package that we installed earlier that we have not talked about. And it's this: the ability to publish a Mercure update automatically whenever an entity is created, updated or removed. It's a…

…form via Ajax and reload the cart area also via Ajax. Once you start using Turbo, you absolutely can still do stuff like this... but you'll find that it's less necessary. In this case, if Turbo were active, after confirming in the modal…

…new number. In addition to doing this, I want to invent a Turbo Stream that adds a flash message to the top of the page. First, we need to be able to target the flash area so that we can put stuff into it. In…

…function onKernelResponse() method with a ResponseEvent $event argument. Cool. So the logic inside of here will be fairly simple: if the request has the Turbo-Frame-Redirect header and the response is a redirect, then we're going to change the response to something else.…

Welcome to Day 13! We're going to tap the breaks on Stimulus and Turbo and only work with Symfony and Twig today. Our goal is to add pagination and column sorting to this list. I like to add pagination with Pagerfanta. I love this…

…Stimulus & Turbo - puts the joy, productivity & simplicity back into creating rich, frontend experiences. And in 30 days, I'll prove it: AssetMapper fundamentals JavaScript Modules? ESM? 3rd party packages with importmap:require CSS Tailwind CSS! Stimulus UXs Package Turbo Drive Turbo Frames Popover & Stimulus Components…