Modal forms with Rails UJS

00 index.html.erb

<h1>Posts</h1>

<ul>
<% Post.all.each do |p| %>
  <li><%= p.title %></li>
<% end %>
</ul>

<%= link_to "+ Post", new_posts_path, remote: true %>

01 posts_controller.rb

class PostsController < ApplicationController
  def new
    @post = Post.new
    
    render :as_modal, locals: { template: :form }
  end
  
  def create
    @post = Post.new(post_params)
    
    if @post.save
      redirect_to @post, notice: "Done!"
    else
      render :as_modal, locals: { template: :form }
    end
  end
end

02 as_modal.js.erb

var existingModal = document.querySelector("[data-controller='modal']");
if (existingModal) {
  document.body.removeChild(existingModal);
}

document.body.insertAdjacentHTML("beforeend", "#{j render partial: template.to_s, locals: local_assigns }");

03 _form.html.erb

<div class="modal" data-controller="modal">
  <%= form_with model: @post, local: false do |form| %>
    <%= f.label :body %>
    <%= f.rich_text_area :body %>

    <%= f.submit %>
  <% end %>
</div>