Go back Hotwire / Stimulus / Turbo ...

Stimulus JS - notes



Reuse closest form to stimulus controller definition

  connect() {
    this.form = this.element.closest("form");
    this.formData = new FormData(this.form);

    // Set url to point to post '/posts/:id/autosave'
    this.url = this.form.action + "/autosave";
source 

POST request directly form Stimulus controller

 sendRequest(url, formData) {
    console.log("Sending request to " + url);
    // fetch and trigger turbo_stream response

    fetch(url, {
      method: "POST",
      body: formData,
      headers: {
        "X-CSRF-Token": document.querySelector("meta[name='csrf-token']")
          .content,
        Accept: "text/vnd.turbo-stream.html",
      },
      credentials: "same-origin",
    }).then((response) => {
      response.text().then((html) => {
        document.body.insertAdjacentHTML("beforeend", html);
      });
    });
  }