Ajax-Powered HTML Updates & a CSS Transition
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.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeTime to make the Ajax call. In our new stimulus controller - cart-list - add a value called cartRefreshUrl, which will be a String. We're doing this, like we've done before, to avoid hardcoding the URL to the endpoint.
| // ... lines 1 - 2 | |
| export default class extends Controller { | |
| static values = { | |
| cartRefreshUrl: String, | |
| } | |
| // ... lines 7 - 11 | |
| } |
Fetching the Fresh HTML
Copy cartRefreshUrl, go to cart.html.twig, add a second argument to stimulus_controller() and set cartRefreshUrl to path() and the name of our route: _app_cart_list.
| // ... lines 1 - 2 | |
| {% block body %} | |
| // ... lines 4 - 13 | |
| <div | |
| // ... line 15 | |
| {{ stimulus_controller('cart-list', { | |
| cartRefreshUrl: path('_app_cart_list') | |
| }) }} | |
| > | |
| // ... line 20 | |
| </div> | |
| // ... lines 22 - 24 | |
| {% endblock %} | |
| // ... lines 26 - 27 |
Making the Ajax call is probably the easiest part. Down in removeItem(), say const response = await fetch(this.cartRefreshUrlValue). And, of course, as soon as we use await, we need to make the method async. Finish by replacing the entire HTML of this element with the response text: this.element.innerHTML = await response.text().
| // ... lines 1 - 2 | |
| export default class extends Controller { | |
| // ... lines 4 - 7 | |
| async removeItem(event) { | |
| const response = await fetch(this.cartRefreshUrlValue); | |
| this.element.innerHTML = await response.text(); | |
| } | |
| } |
We're done! Testing time. Oh, but an empty cart is no fun... let's add a few more items. And... excellent! Remove the red sofa, confirm and... oh! That was awesome! We get the entire, no-full-page-refresh experience with zero duplication and minimal JavaScript. I mean, check out how big the controller is! It's teenie tiny!
Stimulus Re-Initialized on the new HTML
And a super important, amazing thing just happened automatically. We add new HTML to the page. In fact, all of the HTML inside of this element is brand new. Normally, with JavaScript, that's a problem: any event listeners that we need on the elements - like a submit listener that opens a dialog - need to be manually reattached to the new elements.
But with Stimulus, it all... just works! We talked about this earlier. As soon as Stimulus saw these two new data-controller="submit-confirm" elements on the page, it instantiated two fresh new submit-confirm controllers. And everything behaves perfectly. Watch: if we click remove... that still works! We don't need to think about anything.
A Simple CSS Transition
I'm so excited about this that I want to add one last tiny extra detail to make it really smooth. I want to make the row fade out before it disappears. We can do this with a CSS transition.
Open up assets/styles/app.css and scroll down a bit: I'm looking for cart-item. Here it is. This is the class that's around each cart row. Add transition: opacity 500ms
| // ... lines 1 - 86 | |
| .cart .cart-item { | |
| // ... line 88 | |
| transition: opacity 500ms; | |
| } | |
| // ... lines 91 - 150 |
That doesn't actually make it transition. This just says: if the opacity ever changes... for any reason, I want you to change the opacity gradually to the new value over 500 milliseconds.
Below this, add another .cart .cart-item with .removing and set opacity: 0.
| // ... lines 1 - 91 | |
| .cart .cart-item.removing { | |
| opacity: 0; | |
| } | |
| // ... lines 95 - 150 |
This says, if the cart-item element also has a removing class, change the opacity to zero. Thanks to the transition, that change will happen gradually.
And where does this removing class come from? Good question! We are going to add it.
Back in the controller, right at the beginning, add event.currentTarget. That will get us the element that's around the entire row: this element here... which has the cart-item class on it. Then .classList.add('removing').
| // ... lines 1 - 2 | |
| export default class extends Controller { | |
| // ... lines 4 - 7 | |
| async removeItem(event) { | |
| event.currentTarget.classList.add('removing'); | |
| // ... lines 10 - 12 | |
| } | |
| } |
Try it! Refresh. Let's delete the blue sofa. Watch closely. Yes! It was quick, but it faded out before it was replaced. Remove the last one. That's so cool.
If your server is super fast, the fading out might not finish before the HTML reloads. If you care enough, you could delay the Ajax call a few milliseconds with setTimeout() or get super fancy with some extra promises.
Later, we'll talk about how to add CSS transitions in a different, more robust way. But this was easy and works nicely!
Next, we've talked a lot about Stimulus. But isn't this also a tutorial about Symfony UX? What is that? And how does it fit in? Let's find out by adding a JavaScript-powered chart to our page... by only writing PHP code.
Hey Ryan,
First of, loving it great series!
I noticed that the `cart-item` counter holds the number of items in the cart on top of the page. This however does not update since it is not within the extracted new twig template.
To achieve this, with my limited knowledge I see three options:
1) Make a second controller, that just fetches the number and replaces it. This would be two API calls when removing an item.
2) Return the entire page, but that seems a bit overkill.
3) Somehow extend the '_app_cart_list` to not only return the html, but also the new cart number. After we could dispatch in cart-list_controller an event to another controller to update the cart-item-number
What would be the recommended way to achieve this?