I have a nested form where the nested form items are conditional on the selections in the main form. I have the nested part of the form in a turbo frame. I have manual links to update the frame like this:
<a data-turbo-frame="items" href="http://localhost:3000/parent_model/new?nested_id=2">Second Nested Item</a>
Instead of links I want the existing select I have to dynamically reload that frame on change.
I found this: https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441 which gives a solution like:
let frame = querySelector(‘turbo-frame#your-frame’)
frame.src = ‘/my/new/path’
frame.reload()
I am still looking for a direct elegant on liner like a onChange... vs what looks like a full on stimulus controller etc.
You can trigger an event from some element on the webpage:
Add turbo-frame to your webpage:
<turbo-frame id="my-frame" src="/my/path">
</turbo-frame>
Add an input element, say a button, somewhere on the page with onclick():
<input class="btn" name="123" id="btn" onclick="update_my_frame(name)">
In the JS function triggered by onclick(), you can load/reload the turbo frame:
<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>