CODEWITHSUNDEEP
javascriptruby-on-railsturbolinks
Dan Tappin
Dan Tappin

Reputation: 3032

Load a turbo frame with a select OnChange event?

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.

Upvotes: 9

Views: 9046

Answers (3)

Ryan Romanchuk
Ryan Romanchuk

Reputation: 10869

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

Upvotes: 13

Brendon
Brendon

Reputation: 947

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

Upvotes: 0

Nitin Nain
Nitin Nain

Reputation: 5483

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>

Upvotes: 3

Related Questions