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: /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 one-liner like a onChange... vs what looks like a full stimulus controller etc.

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 one-liner like a onChange... vs what looks like a full stimulus controller etc.

• javascript
• ruby-on-rails
• turbolinks

• 2 Did you figure this out, or you went in another direction? I'm having the same issue. – viktorsmari Commented Mar 23, 2022 at 15:16

3 Answers 3

@Brendon got me there, but here's a dead simple example of turbo + stimulus. Filter the current index collection from drop down.

// app/javascript/controllers/select_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

  connect() {
    
  }

  change(event) {
    const frame = document.getElementById('posts');
    frame.src=event.target.value;
    frame.reload();
  }
}

And

<%# app/views/posts/index.html.erb %>
<select 
    data-controller="select"
    data-action="select#change">
    <option value="<%= posts_path(filter: 'unpublished') %>">Unpublished</option>
    <option value="<%= posts_path(filter: 'archived') %>">Archived</option>
    <option value="<%= posts_path(filter: 'featured') %>">Featured</option>
</select>

<%= turbo_frame_tag :posts do %>
  <%= render posts %>
<% end %>

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>
   

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