從複選框操作插入的字段並通過Jquery - Cocoon導軌選擇

我無法訪問和使用複選框的值，然後爲通過Cocoon Gem for Rails動態添加的表單選擇字段。我已經閱讀了許多SO帖子和官方Cocoon文檔，我似乎無法做到。從複選框操作插入的字段並通過Jquery - Cocoon導軌選擇

這個想法是，通過Cocoon添加表單後，隱藏字段只有在特定複選框爲:checked時纔會顯示，其中一個字段爲f.select，並且在選擇該值時，更多字段將顯示或隱藏。

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

...

頂層形式包裹有<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(); 
     } 
    }); 
});

的wrapper: { ... }字段被設置爲display: none通過CSS，然後通過JS根據上述值顯示或隱藏。這個代碼的工作原理（沒有cocoon:after-insert課程的一部分）在一個靜態的HTML頁面上添加一個項目，而無需像Cocoon一樣添加多個項目。

我已經嘗試了許多不同方式的代碼，基於我在網上找到的不同帖子或網站，但我似乎只能得到第一個測試警報。包括misc_checkbox.find('...')而不包含$(...)包裝。

我是以這種錯誤的方式行事還是我的代碼錯誤？預先感謝任何和所有幫助！

更新

當然，只要我後我想通了這個問題。在[id*="+misc_mortgage"]丟掉它，我沒有正確加載cocoonoptions.js。要留下這個問題，所以也許它會在未來幫助別人。

來源

2017-07-08 cdouble.bhuck

偉大的，你找到答案。如果您在需要時添加更新作爲未來開發人員的答案，或者如果您希望我可以添加答案來引用您並接受答案，那將會很好。許多開發人員不會閱讀沒有答案的問題，即使答案在問題本身內:) – Rubioli

所以我的代碼是差不多是正確的。有一次，我在看底部通過

<% content_for :javascript do %> 

    <script type="text/javascript"> 


    </script> 

<% end %>

功能改變 $(misc_checkbox).find('input[type=checkbox][id*="+misc_mortgage"]') 到$(misc_checkbox).find('input[type=checkbox][id*="misc_mortgage"]')和加載JS，一切工作。

來源

2017-07-09 14:48:42

從複選框操作插入的字段並通過Jquery - Cocoon導軌選擇

回答

相關問題