Reusable action components

behaviors.coffee

$ ->

  $('[data-remove-parent]').bind 'ajax:success', ->
    el = $(this)
    console.log el
    console.log el.data('remove-parent')
    console.log el.closest(el.data('remove-parent'))
    el.closest(el.data('remove-parent')).fadeOut()
    
  $('[data-live-input]').change ->
    el = $(this)
    data = {}
    data[el.data('param')] = el.val()
    ajax = $.ajax(
      url: el.data('action'),
      type: el.data('method') || 'PUT',
      dataType: 'script',
      data: data
    )
    ajax.done -> el.effect('highlight', {color: '#dff0d8'}, 2000)
    ajax.fail -> el.effect('highlight', {color: '#f2dede'}, 2000)
 

example.html.erb

<div class=".removable-parent">

  <%= order_item.item.description %>

  <%= order_item_form.text_field :quantity, data: {
    'live-input' => true,
    method: :put,
    action: public_order_item_path(order_item.item_id)
  } %>

  <%= link_to 'Remove', public_order_item_path(order_item.item_id),
    method: :delete, 
    remote: true, 
    data: { 'remove-parent' => '.removable-parent' },
    confirm: 'Are you sure?' %>

</div>