使用 bootstrap 模态呈现编辑部分表单

Question

我正在 Ruby Rails 项目上工作，该项目具有与 Dropbox 类似的功能。我使用的宝石：

carrierwave: Uploading files

acts_as_tree: Folder directory

slim: cleaner html

bootstrap 4

我正在尝试合并呈现编辑表单的 bootstrap 模态，以便用户能够编辑我模型中的 file_name 属性。

- @documents.each do |document|
  = link_to document.file.filename, document.file.url
  b = document.file_name
  = number_to_human_size(document.file.size, :precision => 2)
  = document.content_type
  = document.updated_at
  = link_to "Download", document.file.url
  #renameButton.button.btn.btn-primary data-toggle="modal" data-target="#renameModal" Rename
  #renameModal.modal.fade tabindex="=1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
    .modal-dialog role="document"
      .modal-content
        .modal-header
          #exampleModalLabel.h5.modal-title Rename folder
          button.close data-dismiss="modal" aria-label="Close"
            span aria-hidden="true" &times;
        .modal-body
          = form_for document do |f|
            = f.label :name
            = f.text_field :file_name
            = f.submit
        .modal-footer
          button.btn.btn-outline-success data-dismiss="modal" aria-hidden="true" Close
          button.btn.btn-outline-danger Save changes
  = link_to "Delete", document, :confirm => 'Are you sure?', :method => :delete

我遇到的问题是，每当我单击任何 "rename" 按钮时，模态内呈现的编辑表单总是指向第一个文件条目而不是选定的文件条目。

我认为在我的 do-loop 中有一个模式会导致这个问题。

有办法解决这个问题吗？

Answer 1

问题可能是您使用相同的 data-target 重命名按钮单击以打开模型，并且每个模态框都有相同的 ID

尝试对每个 id 使用迭代器

data-target="#renameModal#{index}"

还有您的模型 ID 应该是：

id: "#renameModal#{index}"

我不太了解 slim 语法的使用，所以请使用您的 slim 语法。这只是一个基本的 Bootstrap 概念。

希望这对您有所帮助...

使用 bootstrap 模态呈现编辑部分表单

Rendering an edit partial form with bootstrap modals

ruby-on-rails

partials

bootstrap-modal