Rails中Ajax创建的新用户无法实时显示问题求助

DevOps 小满

2026-5-21

Hey there! Let's dig into why your AJAX-created user isn't showing up without a page refresh—this is a super common gotcha when starting out with Rails UJS, so don't worry, we'll get it sorted.

Let's walk through the most likely issues step by step:

1. Make sure your `create` controller action handles AJAX (JS) requests

First up, check if your UsersController#create method is set up to respond to JavaScript format. Without this, Rails will default to handling the request as HTML, which triggers a full page refresh. Your action should look something like this:

def create
  @user = User.new(user_params)

  respond_to do |format|
    if @user.save
      format.html { redirect_to users_path, notice: 'User created successfully!' }
      format.js   # This tells Rails to render `app/views/users/create.js.erb`
    else
      format.html { render :index }
      format.js   # Handle validation errors via JS too, if needed
    end
  end
end

If you skipped the respond_to block or omitted format.js, that's probably the first culprit.

2. Verify your form is AJAX-enabled

Double-check that your user creation form has the remote: true flag (for older Rails versions using form_for) or that you haven't forced local: true with form_with (since form_with defaults to remote in Rails 5+):

# Using form_with (Rails 5+)
<%= form_with(model: @user) do |form| %>
  <!-- Your form fields here -->
<% end %>

# Or if using form_for (older Rails)
<%= form_for(@user, remote: true) do |form| %>
  <!-- Your form fields here -->
<% end %>

If remote: true is missing (or local: true is present), the form will submit as a regular HTML request instead of AJAX.

3. Check your `create.js.erb` template is updating the DOM correctly

This template is responsible for injecting the new user into your page without a refresh. Let's say you have a list of users with the ID users_list in your index.html.erb:

<!-- In index.html.erb -->
<div id="users_list">
  <%= render @users %>
</div>

Your create.js.erb should append the new user's HTML to this list, using escape_javascript (shortened to j) to avoid breaking the JavaScript:

// app/views/users/create.js.erb
// Append the new user partial to the list
$('#users_list').append('<%= j render @user %>');

// Optional: Reset the form after successful submission
$('form#new_user')[0].reset();

Make sure you have a _user.html.erb partial that renders a single user's HTML—without this, render @user won't work as expected.

4. Confirm Rails UJS is loaded in your frontend

Rails relies on UJS (Unobtrusive JavaScript) to handle AJAX form submissions. Check your application.js to ensure it's loaded:

For Rails 7 with importmaps:
```
import "@rails/ujs"
Rails.start()
```
For Rails 6 with Webpacker:
```
require("@rails/ujs").start()
```

If UJS isn't loaded, the remote: true attribute on your form won't do anything, leading to a full page refresh.

5. Debug with server logs

Open your Rails server terminal and watch the logs when you submit the form. You should see something like this for a successful AJAX request:

Processing by UsersController#create as JS
  Parameters: {"user"=>{"name"=>"Test User", ...}}
  User Create (0.4ms)  INSERT INTO "users" ...
  Rendering users/create.js.erb
  Rendered users/_user.html.erb (0.2ms)
  Rendered users/create.js.erb (1.1ms)
  Completed 200 OK in 4ms (Views: 2.9ms | ActiveRecord: 0.4ms)

If you see Processing as HTML instead, that confirms your form isn't sending an AJAX request—go back to checking the remote flag and UJS loading.

Start with these checks, and you'll almost certainly find the issue. Let me know if you hit any snags along the way!

内容的提问来源于stack exchange，提问作者Simon Cooper