Last active
November 6, 2025 20:46
-
-
Save erik-jenkins/13aa2facc76b99a27a31ac25c2587aac to your computer and use it in GitHub Desktop.
Demonstrates reloading Turbo Frames with Javascript events via Stimulus actions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <turbo-frame id="a"> | |
| Hello this is A speaking | |
| </turbo-frame> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <turbo-frame id="b"> | |
| Yes B here, hello? | |
| </turbo-frame> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% extends 'layout.html' %} | |
| {% block content %} | |
| <div> | |
| <turbo-frame | |
| id="a" | |
| src="/a" | |
| data-controller="reload-frame" | |
| data-action="form-submitted@window->reload-frame#reload" | |
| ></turbo-frame> | |
| </div> | |
| <div> | |
| <turbo-frame | |
| id="b" | |
| src="/b" | |
| data-controller="reload-frame" | |
| data-action="form-submitted@window->reload-frame#reload" | |
| ></turbo-frame> | |
| </div> | |
| <form action="/form" method="post"> | |
| <button type="submit">Submit the form</button> | |
| </form> | |
| <turbo-frame id="events"></turbo-frame> | |
| {% endblock %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Flask Turbo Frame Reload</title> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@latest/dist/turbo.es2017-esm.min.js"></script> | |
| <script type="module"> | |
| import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js" | |
| window.Stimulus = Application.start() | |
| Stimulus.register("reload-frame", class extends Controller { | |
| connect() { | |
| console.log('reload controller connected') | |
| // TODO: ensure this.element is a turbo frame with a src attr | |
| } | |
| reload() { | |
| console.log('reloading turbo frame'); | |
| this.element.reload(); | |
| } | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| {% block content %}{% endblock %} | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| from flask import Flask, render_template | |
| app = Flask(__name__) | |
| @app.route("/") | |
| def hello_world(): | |
| return render_template("hello.html") | |
| @app.route("/a") | |
| def a(): | |
| return render_template("a.html") | |
| @app.route("/b") | |
| def b(): | |
| return render_template("b.html") | |
| @app.route("/form", methods=["POST"]) | |
| def submit(): | |
| return ( | |
| """ | |
| <turbo-stream target="events" action="replace"> | |
| <template> | |
| <turbo-frame id="events"> | |
| <script> | |
| window.dispatchEvent(new CustomEvent('form-submitted')); | |
| </script> | |
| </turbo-frame> | |
| </template> | |
| </turbo-stream> | |
| """, | |
| {"Content-Type": "text/vnd.turbo-stream.html"}, | |
| ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment