Manipulierte eingefügte Felder aus Kontrollkästchen und Auswahl über Jquery - Cocoon Rails

Question

Ich habe Probleme beim Zugriff und die Verwendung des Werts eines Kontrollkästchens und dann Feld für Formulare dynamisch über das Cocoon Gem für Rails hinzugefügt. Ich habe viele SO-Posts und die offizielle Cocoon-Dokumentation gelesen und ich kann es einfach nicht richtig verstehen.

Die Idee ist, dass nach einer Form über Cocoon geben, dort Felder ausgeblendet, die zeigen nur an, wenn eine bestimmte Option :checked ist, mit einem der Felder, die eine f.select und bei der Auswahl dieses Wertes wird mehr Felder entweder ein- oder ausblenden

_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' } %> 

... 

Die Top-Level-Form mit <div id="mtgForm">..</div>

gewickelt 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(); 
     } 
    }); 
}); 

wrapper: { ... } Die Felder werden auf display: none per CSS und dann nach den oben genannten Werten über JS ein- oder ausgeblendet. Derselbe Code funktioniert (ohne den cocoon:after-insert Teil natürlich) auf einer statischen HTML-Seite für das Hinzufügen eines einzelnen Artikels ohne die Notwendigkeit, mehrere Artikel gleichzeitig hinzuzufügen, wie es Cocoon wunderbar gemacht hat.

Ich habe den Code oben viele verschiedene Möglichkeiten versucht, basierend auf verschiedenen Posts oder Websites, die ich online gefunden habe, aber ich kann nur scheinen, um die erste Testalarm zu schießen. Einschließlich misc_checkbox.find('...') ohne den $(...) Wrapper.

Gehe ich das falsch herum oder ist mein Code einfach falsch? Vielen Dank im Voraus für jede Hilfe!

aktualisieren

Natürlich, sobald ich die Frage poste ich es herausgefunden. Die + in [id*="+misc_mortgage"] warf es ab und ich lade cocoonoptions.js nicht korrekt. Ich werde diese Frage aufgeben, vielleicht wird es jemandem in der Zukunft helfen.

Answer 1

Also mein Code war fast korrekt. Sobald ich $(misc_checkbox).find('input[type=checkbox][id*="+misc_mortgage"]') zu $(misc_checkbox).find('input[type=checkbox][id*="misc_mortgage"]') geändert und geladen, um die JS über

<% content_for :javascript do %> 

    <script type="text/javascript"> 


    </script> 

<% end %> 

Funktion am unteren Rand der Ansicht, alles hat funktioniert.