Stimulus ajax:response not returning the server response data

Question

I am starting a new Rails 7 app and recently found out that we can't use ujs anymore :( I found a plugin called mrujs which is working correctly to send my forms remotely to the server. I am also using stimulus to handle various javascript functions on the page.

The issue that I'm having is my response back after ajax:success processes is not iterable:

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

Below is my HTML, Rails, and Stimulus Code:

HTML

<%= form_with model: Article.new, html: { data: { remote: true, type: "html", "action": "ajax:success->modal-forms#onPostSuccess ajax:error->modal-forms#onPostError" } } do |f| %>
  <%= f.label :title, "Article Title" %>
  <%= f.text_field :title, class: "form-control" %>
  <%= f.submit "Save Article", class: "btn btn-primary" %>
<% end %>

Ruby / Rails

def create
  @article = Article.create(article_params)
  if @article.errors.any?
    render partial: 'error', article: @article, status: :bad_request
  else
    render @article
  end
end

This returns a basic html page that would be inserted into another location within the page.

<li><%= @article.title %></li>

Stimulus Action

onPostSuccess(event) {
  event.preventDefault()
  const [data, status, xhr] = event.detail
  // This is where I get the issue of 'Not Iterable'
}

event.detail gives me the not iterable error. Does anyone know how I can get my response from rails to be formatted so the [data, status, xhr] section will actually work?

If hotwire or turbo is needed for this an example would be extremely helpful :)

Thanks Eric

Answer 1

This may not be the correct way but it does work:

html

<div data-container="remote">
<%= form_with model: Person.new, html: { data: { "action": "submit->remote#submit" } } do |f| %>
    <%= f.text_field :first_name %>
    <%= f.submit :submit %>
  <% end %>
</div>

peole rails controller

def create
    @person = Person.new(person_params)
    if @person.save
      render json: @person
    else
      render partial: 'people/person', locals: { person: @person },  status: :unprocessable_entity
    end
  end

remote stimulus controller

submit(event) {
    event.preventDefault()

    fetch(event.target.action, {
      method: 'POST',
      body: new FormData(event.target),
    }).then(response => {
      console.log(response);
      if(response.ok) {
        return response.json()
      }

      return Promise.reject(response)
    }).then(data => {
      console.log(data)
    }).catch( error => {
      console.warn(error)
    });
  }