用于创建和编辑记录的 Rails 远程链接模式

Question

我已经按照here找到的教程进行操作

我想要完成的是允许用户使用模式编辑索引页面中的记录。

在我的 index.haml 视图中，我有这个：

- @bars.each do |bar|
  = link_to "Edit", edit_bar_path(bar), remote: true, class: "btn btn-default"

#bar-modal.modal.fade

在 _edit.haml 中：

.modal-header
  %h3= "Editing #{@bar.foo}"
= render "form"

在edit.js.erb中

$("#bar-modal").html("<%= escape_javascript(render 'edit') %>")
$("#bar-modal").modal("show")

在_form.haml中

= bootstrap_form_for @bar, remote: true do |f|  
  = f.text_field :foo
  = f.button "Save"

我的控制器是标准 rails 生成的 CRUD 控制器。

由于某种原因，如果我单击链接，这不会显示模式。我让它以不同的方式工作，但随后它打开了一个“创建”表单，而不是一个编辑表单。

我正在使用 bootstrap 和 haml。我已确保 firebug 中没有错误。

我错过了什么？

Answer 1

您是否修改了控制器以呈现js 响应？

在控制器的edit 操作中，添加

def edit
  #find the record
  respond_to |format|
    format.js # this will render edit.js.haml
    # other formats
  end
end

你在你的edit.js.haml中混合了erb和haml。将其替换为

$('#modal-container').html('#{ j(render 'edit') }');
$('#bar-modal').modal("show");

当执行第一行代码时，#bar-modal 存在于我们的文档中。然后你就可以在它上面调用modal方法来显示模态了。

请注意，j 是 escape_javascript 的别名。 （减少击键次数）

确保div 在index.html.haml 中有ID 为modal-container。你的模态（在_edit.html.haml）应该有一个bar-modal的ID。

_form.html.haml 中的模态应该如下所示：

.modal.fade.in#bar-modal
  .modal-dialog
     .modal-content
       .modal-header
         %h3= "Editing #{@bar.foo}"
       .modal-body
         = render "form"

请注意，我们有一个 id 为 bar-modal 的模态框，它将被渲染到占位符 div #modal-container 中，它应该在 index.html.haml 中。应该是这样的。

%div{id: "modal-container"}
  <!-- this is where the modal will go in -->

- @bars.each do |bar|
  = link_to "Edit", edit_bar_path(bar), remote: true, class: "btn btn-default"

将modal-container 添加到文档顶部。从引导程序的文档中，

模态标记放置

始终尝试将模态框的 HTML 代码放在文档中的顶级位置，以避免其他组件影响模态框的外观和/或功能。

希望这会有所帮助！