Better Stimulusガイド 08: Rails-ujs（翻訳）

フォームをプログラムで送信する

<div data-controller="remote-form">
  <%= form_with(model: @article, html: { data: { action: "ajax:success->remote-form#onPostSuccess" } }) do |f| %>
    <%= select_tag "author", options_from_collection_for_select(@people, "id", "name"),
                   data: { action: "change->remote-form#update" } %>
  <% end %>
</div>

動かない

import { Controller } from "stimulus";

export default class extends Controller {
  onPostSuccess(event) {
    console.log("success!");
  }

  update() {
    this.element.submit();
  }
}

動く

import Rails from "@rails/ujs";
import { Controller } from "stimulus";

export default class extends Controller {
  onPostSuccess(event) {
    console.log("success!");
  }

  update() {
    Rails.fire(this.element, 'submit');
  }
}

解説

Rails-ujsは、<form>要素にdata-remote="true"属性を持つフォーム送信イベントをインターセプトしますが、HTMLFormElement.submit()メソッドが呼び出されてもイベントは発生しません。

関連資料

• Rails UJS
• HTMLFormElement.submit
• Rails UJS Wiki

関連記事

Better Stimulusガイド:アーキテクチャ1: アプリケーションコントローラ（翻訳）

The post Better Stimulusガイド 08: Rails-ujs（翻訳） first appeared on TechRacho.