使用选择的 OnChange 事件加载 Turbo 框架？

发布于 2025-01-10 18:32:14 字数 685 浏览 0 评论 0原文

我有一个嵌套表单，其中嵌套表单项以主表单中的选择为条件。我将表格的嵌套部分放在涡轮框架中。我有手动链接来更新框架，如下所示：

<a data-turbo-frame="items" href="http://localhost:3000/parent_model/new?nested_id=2">Second Nested Item</a>

我想要现有的选择而不是链接，我必须在更改时动态重新加载该框架。

我发现了这个： https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441 它提供了一个解决方案，例如：

let frame = querySelector(‘turbo-frame#your-frame’)
frame.src = ‘/my/new/path’
frame.reload()

我仍在寻找直接优雅的单行代码（例如 onChange...）与看起来完整的刺激控制器等相比。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

却一份温柔 2025-01-17 18:32:14

@Brendon 让我明白了，但这是涡轮+刺激的一个非常简单的例子。从下拉列表中过滤当前索引集合。

// 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();
  }
}

和

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

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

回复收藏 0 原文

一个人的旅程 2025-01-17 18:32:14

您可以从网页上的某些元素触发事件：

向您的网页添加涡轮框架：
```
 
 
```
使用 onclick() 在页面上的某个位置添加一个输入元素，例如按钮：
```
 
```
在 onclick() 触发的 JS 函数中，您可以加载/重新加载 Turbo 框架：
<前><代码> <脚本>
update_my_frame(名称) {
// 控制台.log(名称);
让框架 = document.querySelector('turbo-frame#my-frame')
frame.src = '/my/path' // =>;负载涡轮框架
// ...
frame.src = '/我的/新/路径'
frame.reload() // =>;使用更新的 src 重新加载涡轮框架
}

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>

回复收藏 0 原文

一曲琵琶半遮面シ 2025-01-17 18:32:14

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

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

回复收藏 0 原文

~没有更多了~