Load a turbo frame with a select OnChange event?

Question

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.

Answer 1

You can trigger an event from some element on the webpage:

1. Add turbo-frame to your webpage:

    <turbo-frame id="my-frame" src="/my/path">
    </turbo-frame>
   

2. 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)">
   

3. 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>