Rails Cocoon CoffeeScript Before-Insert

Question

Struggling to understand CoffeeScript and calling the Before-Insert Action with Cocoon in Rails... I need to filter out the Projects relating to the Company that is selected. The supplier filter works fine as it isn't related to Cocoon, but the Project filter doesn't work. Any help please?

My CoffeeScript

ready = ->

  $('#quote_supplier_id').parent().hide()
  suppliers = $('#quote_supplier_id').html()
  $('#quote_company_id').change ->
    company = $('#quote_company_id :selected').text()
    escaped_company = company.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g,'\\$1')
    options = $(suppliers).filter("optgroup[label='#{escaped_company}']").html()
    if options
      $('#quote_supplier_id').html(options)
      $('#quote_supplier_id').parent().show()
    else
      $('#quote_supplier_id').empty()
  $('#quote_supplier_id').parent().hide()

  $('#quote_transactions')
    .on('cocoon:before-insert'   
      projects = $('.projectselect').html()
      company = $('#quote_company_id :selected').text()
      escaped_company = company.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
      optionsprojects = $(projects).filter("optgroup[label='#{escaped_company}']").html()
      if optionsprojects
        $('.projectselect').html(optionsprojects)
      else
        $('.projectselect').empty()
    )


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

My Form

  <tbody id="quote_transactions">
    <%= f.fields_for :quote_transactions do |quote_transaction| %>
      <%= render 'transaction_fields', :f => quote_transaction %>
    <% end %>
  </tbody>
</table>

     <%= link_to_add_association '<i class="glyphicon glyphicon-plus"> Add Transaction</i>'.html_safe, f, :quote_transactions, :"data-association-insertion-node" => "tbody#quote_transactions", :"data-association-insertion-method" => "append", :partial => "transaction_fields", :type=>"button", :class=>"btn btn-default" %>

My Fields to Insert (and filter)

    <tr class='nested-fields'>
    <td>
    <div class="field">
      <%= f.grouped_collection_select :project_id, Company.order(:name), :projects, :name, :id, :description, {:include_blank => 'Please Select Project'}, {:class => 'form-control projectselect', :onfocus=>"extractId()", :onclick=>"extractId()"} %>
    </div>
    </td>
    <td>
    <div class="field">
      <%= f.text_field :description, :class=>"form-control" %>
    </div>
    </td>
    <td>
    <div class="field">
      <%= f.text_field :quote_amount, :class=>"form-control" %>
    </div>
    </td>
    <td>
    <%= link_to_remove_association '<i class="glyphicon glyphicon-remove"></i>'.html_safe, f, :class=>"btn btn-danger" %>
    </td>
    </tr>

Answer 1

The problem was locating the correct element, my CoffeeScript was updated to:

  $('#quote_transactions').bind 'cocoon:before-insert', (e, inserted_item) ->
    projectsElem = inserted_item.find('.projectselect')
    projects = projectsElem.html()
    company = $('#quote_company_id :selected').text()
    escaped_company = company.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
    optionsprojects = $(projects).filter("optgroup[label='#{escaped_company}']").html()
    if optionsprojects
      projectsElem.html(optionsprojects)
    else
      projectsElem.empty()