Question

我有一个模型的索引视图（显示所有记录），我使用bootstrap和ajax在索引视图中进行更新。为了实现这一点，我在每行的末尾添加了一个链接，在单击它之后，显示一个带有记录属性的表单的模式。我提交表单，并使用ajax更新数据库，然后更新视图（仅更改了行）。

它第一次工作正常，但是如果我再次尝试再次编辑同一行模式停止显示，点击什么都不做，甚至不是错误信息。但是，它仍然适用于其他行。

如果我从update.js.erb中删除渲染（请参阅下面的代码），它每次都有效，但是我需要刷新整个页面（每次更改后）以显示更新更改。

代码保持完全相同（或者看起来如此）但我需要刷新页面才能使其在更新的行上再次运行。

这是我的代码：

控制器（已删除不相关的代码）

before_action :set_status, only: [:edit, :update]

def edit
end

def update
  @status.update(status_params)
  respond_to :js
end

private

def set_status
  @status = Status.find(params[:id])
end

索引视图

<div class="container contentaftermenu">
  <div class="row">
    <table class="table">
      <thead class="table-head">
        <tr>
          <th class="centered">Sequence</th>
          <th>Title</th>
          <th>Description</th>
          <th class="centered">Edit</th>
        </tr>
      </thead>
      <tbody>
        <% @statuses.each do |status| %>
          <tr class="record-tr" id="status-<%= status.id %>">
            <%= render partial: "display", locals: { status: status } %>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>
<div id="status-modal" tabindex="-1" role="dialog" class="modal fade"></div>

<script type="text/javascript">
$(document).ready(function () {

  $('img.bottom').click(function() {
    $('#status-modal').modal("show");
  });
});
</script>

显示部分

<td class="centered"><%= status.sequence %></td>
<td id="title-<%= status.id %>"><%= status.title %></td>
<td id="desc-<%= status.id %>"><%= status.description %></td>
<td id="act-<%= status.id %>" class="centered">
  <%= link_to edit_admin_status_path(status), remote: true do %>
    <img id="sid-<%= status.id %>" class="bottom" src="../../images/admin/edit.png">
  <% end %>
</td>

编辑js

$("#status-modal").html("<%= j(render 'form') %>");

形成部分

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3 class="modal-title">Edit status</h3>
    </div>
    <%= form_for @status, url: admin_status_path(@status), remote: true do |f|   %>
      <div class="modal-body form-group form-admin">
        <ul class="errors alert-danger"></ul>

        <div class="form-group">
          <%= f.label :title, class:"control-label" %>
          <%= f.text_field :title, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :description, class: "control-label" %>
          <%= f.text_area :description, class: "form-control" %>
        </div>

        <%= f.submit class: "btn btn-primary" %>
        <%= link_to "Cancel", "#", class: "btn", data: { dismiss: "modal" } %>
      </div>
    <% end %>
  </div>
</div>

更新js

$("ul.errors").html("");
$("ul.errors").removeClass("alert");

<% if @status.errors.any? %>
  $("ul.errors").addClass("alert");

  <% @status.errors.full_messages.each do |message| %>
    $("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
  <% end %>
<% else %>
  $("#status-<%= @status.id %>").html("<%= j(render partial: 'display', locals: { status: @status }) %>");
  $("#status-modal").modal("hide");
<% end %>

感谢您的帮助！

Answer 1

我认为问题在于你用edit.js替换模态中的所有html，这意味着JS模态对象不再存在，因此你的on click函数显示模态不能再找到模态对象

您是否可以尝试仅替换具有该表单的模态部分，这应该可以解决您的问题。

即。为这一点做一个部分（我给它一个“inner_form”的id）：

"scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },

然后在edit.js中替换它：

<%= form_for @status, url: admin_status_path(@status), remote: true, id:"inner_form" do |f|   %>
  <div class="modal-body form-group form-admin">
    <ul class="errors alert-danger"></ul>

    <div class="form-group">
      <%= f.label :title, class:"control-label" %>
      <%= f.text_field :title, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :description, class: "control-label" %>
      <%= f.text_area :description, class: "form-control" %>
    </div>

    <%= f.submit class: "btn btn-primary" %>
    <%= link_to "Cancel", "#", class: "btn", data: { dismiss: "modal" } %>
  </div>
<% end %>

Rails + Bootsrtap + AJAX：提交表单后停止显示的模式

1 个答案: