编辑项目时文本字段为空白

Question

我正在为列表创建一个简单的app来学习Ruby on Rails。列表是主要控制器，类似于帖子或文章，列表项类似于评论。

使用我当前的项目，我可以在列表中编辑列表项，在单击编辑时显示，而不是像这样的新网页：

我过去四天遇到的问题是编辑表单中没有填充我正在编辑的列表项中的内容。我已经做了很多研究，如果我在不同的网页上进行编辑，我可以做到这一点，但因为我在 show.html.erb 列表而不是 edit.html.erb 的ListItems，它不起作用。

listitems_controller.rb：

def edit
  @list = List.find(params[:list_id])
  @listitem = @list.listitems.find(params[:id])

  respond_to do |format|
    format.js
  end
end

def update
  @list = List.find(params[:list_id])
  @listitem = @list.listitems.update(listitem_params)

  redirect_to list_path(@list)
end

_itemForm.html.erb： 我正在使用此表单添加新项目和编辑。也许我需要创建一个单独的表单来进行编辑？ （我只包括第一行）

<%= form_with(model: [ @list, @list.listitems.build ], local: true) do |form| %>

show.html.erb： 这是show.html.erb中编辑的链接。

<td><%= link_to 'Edit', edit_list_listitem_path(:list_id => @list.id, :id => item.id), class: 'btn btn-default', :remote => true %></td>

lists_controller.rb：

def show
  @list = List.find(params[:id])
end

edit.js.erb：

$("#container").append("<div id='editItemContainer'><div id='editItem'><h3>Edit item</h3><%= j render(:partial => 'itemForm', :locals =>{ :listitem => @listitem }) %></div></div>");

我已经考虑过只使用javascript来检测按钮按下但我不知道如何检测正在按下哪个编辑按钮。如果不知道我正在编辑哪一个，我将无法填充字段。

Answer 1

在“编辑”按钮打开模型之前，您可以使用javascript或jquery将行中的值复制到模态的字段中。

为此，您可能需要为表格提供唯一的html ID。

所以，想象你的第三行是ID = 3的list_item，第三行可能看起来像

<span><%= list_item.name %></span>
<span><%= list_item.description %></span>
<span><%= list_item.link %></span>
<button onclick='myFunction()'>Edit</button>

或类似的东西（适应你视图中的内容），所以将其改为......

<span id='name_<%=list_item.id%>'><%= list_item.name %></span>
<span id='desc_<%=list_item.id%>'><%= list_item.description %></span>
<span id='link_<%=list_item.id%>'><%= list_item.link %></span>
<button onclick='myFunction(<%=list_item.id%>)'>Edit</button>

所以你已经创建了像＆＃34; name_3＆＃34;和＆＃34; desc_3＆＃34;等

然后在myFunction中，您执行以下操作（但替换目标表单字段ID，我将使用您的实际表单字段ID）

function myFunction(item_id) {
  $('#form_name').val($('#name_'+item_id).html());
  $('#form_desc').val($('#desc_'+item_id).html());
  $('#form_link').val($('#link_'+item_id).html());
  $('#myModal').modal('show');
}

您可能还希望在表单中使用隐藏的id字段执行类似的操作，以便了解正在编辑的记录。