Tengo un formulario anidado donde los elementos del formulario anidado están condicionados a las selecciones en el formulario principal. Tengo la parte anidada del formulario en un cuadro turbo. Tengo enlaces manuales para actualizar el marco de esta manera:
<a data-turbo-frame="items" href="http://localhost:3000/parent_model/new?nested_id=2">Second Nested Item</a>En lugar de enlaces, quiero la selección existente. Tengo que recargar dinámicamente ese cuadro al cambiar.
Encontré esto: https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441 que da una solución como:
let frame = querySelector('turbo-frame#your-frame') frame.src = '/my/new/path' frame.reload() Todavía estoy buscando un delineador directo elegante como onChange... frente a lo que parece un controlador de estímulo completo, etc.
Puede desencadenar un evento desde algún elemento en la página web:
Agregue turbo-frame a su página web:
<turbo-frame id="my-frame" src="/my/path"> </turbo-frame> Agregue un elemento de entrada, digamos un botón, en algún lugar de la página con onclick() :
<input class="btn" name="123" id="btn" onclick="update_my_frame(name)">En la función JS activada por onclick(), puede cargar/recargar el cuadro turbo:
<script> update_my_frame(name) { // console.log(name); let frame = document.querySelector('turbo-frame#my-frame') frame.src = '/my/path' // => loads turbo-frame // ... frame.src = '/my/new/path' frame.reload() // => reload turbo-frame with updated src } </script><select onchange=" const frame = document.getElementById('my-frame'); frame.src=event.target.value; frame.reload();" > <option value="/examples">Examples</option> <option value="/help">Help</option> <option value="/faq">FAQs</option> </select>