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"

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

出于某种原因，如果我点击链接，则不显示模态。我让它以不同的方式工作，但随后它打开了一个“创造”的方式。形式而不是编辑。

我使用bootstrap和haml。我确保萤火虫没有错误。

我错过了什么？

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中的modal-container index.html.haml代码为_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"中的模态看起来应该是这样的：

bar-modal

请注意，我们有一个ID为#modal-container的模式，并且会将其呈现到占位符div index.html.haml中，该占位符div应位于%div{id: "modal-container"}  - @bars.each do |bar| = link_to "Edit", edit_bar_path(bar), remote: true, class: "btn btn-default"中。它应该是这样的。

modal-container

将<div class="output">0 hours 12 minutes and 40 seconds remaining</div>添加到文档顶部。从bootstrap的文档中，

模态标记展示位置

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

希望这有帮助！

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

1 个答案: