在引导程序 3 模式中创建一个模式以从导航栏添加新用户 - Rails 5

Question

所以我在从导航栏中以模式创建用户时遇到问题。我想添加链接以允许管理员从链接创建新用户，而不是转到用户索引并使用那里的模式按钮。

我的导航栏链接：

 <li><%= link_to "Add User", new_user_path, remote: true %></li>

到目前为止我的模态：

found in: _create.html.erb

<%= content_tag :div, class: "modal fade", id: "createUser" do %>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <%= form_for(@user, remote: true) do |f| %>
        <div class="modal-body">
          <div class="row">
            <div class="col-xs-12">
               FORM HERE
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <%= f.submit "Create New User", :class => 'btn btn-primary' %>
        </div>
      <% end %>
    </div>
  </div>
</div>

我的 create.js.erb

$('#createUser').modal('hide');

$(".email").val('');
$(".password").val('');
$(".f_name").val('');
$(".l_name").val('');
$(".primary_tel").val('');

$('#table_body').prepend('<%= j render partial: 'user_row', locals: {user: @user} %>');
$('#user_row_<%= @user.id %>').hide().fadeIn(1000);

用户控制器/新操作

  def new
    @user = User.new
  end

我想变成模态的用户表单：

<%= form_for(user) do |f| %>
  <% if user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% user.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :user_ident %>
    <%= f.text_field :user_ident %>
  </div>

  <div class="field">
    <%= f.label :f_name %>
    <%= f.text_field :f_name %>
  </div>

  <div class="field">
    <%= f.label :l_name %>
    <%= f.text_field :l_name %>
  </div>

  <div class="field">
    <%= f.label :primary_tel %>
    <%= f.text_field :primary_tel %>
  </div>

  <div class="field">
    <%= f.label :role_id %>
    <%= collection_select(:user, :role_id, Role.all, :id, :name, {prompt: true}) %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Answer 1

我假设您想在UsersController 的index 视图中显示模式。将_create.html.erb 中的代码添加到users/index.html.erb 的顶部。除非您明确要求，否则您的模态不会显示。由于您要在 @user 的模态中呈现表单，因此您需要在 index 操作中定义 @user 是什么。

# users_controller.rb

def index
  @users = User.all
  @user = User.new

结束

您在指向new_user_path 的链接中指定了remote:true，您必须在new 操作中呈现js 响应。

def new
  @user = User.new
  respond_to do |format|
    format.js #Looks for `users/new.js.erb`
    #other formats
  end
end

由于我们已经在index.html.erb 中拥有了模态模板，所以您需要在new.js.erb 中做的就是显示模态。

# new.js.erb

$("#createUser").modal('show');

既然你已经准备好了create.js.erb，那就完事了。

编辑：如果您想将此链接放在导航栏中，您应该将模态模板添加到部分（比如layouts/_new_user_modal.html.erb）并在application.html.erb 中呈现它，这对于所有的意见。此外，您需要对表单进行更改。而不是

<%= form_for(@user, remote: true) do |f| %>

使用

<%= form_for(User.new, remote: true) do |f| %>

这样您就不必在应用程序的每个操作中定义@user (DRY)。

希望这会有所帮助！