gem 'jquery-rails'

bundle install
rails generate jquery:install

<!-- app/views/posts/_form.html.erb -->
<%= form_for(@post, remote: true) do |f| %>
  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :content %><br>
    <%= f.text_area :content %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<div id="post-dialog" title="Create New Post" style="display:none;">
  <%= render 'form' %>
</div>

<button id="new-post-button">New Post</button>

$(function() {
  // 初始化对话框
  $("#post-dialog").dialog({
    autoOpen: false,
    modal: true,
    width: 500,
    buttons: {
      "Cancel": function() {
        $(this).dialog("close");
      }
    }
  });
  
  // 打开对话框的按钮
  $("#new-post-button").click(function() {
    $("#post-dialog").dialog("open");
    return false;
  });
  
  // 处理表单提交成功
  $("form").on("ajax:success", function(event, data, status, xhr) {
    $("#post-dialog").dialog("close");
    // 刷新页面或更新部分内容
    location.reload();
  });
  
  // 处理表单提交失败
  $("form").on("ajax:error", function(event, xhr, status, error) {
    // 显示错误信息
    $("#post-dialog").html(xhr.responseText);
  });
});

# app/controllers/posts_controller.rb
def create
  @post = Post.new(post_params)
  
  respond_to do |format|
    if @post.save
      format.html { redirect_to @post, notice: 'Post was successfully created.' }
      format.js   # 这会渲染create.js.erb
    else
      format.html { render :new }
      format.js   # 这会渲染create.js.erb
    end
  end
end

# app/views/posts/create.js.erb
<% if @post.errors.any? %>
  $("#post-dialog").html("<%= escape_javascript(render 'form') %>");
<% else %>
  $("#post-dialog").dialog("close");
  // 更新页面内容或重定向
  window.location.href = "<%= post_path(@post) %>";
<% end %>

*= require jquery-ui