, simple_form

Question

ipuçlarını kontrol eder. Simple_form giriş kutusundaki ipucunu göstermek istiyorum. "Area_unit" seçimi değişirse de h ipuçları da değişir, area_unit metrekare ve feet kare seçebilir. Örneğin: area_unit sq.m öğesini seçtiğinizde, surface_area, field_unit değerini sq.m olarak gösterirken, ipucu, area_unit değerini sq.feet olarak görüntüler. tersine.

ince kodu:

.col-md-3.col-xs-6 
= f.input :surface_area, label: "Surface Area" ,hint:"" 
.col-md-3.col-xs-6 
= f.input :area_unit, collection: Property::AREA_UNIT_NAMES.map(&:reverse), include_blank: false 
/(in \u33A1) 

AREA_UNIT değişiklikleri, değer surface_area de değişiyor.

switchUnit: -> 
    $(document).on 'change', '#property_area_unit', -> 
     areaInput = $('#property_surface_area') 
     if $(this).val() == 'sq_m' 
     area = Math.round(parseFloat(areaInput.val())*0.0929*100)/100 
     else 
     area = Math.round(parseFloat(areaInput.val())*10.7639*100)/100 
     areaInput.val(area) 

İçeriği nasıl ayarlamanız ipuçları?

Answer 1

Bunu da Javascript kullanarak yapmalısınız. Prensip olarak, onu change etkinliğine ekleyebilirsiniz. Varsayılan simple_form formu oluşturucu kullanırsanız, o zaman ipucu alan gibi bir şey görmelisiniz yani giriş alanına kendisi bir <span> sonraki olarak oluşturulması gereken sayfanın kaynağını açarken aşağıdaki:

<div class="input string optional property_surface_area field_with_hint"> 
    <label class="string optional" for="property_surface_area">Surface Area</label> 
    <input class="string optional" type="text" value="" name="property[surface_area]" id="property_surface_area" /> 
    <span class="hint"></span> 
</div> 

Görev, birimler seçiminin span ipucunun değerini change olayında güncellemektir.

switchUnit: -> 
    $(document).on 'change', '#property_area_unit', -> 
    areaInput = $('#property_surface_area') 
    areaHint = $('.property_area_unit span.hint') 
    if $(this).val() == 'sq_m' 
     area = Math.round(parseFloat(areaInput.val()) * 0.0929 * 100)/100 
     areaInOtherUnits = Math.round(area * 10.7639 * 100)/100 
    else 
     area = Math.round(parseFloat(areaInput.val()) * 10.7639 * 100)/100 
     areaInOtherUnits = Math.round(area * 0.0929 * 100)/100 
    areaInput.val(area) 
    areaHint.html('= ' + areaInOtherUnits + ($(this).val() == 'sq_m' ? ' sq feet' : ' sq m')) 

Yukarıdaki kod (siz de muhtemelen sadece property_surface_area girişten orijinal değeri kullanmak, ancak yeniden hesaplama da bunu yuvarlar) diğer birimlere geri alan yeniden hesaplar ve ayarlar: Aşağıdaki kod bunu yapar Diğer birimler de dahil olmak üzere bu değere ipucu içeriği. İpucu için seçici: "tüm form satırı için sarma divı → 'ipucu' sınıfıyla açıklık".