Вложенная форма скрывает и показывает div с помощью обратных вызовов Cocoon jQuery

Я использую кокон в своем приложении ruby ​​on rails 4 для обработки вложенной формы. В одной из моих вложенных форм я даю пользователю возможность добавлять несколько контактов, и если этот контакт отмечен «да» в поле is_personal_guarantor, я хотел бы отобразить больше входных данных, которые находятся внутри div. Я хочу убедиться, что если пользователь запускает div в одной вложенной форме, это не повлияет на другие вложенные формы того же объекта на странице.

# Form
<div id="business_contact">
    <%= f.fields_for :business_contacts, :wrapper => true do |contact_form| %>
        <%= render 'business_contact_fields', :f => contact_form %>
    <% end %>
    <%= link_to_add_association "Add a contact", f, :business_contacts %>
</div>

# business_contact_fields partial
<div class="nested-fields">        
    <fieldset>
        <div class="row">
            <!-- Input fields -->
            <%= f.select :is_personal_guarantor, options_for_select([["Select", ""], ["Yes", TRUE], ["No", FALSE]], disabled: [""]) %>
        </div>
        <div class="guarantor_details">
            <!-- Input fields -->
        </div>
    </fieldset>
</div>

# jQuery
$(document).ready(function() {
    $('#business_contact')
    .on('cocoon:after-insert', function(e, added_contact) {
       $(".guarantor_details").hide();
       // Logic to be added
    })
});

Я понимаю, что аргумент added_contact в функции - это то, что мне нужно использовать, я просто не знаю, как запустить на нем логику if / else для отображения div guarantor_details. Я зашел так далеко, используя документы-коконы.


ruby-on-rails jquery ruby-on-rails-4 cocoon-gem
person Questifer    schedule 07.04.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не тестировал, но вы можете попробовать что-то вроде этого:

Дайте класс помощнику select:

<%= f.select :is_personal_guarantor, options_for_select([["Select", ""], ["Yes", TRUE], ["No", FALSE]], disabled: [""]), class: 'personal-guarantor' %>

in JS:

$('.personal-guarantor').on('select', function() {

  selectedValue = $(this).val();
  guarantorDetails = $(this).closest('.guarantor_details');

  if(selectedValue == TRUE) { guarantorDetails.hide(); } 
  else { guarantorDetails.show(); }

});
person Sharvy Ahmed    schedule 07.04.2015