hotwired / stimulus

A modest JavaScript framework for the HTML you already have
https://stimulus.hotwired.dev/
MIT License
12.55k stars 420 forks source link

Submitting Remote Forms? #92

Closed docstun closed 6 years ago

docstun commented 6 years ago

Hi there,

First of all: Thanks for sharing this library, it looks very promising and like a "missing piece of the puzzle" 👍

I am currently trying to integrate it in an existing Rails application with remote forms but I am struggling with making those play nicely with stimulus. When calling submit(), it seems to ignore the remote attribute and submits the form without XHR:

= simple_form_for @some_object, url: "some-url", html: {method: :get, data: {'controller' => 'filter'}}, remote: true do |f|
  = f.input :query, ..., input_html: {data: {action: "input->filter#update propertychange->filter#update"}}
  = f.button :submit

filter_controller.js:

import { Controller } from "stimulus"

export default class extends Controller {
  update() {
    this.element.submit();
  }
}

The update() method is called correctly when the input changes but it does submit the form with a regular HTTP request instead via XHR. It worked just fine with the previous jQuery-based approach. I tried it with jquery_ujs as well as rails-ujs.

Any ideas what might cause this?

Thanks!

javan commented 6 years ago

Try making your submit button a target and click()ing it instead: this.submitTarget.click().

We’ve just set up a new forum for questions like these: http://discourse.stimulusjs.org

Would you mind re-posting your question there if that doesn't solve your issue? Thank you!

docstun commented 6 years ago

Awesome, works! Thanks for the swift help!