None of the Turbo events are not triggered on 422 #520

james-em · 2022-01-24T13:16:19Z

Hi,

Kind of reopening #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

The text was updated successfully, but these errors were encountered:

seanpdoyle · 2022-01-24T15:14:48Z

Would listening for a turbo:before-stream-render event suit your use case?

seanpdoyle · 2022-01-24T15:17:30Z

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.

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 a tomSelectTargetConnected(target) callback and tomSelectTargetDisconnected(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.

james-em · 2022-01-25T00:01:33Z

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

import {Controller} from "@hotwired/stimulus"
import {loadTomSelect} from "../libs/tom-select";

// Connects to data-controller="tomselect"
export default class extends Controller {
  static targets = ["ts"]

  tsTargetConnected(selectInput) {
    if (selectInput.classList.contains('tomselected')) return;
    if (selectInput.classList.contains('no-ts')) return;

    if (selectInput.classList.contains('tomselect-ajax')) {
      loadTomSelect(selectInput, true);
    } else {
      loadTomSelect(selectInput, false);
    }
  }
}

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)

%body{data: { controller: 'tomselect' }}

If I have multiple libraries that would get ugly, I would then need to do this:

<body data-controller="library1">
 <div data-controller="library2">
    <div data-controller="library3">
      content...
    </div>
</div>
</body>

Isn't there a better way?

seanpdoyle · 2022-01-25T00:15:00Z

The data- attributes that power Stimulus accept token lists, so you can add controller identifiers or action descriptors as lists separated by spaces.

james-em · 2022-01-25T13:56:39Z

The data- attributes that power Stimulus accept token lists, so you can add controller identifiers or action descriptors as lists separated by spaces.

You mean that

<body data-controller="library1 library2 library3">

would be valid?

seanpdoyle · 2022-01-25T14:13:14Z

That's right! The same is true for data-action="click->library1#doSomething click->library2#doSomethingElse".

james-em · 2022-01-25T14:16:20Z

That's right! The same is true for data-action="click->library1#doSomething click->library2#doSomethingElse".

Thank you I didn't know! Thanks for all the quick replies. Very appreciated. I'm closing the issue

jdsampayo · 2022-06-26T23:26:52Z

The solution of TargetConnected / TargetDisconnected is great because it works with any plugin (tomselect, flatpickr, etc). Basically the ones that use addEventListener("turbo:load") can be written like that.

Additionally, I found this wrapper that works great particularly for tom-select:
https://github.com/bbonamin/stimulus-tom-select

james-em closed this as completed Jan 25, 2022

james-em mentioned this issue Jan 25, 2022

turbo:load won't be triggered when a FormSubmission request fails #85

Closed

daniel-rikowski mentioned this issue Sep 14, 2022

Fire turbo:frame-load event during form submission #425

Merged

summera mentioned this issue Jul 26, 2023

Compatibility with hotwired/turbo-rails intercom/intercom-rails#336

Open

codez mentioned this issue Apr 30, 2024

EVENT: Kontaktperson Suche ist Flake hitobito/hitobito#2565

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

None of the Turbo events are not triggered on 422 #520

None of the Turbo events are not triggered on 422 #520

james-em commented Jan 24, 2022 •

edited

Loading

seanpdoyle commented Jan 24, 2022

seanpdoyle commented Jan 24, 2022

james-em commented Jan 25, 2022 •

edited

Loading

seanpdoyle commented Jan 25, 2022

james-em commented Jan 25, 2022

seanpdoyle commented Jan 25, 2022

james-em commented Jan 25, 2022

jdsampayo commented Jun 26, 2022 •

edited

Loading

None of the Turbo events are not triggered on 422 #520

None of the Turbo events are not triggered on 422 #520

Comments

james-em commented Jan 24, 2022 • edited Loading

seanpdoyle commented Jan 24, 2022

seanpdoyle commented Jan 24, 2022

james-em commented Jan 25, 2022 • edited Loading

seanpdoyle commented Jan 25, 2022

james-em commented Jan 25, 2022

seanpdoyle commented Jan 25, 2022

james-em commented Jan 25, 2022

jdsampayo commented Jun 26, 2022 • edited Loading

james-em commented Jan 24, 2022 •

edited

Loading

james-em commented Jan 25, 2022 •

edited

Loading

jdsampayo commented Jun 26, 2022 •

edited

Loading