For reasons, I needed to be able to programmatically navigate within a Turbo Frame. I was hoping that Turbo.visit(path) would work, but it always affected the entire page. I found a feature that is only lightly documented. If I can select the turbo-frame element I can set the "src" attribute to make it load a new path. Here is a Stimulus controller I made to make table rows clickable. It will work within a Turbo Frame or just a regular table on a page:
import { Controller } from "stimulus"
export default class extends Controller {
goToRecord(event) {
// Hyperlink clicks automatically work within the Turbo Frame
if (event.target.tagName === "A") {
return;
}
let row = event.currentTarget;
let path = row.dataset.href;
let target = row.dataset.target;
if (path) {
if (target === "frame") {
row.closest("turbo-frame").src = path;
} else {
Turbo.visit(path, { action: "replace" });
}
}
}
}---
Thanks,
Eric
Thanks,
Eric