Thanks Ryan! Your solution is working well but, you're right :
> when you redirect from LiveAction, LiveComponents sees that and checks to see if Turbo is installed. If it is, it does a Turbo.visit() instead of a real ...
... Hey again!
> but is this topic of the turbo and the hotwire very new
Fortunately, no. Both Turbo and Stimulus are about 10 (yes 10!) years old. Though the most recent version of both was released 2-3 years ago ...
Hello,
I am using UX Turbo, I watched this doc : https://github.com/symfony/ux-turbo/#sending-async-changes-using-mercure-a-chat
I wanted to know if it is possible to push data to selected users through a query, but ...
... the template for a page, you embed a controller (`render(controller())` correct?) that renders a contact form.
Question: (ignoring Turbo for a moment - just pretend you're on a non-Turbo site), where does that contact ...
... closer at the JS code... though your code looks pretty similar to the core Mercure + Turbo code (it's not exactly the same use-case, but the EventSource stuff is the same - https://github.com/symfony/ux/blob/main/src/Turbo/Bridge/Mercure/Resources/assets/src/turbo_stream_controller.js )
Sorry I can't be more help!
Cheers!
Hey Nick F.!
You're right! That was some sloppiness by me. I added data-turbo-cache="false" to the "flash-container" element. And so, it's removed when cleaning up the page. That's... not really want I want to do ...
Hey Ruslan!
That's a pretty fair question :). My choice would be a multi-page app with Twig, but with Turbo and Stimulus immediately so that you can get the "single page app" feel. However, if what you're building is ...
|
|
// ... lines 1 - 3
|
|
<turbo-frame id="product-info" target="_top" class="row pt-3 product-show"> |
|
<div class="col-4"> |
|
<img |
|
alt="{{ product.name }}" |
|
src="{{ asset('/uploads/products/'~product.imageFilename) }}" |
|
class="d-block" |
|
> |
|
<div class="p-2"> |
|
<small>brought to you by </small> |
|
<small class="d-inline">{{ product.brand }}</small> |
|
</div> |
|
</div> |
|
<div class="col-8 px-3"> |
|
<h1> |
|
{{ product.name }} |
|
{% if is_granted('ROLE_ADMIN') %} |
|
<a |
|
href="{{ path('product_admin_edit', { |
|
id: product.id |
|
}) }}" |
|
class="btn btn-sm btn-secondary" |
|
>Edit</a> |
|
{% endif %} |
|
</h1> |
|
<div> |
|
{{ product.description }} |
|
</div> |
|
<div class="p-3 mt-4 d-flex justify-content-between flex-wrap flex-lg-nowrap"> |
|
<div> |
|
<strong>{{ product.priceString|format_currency('USD') }}</strong> |
|
<br> |
|
<strong>{{ product.reviews|length }}</strong> Reviews |
|
<br/> |
|
<strong>{{ product.averageStars }}/5</strong><i class="fas fa-star ms-2"></i> |
|
</div> |
|
<div> |
|
{{ include('product/_cart_add_controls.html.twig') }} |
|
</div> |
|
</div> |
|
</div> |
|
</turbo-frame> |
|
|
// ... lines 45 - 52
|
See Code Block in Script
|
|
// ... lines 1 - 2
|
|
{% block productBody %} |
|
<div class="row pt-3 product-show"> |
|
<turbo-frame id="product-info" target="_top"> |
|
<div class="col-4"> |
|
<img |
|
alt="{{ product.name }}" |
|
src="{{ asset('/uploads/products/'~product.imageFilename) }}" |
|
class="d-block" |
|
> |
|
<div class="p-2"> |
|
<small>brought to you by </small> |
|
<small class="d-inline">{{ product.brand }}</small> |
|
</div> |
|
</div> |
|
<div class="col-8 px-3"> |
|
<h1> |
|
{{ product.name }} |
|
{% if is_granted('ROLE_ADMIN') %} |
|
<a |
|
href="{{ path('product_admin_edit', { |
|
id: product.id |
|
}) }}" |
|
class="btn btn-sm btn-secondary" |
|
>Edit</a> |
|
{% endif %} |
|
</h1> |
|
<div> |
|
{{ product.description }} |
|
</div> |
|
<div class="p-3 mt-4 d-flex justify-content-between flex-wrap flex-lg-nowrap"> |
|
<div> |
|
<strong>{{ product.priceString|format_currency('USD') }}</strong> |
|
<br> |
|
<strong>{{ product.reviews|length }}</strong> Reviews |
|
<br/> |
|
<strong>{{ product.averageStars }}/5</strong><i class="fas fa-star ms-2"></i> |
|
</div> |
|
<div> |
|
{{ include('product/_cart_add_controls.html.twig') }} |
|
</div> |
|
</div> |
|
</div> |
|
</turbo-frame> |
|
</div> |
|
|
// ... lines 47 - 54
|
See Code Block in Script
|
<!DOCTYPE html> |
|
<html> |
|
|
// ... lines 3 - 15
|
|
<body class="bg-black text-white font-mono"> |
|
|
// ... lines 17 - 54
|
|
<twig:Modal> |
|
<turbo-frame |
|
|
// ... lines 57 - 62
|
|
</turbo-frame> |
|
<twig:block name="loading_template"> |
|
<div class="bg-space-pattern bg-cover rounded-lg p-8"> |
|
<div class="space-y-2"> |
|
<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div> |
|
<div class="h-4 bg-gray-700 rounded animate-pulse"></div> |
|
<div class="h-4 bg-gray-700 rounded animate-pulse"></div> |
|
<div class="h-4"></div> |
|
<div class="h-4 bg-gray-700 rounded animate-pulse"></div> |
|
<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div> |
|
<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div> |
|
<div class="h-4"></div> |
|
<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div> |
|
</div> |
|
</div> |
|
</twig:block> |
|
</twig:Modal> |
|
</body> |
|
</html> |
See Code Block in Script
|
|
// ... lines 1 - 4
|
|
{% block body %} |
|
<div class="flex"> |
|
|
// ... lines 7 - 13
|
|
<section class="flex-1 ml-10"> |
|
|
// ... lines 15 - 29
|
|
<div class="bg-gray-800 p-4 rounded"> |
|
<table class="w-full text-white"> |
|
|
// ... lines 32 - 38
|
|
<tbody> |
|
{% for voyage in voyages %} |
|
<tr class="border-b border-gray-700 {% if loop.index is odd %} bg-gray-800 {% else %} bg-gray-700 {% endif %}"> |
|
|
// ... line 42
|
|
<td class="px-2 whitespace-nowrap"> |
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<template data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame id="planet-card-{{ voyage.planet.id }}" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</template> |
|
</div> |
|
</td> |
|
|
// ... line 67
|
|
</tr> |
|
{% endfor %} |
|
</tbody> |
|
</table> |
|
</div> |
|
|
// ... lines 73 - 76
|
|
</section> |
|
</div> |
|
{% endblock %} |
See Code Block in Script
|
|
// ... lines 1 - 4
|
|
{% block body %} |
|
<div class="flex"> |
|
|
// ... lines 7 - 13
|
|
<section class="flex-1 ml-10"> |
|
|
// ... lines 15 - 29
|
|
<div class="bg-gray-800 p-4 rounded"> |
|
<table class="w-full text-white"> |
|
|
// ... lines 32 - 38
|
|
<tbody> |
|
{% for voyage in voyages %} |
|
<tr class="border-b border-gray-700 {% if loop.index is odd %} bg-gray-800 {% else %} bg-gray-700 {% endif %}"> |
|
|
// ... line 42
|
|
<td class="px-2 whitespace-nowrap"> |
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<template data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame id="planet-card-{{ voyage.planet.id }}" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</template> |
|
</div> |
|
</td> |
|
|
// ... line 67
|
|
</tr> |
|
{% endfor %} |
|
</tbody> |
|
</table> |
|
</div> |
|
|
// ... lines 73 - 76
|
|
</section> |
|
</div> |
|
{% endblock %} |
See Code Block in Script
Lazy Stimulus Controllers
... downloaded. I love this feature.
This can also be done for third-party packages. If you look in
assets/controllers.json... Turbo isn't a very good example of this, but if we
said "fetch": "lazy" on any of these, they would ...
Blog
Live Stream 7 Let's build some Twig UI Components
... recording setup and re-recording bad audio 11:15
New proposed Twig components attribute syntax 13:40
UI Recipes: What is all this? 18:45
The WIP recipes site with starting recipes 29:15
Building a Dropdown component 41:15
Why teleporting is probably not needed & using Turbo Streams 51:00
Hey @Ryan-L!
Haha, just replied to your other message then saw this one :).
Ok, so in this case, by making the Ajax call manually (i.e. POSTing via Axios), you're going outside of the Turbo Frames system. That's ...
... through Turbo. You do that by calling the `renderStreamMessage()` - example is here - https://symfonycasts.com/screencast/turbo/manual-stream#codeblock-ac3a378c42
B) Unless I've missed something, I think (A) is all ...
So, why would one choose Vue or React or stimulus? What do you think the choice is based on?
Is [this the most recent guide](https://symfonycasts.com/screencast/last-stack) on the stimulus/turbo topic? Or are there more recent ones?
thanks ...
If I recall correctly, the modal closes automatically when its content is cleared out, so you only need to empty the modal's content. Your response should return a turbo stream with the same modal's id but with no HTML ...
Hey |mention:83916|
The AJAX requests made by Turbo does not trigger a full page reload. It will make a normal request to your backend, but it will update only the HTML content that needs to change, so it won't load all of your assets, scripts, etc on each page load
Cheers! ...
Hi everyone, a great tool for dependent form fields - I'm thrilled :)
I have the problem that dependent fields are no longer recognized as mandatory fields. I work with Turbo and LiveComponents. Displaying and hiding ...
585
Turbo
Filter Results