Hey @Jay Gee!
Yea, I hear you - the weather widget is a GREAT example of that jumping :).
> What if you had a 'load-this-FUTURE-content' trigger (maybe an empty turbo element??) that is for a not-yet-in-view-port ...
... :). However, we cover the mechanics of Mercure pretty well in this tutorial. The biggest difference would be that you would want to publish some JSON information to Mercure instead of turbo-stream HTML. Then, in ...
... information about new notifications, new surveys, new configuration (new menu item) etc. Now we are sure we will add Turbo for the web part and the idea of pushing new information and configuration to the website client is a great topic to consider. Thank you!
... each branch (say, open/closed) somewhere at the backend, also. Ideally in the session, rather than the DB, to reflect its transient nature. It feels like I'm missing something though, and even wondering if Turbo would solve this problem for me?
Thanks for listening,
Rik
|
|
// ... lines 1 - 27
|
|
{% block body %} |
|
<div class="flex"> |
|
|
// ... lines 30 - 36
|
|
<section class="flex-1 ml-10"> |
|
<form |
|
method="GET" |
|
action="{{ path('app_homepage') }}" |
|
class="mb-6 flex justify-between" |
|
data-controller="autosubmit" |
|
data-turbo-frame="voyage-list" |
|
> |
|
<div class="w-1/3 flex"> |
|
<input |
|
type="search" |
|
name="query" |
|
value="{{ app.request.query.get('query') }}" |
|
aria-label="Search voyages" |
|
placeholder="Search voyages" |
|
class="px-4 py-2 rounded bg-gray-800 text-white placeholder-gray-400" |
|
data-action="autosubmit#debouncedSubmit" |
|
autofocus |
|
> |
|
|
|
<twig:Modal> |
|
<twig:block name="trigger"> |
|
<twig:Button |
|
variant="link" |
|
type="button" |
|
data-action="modal#open" |
|
>Options</twig:Button> |
|
</twig:block> |
|
|
|
<h3 class="text-white text-lg font-semibold mb-2">Search Options</h3> |
|
<hr class="mb-4"> |
|
|
|
<div class="flex justify-end"> |
|
<twig:Button |
|
variant="success" |
|
data-action="modal#close" |
|
>See Results</twig:Button> |
|
</div> |
|
</twig:Modal> |
|
</div> |
|
|
// ... lines 77 - 79
|
|
</form> |
|
|
// ... lines 81 - 165
|
|
</section> |
|
</div> |
|
{% endblock %} |
See Code Block in Script
... calling `submit()` doesn't dispatch a `submit` event and so Turbo or other JavaScript can't hook into it).
So, this is what I'd recommend and it will "just work". Otherwise, you're trying to fight against Turbo. If adding ...
... = this.currentPageValue;
form.appendChild(input);
form.submit();
}
}
```
*4.* At the bottom of the layout.html.twig body, include a template fragment for the modal. The modal body is a turbo frame ...
Fancier Toasts Auto-close Fading
... adventure: diving into the third and final part of Turbo: Streams.
These are the Swiss army knife of Turbo, and will let us solve a whole new set of
problems.
Pagination Column Sorting
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 ...
3rd Party JavaScript Widgets
... weather".
However, Turbo does see the script tag that's inside of the new body - the script
tag that we have down at the bottom of base.html.twig - and it does re-execute
these lines. But this time, since the script with id ...
Migrating Encore AssetMapper
... for 3rd party packages.
And hey! It already added Stimulus and Turbo! Those are two of the packages from
package.json that we do need.
Will this work? Refresh and... kinda? We don't have Bootstrap CSS... which is why
it ...
Toast Notifications
... important yet, but it will be useful later when
we talk about Turbo streams.
So let's see if this works! Hit "Save" and... there we go! It's in a weird spot,
but it shows up.
To make this look nicer, let's take a trip to ...
Auto-Submitting Forms
... results. Naturally, thanks to Turbo Drive, it all happens via AJAX.
For our first trick, watch as we make the search update automatically as we type.
So we type and, without hitting enter, the list should update.
To do ...
Updating an Entity
... right back on this page. And, thanks to Turbo, this is all happening via Ajax
calls... which is a nice bonus.
The only problem is that... it's so smooth that it's not super obvious that my
vote was actually saved - other ...
Stimulus Sensible Beautiful JavaScript
... well as another tool we'll talk about in a few minutes
called Turbo - we can create highly-interactive apps that look and feel as
responsive as a single page app.
We have an entire tutorial on Stimulus, but let's get a ...
To use API Token Authentication or Not
... your API is your own JavaScript, save
yourself a lot of trouble and just use a login form. And if you do want to get
fancy and submit your login for via Ajax, you can totally do that. In fact, if you
use Turbo, that ...
useTransition in a Neat Reusable Module
... in the series - about Turbo - I hope to show prove that we can
have an even more dynamic and speedy app while writing even less custom
JavaScript.
Let us know what cool stuff your building. And, as always, if you have any
questions, we're here for you in the comments section.
Okay, friends, seeya next time!
Setting up Webpack Encore
... very similar to
having the scripts at the bottom of the page. But with the new setup, our browser
does start downloading the files slightly earlier. And this plays nicer with
Turbo - the topic of our next tutorial.
If ...
... even got to choose between multiple technologies that do in this direction (live-components, turbo, htmx as the most prominent ones).
I am just left with one question.
I am using live-components in combination with ...
590
Turbo
Filter Results