Manipulating Inserted Fields from Checkbox and Select via Jquery - Cocoon Rails

Question

I'm having trouble accessing and using the value of a checkbox and then select field for forms dynamically added via the Cocoon Gem for Rails. I've read through many SO posts and the official Cocoon documentation and I just can't seem to get it right.

The idea is that after adding a form via Cocoon, there are hidden fields that only show up if a specific checkbox is :checked, with one of those fields that being a f.select and upon the selection of that value more fields will either show or hide.

_mortgage_fields.html.erb

...

<%= f.form_group :misc_mortgage do %>
  <%= f.check_box :misc_mortgage, label: "Miscellaneous Mortgage" %>
<% end %>

<%= f.select :misc_mortgage_context, [["Assignment", "Assignment"], ["Subordination", "Subordination"], ["Modification", "Modification"]],
               { label: "Miscellaneous Mortgage Type" }, wrapper: { class: 'mtgHidden' }%>

<%= f.text_field :reference_mortgage, class: 'form-control', wrapper: { class: 'mtgHidden' } %>

<%= f.text_field :subordinated_mortgage, class: 'form-control', wrapper: { class: 'Subordination' } %>

<%= f.text_field :modification_amount, class: 'form-control', wrapper: { class: 'Modification' } %>

...

The top level form is wrapped with <div id="mtgForm">..</div>

cocoonoptions.js

$(document.ready(function() {


  $('#mtgForm').on('cocoon:after-insert', function(e, misc_checkbox) {

    alert('getting there');

    $(misc_checkbox).find('input[type=checkbox][id*="+misc_mortgage"]').change(function() {

            alert('almost there');

            if ($(this).is(':checked'))
                alert('there!');
                $('.mtgHidden').show();
            else
                $('.mtgHidden').hide();
        });



    $(misc_checkbox).find("select[name*='misc_mortgage_context']").change(function() {
        var mtg = $(this).val();

        if (mtg == "Subordination") {
            $('.Subordination').show();
            $('.Modification').hide();
        }
        else if (mtg == "Modification") {
            $('.Modification').show();
            $('.Subordination').hide();
        }
        else {
            $('.Subordination').hide();
            $('.Modification').hide();
        }
    });
});

The wrapper: { ... } fields are set to display: none by CSS and then shown or hidden according to the above values via JS. This same code works (without the cocoon:after-insert part of course) on a static HTML page for adding a single item without the necessity of adding multiple items at once like Cocoon is beautifully made to do.

I've tried the code above many different ways based on different posts or sites I've found online but I can only seem to get the first test alert to fire. Including misc_checkbox.find('...') without the $(...) wrapper.

Am I going about this the wrong way or is my code just incorrect? Thanks in advance for any and all help!

Update

Of course as soon as I post the question I figured it out. The + in [id*="+misc_mortgage"] was throwing it off and I wasn't loading cocoonoptions.js correctly. Going to leave this question up so maybe it will help someone in the future.

Answer 1

So my code was almost correct. Once I changed $(misc_checkbox).find('input[type=checkbox][id*="+misc_mortgage"]') to $(misc_checkbox).find('input[type=checkbox][id*="misc_mortgage"]') and loaded the JS via

<% content_for :javascript do %>

  <script type="text/javascript">


  </script>

<% end %>

function at the bottom of view, everything worked.