Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
None of the Turbo events are not triggered on 422
See original GitHub issueHi,
Kind of reopening https://github.com/hotwired/turbo/issues/85
When you have form errors and render it using turbo streams
# Ruby
render :edit, status: :unprocessable_entity
# JS
document.addEventListener('turbo:load', () => queryDocumentForTomSelect());
document.addEventListener('turbo:render', () => queryDocumentForTomSelect());
document.addEventListener('turbo:before-render', () => queryDocumentForTomSelect());
document.addEventListener('turbo:frame-load', () => queryDocumentForTomSelect());
None of the Javascript events are triggered making impossible to load libraries such as Tom-Select or Bootstrap custom calendars.
Some people recommends to add data-controller attribute and use stimulus controller, but none of them show how to properly do it when you have many input you want to trigger or that maybe you already call another controller on the same input.
What are the proper workaround ?
Thank you
Edit
A dirty workaround would be
import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="page-load"
export default class extends Controller {
connect() {
const event = new Event('page:load');
document.dispatchEvent(event);
}
}
...
<body data-controller="page-load">
...
document.addEventListerner('page:load', () => { ... });
but keep in mind that javascript inside turbo-frame will still not reload on frame update
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
If you’re on Stimulus v3, you have access to target connection callbacks, which could help you avoid event listening entirely.
If your Stimulus controller is high-enough in the page’s hierarchy, you could annotate elements with
[data-$IDENTIFIER-target~="tomSelect"], then declare atomSelectTargetConnected(target)callback andtomSelectTargetDisconnected(target)to manage installing and uninstalling whatever plugin you’re using.This avoids event listeners, page visits vs. Turbo Streams, etc because Stimulus manages the plugin entirely based on whether or not the element is present or absent in the document.
@seanpdoyle
Thanks for your reply. It’s very appreciated !
The event turbo:before-stream-render is indeed called but loading plugins from there doesn’t work. Probably if I use a setTimeout(() => { … }, 1000) that would work but I find it ugly.
I went ahead and gave a try to your method:
Append to all my select
data: { "tomselect-target": "inputs" }and it does indeed work flawlessly.I would be happy with this solution, but there is one thing that bothers me and is doing this to my body (It’s HAML)
If I have multiple libraries that would get ugly, I would then need to do this:
Isn’t there a better way?