2016-07-06 3 views
1

나는 필드의 표시/숨기기를 위해 dependent-fields-rails gem을 사용하고 있습니다. 대부분, 정말 잘 작동합니다! 그러나 종속 필드 - 레일은 ID (CSS/JS 의미에서 ID)를 필요로하기 때문에 중첩 된 필드를 대상으로 지정하는 방법을 파악하는 데 어려움을 겪고 있습니다. 예측/코드화.레일 형태로 중첩 된 필드의 ID를 지정하기

예 :

사용자가 가지고있는 신용 카드는 많습니다. 신용 카드 청구서 수신 주소를 입력 할 때 사용자가 해당 필드에 대해 선택한 값에 따라 미국 주나 캐나다 지방을 표시하려고합니다. 일부 신용 카드에서

<%= bootstrap_form_for(@user) do |f| %> 
...user info fields... 
<div> 
     <%= f.fields_for :credit_cards do |card| %> 
      <%= render 'shared_partials/credit_card_fields', f: card %> 
     <% end %> 
     <%= link_to_add_association 'Add Credit Card', f, :credit_cards, partial: 'shared_partials/credit_card_fields' %> 
     </div> 
    <%= f.submit "Save and Submit" %> 
<% end %> 

:

<div class="nested-fields"> 
     <%= f.text_field :card_holder_first_name, :label => "Card Holder First Name" %> 
     <%= f.text_field :card_holder_last_name, :label => 'Card Holder Last Name' %> 
     <%= f.select :card_type, ["Master Card", "American Express","VISA"] %> 
     <%= f.text_field :card_number, :label => 'Card Number', placeholder: 'Must be 15 or 16 digits long.' %> 
     <%= f.text_field :ccv, :label => 'CCV Number' %> 
     <%= f.date_select :expiration_date, as: :date_select, order: [:month, :year] %> 
     <%= f.select :country, [["USA", "USA"],["Canada","Canada"]] %> 
     <%= f.text_field :street_address %> 
     <%= f.text_field :city %> 
     <div class="js-dependent-fields" data-select-id='user_credit_cards_attributes_country' data-option-value='USA'> 
     <%= f.select :state, us_states %> 
    </div> 
<%= f.text_field :zip %> 
     <%= link_to_remove_association "Remove Credit Card", f %> <br> 
     <hr /> 
    </div> 

여기에서의 문제 나 국가 선택 필드의 ID를 대상으로하는 방법을 알아낼 수 없다는 것입니다. "user_credit_cards_attributes_country"시도를 보았지만 작동하지 않습니다. 소스를 볼 때 ID는 다음과 같습니다. id = "user_credit_cards_attributes_1467770518320_country" 중간에있는 숫자가 매번 변경됩니다. 나는 이것이 fields_for 컨텍스트에서 이것을 수행하고 있기 때문에 이것을 알지만 동적 인 ID를 대상으로하는 방법을 알지 못합니다. 아이디어? 예측 가능한 선택 .country-dropdown을 제공한다

<%= f.select :country, [["USA", "USA"],["Canada","Canada"]], class: 'country-dropdown' %> 

:

답변

0

가장 쉬운 해결책은 같은 사용자 정의 class 당신이 다음 CSS/JS에 사용할 속성, 그래서 뭔가를 추가하는 것입니다.