CODEWITHSUNDEEP
ruby-on-rails
samando
samando

Reputation: 139

Text fields are blank when editing item

I am creating an simple app for lists to learn Ruby on Rails. Lists is the main controller, similar to posts or articles, and listitems is similar to comments.

With my current project, I am have the editing of list items be in a div that shows up when edit is clicked rather than a new webpage like this:

Image of Editing List Item

The problem that I'm having for the past four days is that the edit form is not populated with the content from the list item that I am editing. I have done a lot of research and I can do it if I was editing on a different webpage, but since I am on show.html.erb for Lists and not edit.html.erb of ListItems, it does not work.

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: I am using this form for adding new items and editing. Maybe I need to create a separate form just for editing? (I am only including the first line)

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

show.html.erb: This is the link to editing in 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>");

I have thought about using just javascript to detect button press but I do not know how I would detect which edit button is being pressed. I would not be able to populate the fields without knowing which one I am editing.

Upvotes: 0

Views: 60

Answers (1)

SteveTurczyn
SteveTurczyn

Reputation: 36860

Before the Edit button opens the model you use javascript or jquery to copy the values from the line into the fields on the modal.

To do this, you may need to give the form divs unique html ids.

So, imagining that your third line is list_item with ID = 3, the third line might look like 

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

or something similar (adapt to what you have in your view) so change it to...

<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>

So you've created ids like "name_3" and "desc_3" etc.

Then in myFunction you'd do the following (but replace the target form field ids I'm using with your actual form field ids)

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');
}

You may also want to do something similar with a hidden id field in the form so that you know which record is being edited.

Upvotes: 2

Related Questions