Rails 5 Bootstrap 3 Modal / Ajax 不工作

Question

我正在 Rails 5 中构建一个应用程序并使用 Bootstrap 3 作为框架。

我创建了一个自定义用户控制器等，以允许管理员创建/编辑和销毁用户。我正在为创建用户表单设置模态，模态它自己工作，但是我希望它自动放置和呈现表格行。

到目前为止，当我创建用户时，模式挂起，它创建了用户但没有关闭模式窗口，如果我从按钮重新打开模式，它仍然保留以前用户的电子邮件和详细信息。

我会说我已经将format.js放在了format下的Create、Update和Destroy Controller Actions中。

我的模式及其按钮

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#userCreate">
  Add New User
</button>

<!-- Modal -->
<%= form_for(@user, remote: true) do |f| %>
  <div class="modal fade bs-example-modal-lg" id="userCreate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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"><i class="fa fa-user-plus" aria-hidden="true"></i> User Creation</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-xs-12">
              <div class="field">
                <%= f.label :email, "Email Address - Password Will Be Sent To This Address" %><br />
                <%= f.email_field :email, autofocus: true, :class => 'form-control email' %>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-12 col-sm-6">
              <div class="field">
                <%= f.label :f_name, "First Name" %>
                <%= f.text_field :f_name, :class => 'form-control f_name' %>
              </div>
            </div>
            <div class="">

            </div>
            <div class="col-xs-12 col-sm-6">
              <div class="field">
                <%= f.label :l_name, "Last Name" %>
                <%= f.text_field :l_name, :class => 'form-control l_name' %>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="">

            </div>
            <div class="col-xs-12">
              <div class="field">
                <%= f.label :primary_tel, "Primary Telephone" %>
                <%= f.text_field :primary_tel, :class => 'form-control primary_tel' %>
              </div>
            </div>
            <div class="">

            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <%= f.submit "Create User", :class => 'btn btn-primary' %>
        </div>
      </div>
    </div>
  </div>
<% end %>

要呈现 _user_row.html.erb 部分的索引页面

<table>
  <thead>
    <tr>
      <th>User ident</th>
      <th>F name</th>
      <th>L name</th>
      <th>Primary tel</th>
      <th>Role</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <div class="row" id="user_table_row">
        <%= render partial: 'user_row', locals: {user: user} %>
      </div>
    <% end %>
  </tbody>
</table>

现在这个部分正在显示，但只有在我手动重新加载页面之后

最后是 create.js.erb 文件（位于视图/用户中）

$('#userCreate').modal('hide'); <-- close the Modal On Submit
$(".email").val('');            <-- Reset Email Field
$(".f_name").val('');           <-- Reset F_name Field
$(".l_name").val('');           <-- Reset L_name Field
$(".primary_tel").val('');      <-- Reset Telephone Field

$('#user_table_row').prepend('<%= j render @user %>');       <-- Render User
$('#user_row_<%= user.user_ident %>').hide().fadeIn(1000);   <-- Display Row

我对 jquery 很陌生，但我在这里被难住了。任何帮助将不胜感激！如果您需要查看其他内容，请告诉我。谢谢。

我的应用程序代码中也不存在

Answer 1

我假设您的 user_row 部分看起来像这样。

<tr id="<%= "user_row_#{user.id}" %>">
  <td><%=user.email%></td>
  <td><%=user.f_name %></td>
  <td><%=user.l_name %></td>
  <td><%=user.primary_tel %></td>
</tr>

create.js.erb 中的代码存在一些问题。您实际上应该渲染部分 user_row 而不仅仅是 @user。

如果您查看服务器日志，您会发现它会查找部分users/_user，如果您有render @user.，则将其替换为

$('#user_table_row').prepend('<%= j render partial: 'user_row', locals: {user: @user} %>');

在下面的代码行中，

$('#user_row_<%= user.user_ident %>').hide().fadeIn(1000);

user 是 nil。在创建操作中，您可以访问实例变量 @user，而不是 user。而且我不确定user_ident 是什么。将其替换为

$('#user_row_<%= @user.id %>').hide().fadeIn(1000);

现在，您的 AJAX 表单提交应该可以工作了。但是新行将呈现在表格之外。要更好地理解它，请查看this。

那么，问题出在哪里？在您看来，您有以下代码块。

<% @users.each do |user| %>
  <div class="row" id="user_table_row">
    <%= render partial: 'user_row', locals: {user: user} %>
  </div>
<% end %>

对于每个用户，您将行（来自部分）包装在一个 div 中，类为 row，id 为 user_table_row。你没发现有什么不对吗？

ID 在整个页面中应该是唯一的，但您要创建多个具有相同 id 的 divs。每当创建新的用户记录时，您都必须将其添加到表格正文中。因此，将id 添加到tbody 而不是包装器div 是有意义的。因此，将您的视图修改为

<tbody id="table_body">
<% @users.each do |user| %>
    <%= render partial: 'user_row', locals: {user: user} %>
<% end %>

现在，您可以使用类似 Jquery 的方式将新行添加到 #table_body

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

就是这样！

希望这会有所帮助！