我有一個模型索引視圖(顯示所有記錄),我使用的引導和Ajax使索引視圖中更新。爲了做到這一點,我在每行的末尾添加了一個鏈接,單擊它後,將顯示一個帶有記錄屬性的表單的模式。我提交表單,並使用ajax,我更新數據庫,然後更新視圖(只有被更改的行)。的Rails + Bootsrtap + AJAX:模式與形式後停止展示提交
它工作正常的第一次,但如果我嘗試再次編輯同一行的模式停止顯示,點擊什麼也不做,甚至不是一個錯誤消息。儘管如此,它仍然適用於其他行。
如果我刪除從update.js.erb渲染(見下面的代碼)它也能工作,每一次,但後來我需要刷新整個頁面(每次更改後)顯示更新的變化。
代碼保持完全一樣(或者看起來是這樣),但我需要刷新頁面,以使其在更新的行(或多個)再次合作。
這是我的代碼:
CONTROLER(去除不相關碼)
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 %>
謝謝你的幫助!
謝謝!這是問題,點擊功能不再找到模態對象。但不是改變的部分,我只是刪除了'$(「#狀態模態」)模態(「秀」);'從索引視圖,並把它添加到edit.js(渲染後的形式)。現在它工作正常。 – Gerry
太棒了,是的,你的解決方案聽起來不錯! –