Turbo:submit-end event.detail.success always true

1

Hi there,

First of all, as it is my 1st post, I just want to thank you all for the great talks happening here, I already found plenty resources to learn more about Hotwire.

Because of my lack of knowledge about JS I’m not sure my issue is related to Hotwire, but it might be worth asking. Also I didn’t find any reference to this kind of Object on HTMLFormElement: submit event - Web APIs | MDN

Basically, I catch a submit-end event to close a modal as so:

export default class extends Controller {
  connect() {
    this.element.addEventListener('turbo:submit-end', (event) => {
      if (event.detail.success) {
        this.hide_modal()
      }
    })
  }
}

But event.detail.success is always true, even if model validations fail.

Is there a way to interact on the value of event.detail.success from a Rails controller ?
Or maybe should it be done within a dedicated Stimulus controller ?
More importantly, where can I find a document on this specific Object ?

2

Alright I get it !

Issue was inside my RoR controller. I had

def create
  if @foo.save
    # not important
  else
    format.turbo_stream do
      render turbo_stream: turbo_stream.replace(
        'id',
        partial: 'partial',
        locals:  { foo: @foo }
      )
    end
  end
end

So even if the instance wasn’t created, the turbo_stream.replace() was still firing with a 200 OK status code.

I moved the format.turbo_stream block inside create.turbo_stream.erb, and updated my controller as so:

def create
  if @foo.save
    # not important
  else
    format.turbo_stream { render :create, status: :bad_request }
  end
end

Now event.detail.success is false because of the 400 Bad request status code.

On the occasion I realized that this object comes from Fetch API - Web APIs | MDN