|
|
// ... 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 ...
... on full page refreshes and definitely doesn't play well with the DOM mutation that LiveComponents uses (and that more and more things use, like Turbo 8 morphing). Ideally, as morphing becomes more common, libraries like ...
... "use" statement for another namespace?"
```
ClassNotFoundError
in C:\Projects\mixed_vinyl\vendor\symfony\ux-turbo\src\Doctrine\BroadcastListener.php (line 138)
$class = get_parent_class($entity ...
... ) Disable Turbo on forms submits where you might know this will happen. This, I admit, is not a super great solution.
B) In theory (?), you could check the `Referer`. And if the current request is for the frontend, and ...
... find the Component for it, then call `compoent.render()` on that. Here are some docs on that - https://marcoroth.dev/posts/guide-to-custom-turbo-stream-actions
Because, ultimately, there is no pure HTML change that ...
585
Turbo
Filter Results