distribution_list.coffee

$(document).on 'page:update', (event) ->
  $("#remove_users").on 'ajax:before', (xhr, settings) ->
    user_ids = ($(user).val() for user in $(@).find("ul.active-users li.internal-user input:checked"))
    external_users = ($(user).val() for user in $(@).find("ul.active-users li.external-user input:checked"))
    console.log users
    return false if internal_users.length is 0 and external_users.length is 0
    users =
      params:
        user_ids: user_ids
        external_users: external_users
    $(@).data( users )

$(document).on 'ready page:load', (event) ->

  $(".edit_distribution_list")
    .on 'ajax:before', (xhr, settings) ->
      internal_user_ids = ($(user).data("id") for user in $(@).find("ul.dropzone-list.active-users li.user.new .template-user"))
      external_user_emails = ($(user).data("email") for user in $(@).find("ul.dropzone-list.active-users li.new.external-user .template-user"))
      $(@).find("input.internal-user-ids").val(JSON.stringify(internal_user_ids))
      $(@).find("input.external-user-emails").val(JSON.stringify(external_user_emails))
    .on 'ajax:beforeSend', (event, xhr, settings) ->
      submitButton = $(@).find('button[name="commit"]')
      submitButton.data 'origText', submitButton.text()
      submitButton.text 'Submitting...'
    .on 'ajax:complete', (evt, xhr, status) ->
      submitButton = $(@).find('button[name="commit"]')
      submitButton.text( submitButton.data('origText') )

whatever.html.haml

%tr.distribution-lists-holder{ data: { id: distribution_list.id } }
  %td{colspan: "5", data: { value: '' }}
    .user-drop
      .drop-holder{ class: 'arrow2nd' }
        = form_for distribution_list, remote: true, html: { id: "edit_distribution_list_#{distribution_list.id}" } do |f|
          .row.distribution-inputs-row
            .col-md-6
              %input.form-control{ placeholder: 'List Name', style: 'max-width:370px;' }
            .col-md-4
              .input-group{ style: 'max-width: 330px;'}
                %input.form-control.external-email{ placeholder: "Add External Recipient ([email protected])" }
                %span.input-group-btn
                  %button.btn.btn-default.external-add{ type: "button" }
                    %span.glyphicon.glyphicon-plus
                    %span.sr-only Add
            .col-md-2.text-right
              = f.button "Update List", class: %w(btn btn-main update-list), name: "commit"
          .row.distribution-list-row
            .col-md-6
              %h2.heading-transparent
                Unassigned
              %ul.user.circle-list
                - @users.each do |user|
                  %li.user{data: {id: user.id}}
                    .drag-item.template-user{data: {id: user.id}}
                      .circle.admin{class: inactive_user(user)}= initials_for(user)
                      .user-label= user.display_name.titleize
                      .user-label-sub= user.role.humanize.titleize

            .col-md-6
              .row
                .col-md-4
                  %h2.heading-transparent
                    Assigned Recipients
                .col-md-8.text-right
                  .container-select-all
                    .checkbox
                      %label
                        %input{ type: 'checkbox', class: 'select-all-users' }
                        Select All
                    = link_to 'Remove Selected', remove_users_distribution_list_path(distribution_list), method: :put, remote: true, id: "remove_users", class: "btn btn-alt"
                  = f.hidden_field :user_ids, class: "internal-user-ids"
                  = f.hidden_field :external_users, class: "external-user-emails"
              .dropzone-holder
                .drag-holder(style="min-height:220px;")
                  %ul.dropzone-list.active-users
                    - distribution_list.users.each do |user|
                      %li.user.internal-user{data: {id: user.id} }
                        .template-user
                          .circle.manager{class: inactive_user(user)}
                            = initials_for(user)
                          .user-label= user.display_name.titleize
                          .user-label-sub= user.role.humanize.titleize
                          = check_box_tag "distribution_list[internal_user][]", user.id, false, class: 'user-checkbox'

                    - distribution_list.external_users.each do |email|
                      %li.user.external-user{ data: {email: email}}
                        .template-user
                          .circle.manager.external EU
                          .user-label= email
                          .user-label-sub= email
                          %a.action.action-delete.remove-external-user
                            %i.fa.fa-minus
                          = check_box_tag "distribution_list[external_user][]", email, false, class: 'user-checkbox'