Rails: Delete nested attribute while updating entry

Question

I have a form with nested attributes, where you can dynamically add and remove attributes (the form lets you click "add hobby" and "remove hobby" links...a user has hobbies, and when entering his profile he can add one, two, five, or fifty hobbies).

With the help of the nested form gem this works completely fine. However, I also provide the ability to UPDATE a user's profile.

When doing this, a user can click the dynamic "remove" link to take off a hobby. However, this doesn't delete the "hobby" from the database, like I want it to. So I'm trying to write Jquery or Javascript or something that deletes the object from the database, if it exists.

This is what the code looks like:

  ...
  ...
  <%= f.fields_for :hobbys, :wrapper => false do |hobby| %>
    <tr class="fields">
      <td> <%= user.text_field :hobby %> </td>
      <td> <%= user.link_to_remove "Remove" %> </td>
    </tr>
  <% end %>
</table>
<p><%= f.link_to_add "Add hobby", :hobbys, :data => { :target => "#hobbys" } %></p>

<script>  
  $(document).on('nested:fieldRemoved', function(event){
  var field = event.field; 
  /* ??? Delete field somehow ??? */
  })
</script>

Is there any way to do this? I really don't know how to go about it....it doesn't seem like Jquery can delete off a database...

UPDATE

here's my best attempt so far...

   ...
  ...
  <%= f.fields_for :hobbys, :wrapper => false do |hobby| %>
    <tr class="fields">
      <td> <%= user.text_field :hobby %> </td>
      <td> <%= user.link_to_remove "Remove" %> </td>
    </tr>
  <% end %>
</table>
<p><%= f.link_to_add "Add hobby", :hobbys, :data => { :target => "#hobbys" } %></p>
<script>  
  $(document).on('nested:fieldRemoved', function(event){
    $.get("delete", { id: 2 })
    alert( "Deleted: ");
 })
</script>

I'm just trying to get this damn thing to work, by hardcoding an id as the argument (since I can't yet easily extract it). But it keeps using the string "delete" as the id of the user.....huh??

Here's the log output:

Started GET "/users/delete?id=2" for 127.0.0.1 at 2016-10-05 08:35:15 -0400
Processing by UsersController#show as */*
  Parameters: {"id"=>"delete"}
  Current user: anonymous
Completed 404 Not Found in 19.5ms

ActiveRecord::RecordNotFound (Couldn't find User with id=delete):

Answer 1

You could use Jquery to call a function in Ruby to do it for you:

Javascript:

$.get( "delete", { id: id_to_delete } )
  .done(function( deleted ) {
    alert( "Deleted: " + deleted.id );
  });

Route (route.rb):

get 'delete', to: 'application_controller#delete'

Application Controller (application_controller.rb):

def delete
    id = params[:id].to_i
    to_delete = Hobby.find(id).destroy
    render json: {id: id}
end

Answer 2

Add a listener on click of the remove button for each activity and make an ajax request to your backend api which handles it. It will look something like below:

$('.activities').each(function(activity) {
  $(activity).click(function(event) {
    $.ajax
      url: 'activity/:id',
      method: delete,
      success: function(data) { REMOVE ELEMENT IN HERE }
      error: alert('this didnt work');
  })
})