kontrolować wskazówki prostego_formularza

Question

Chcę ujawnić podpowiedź w polu wejściowym simple_form. Gdy zmienia się wybór jednostki "obszar_węzeł", wskazówki również się zmieniają, obszar_strony może wybrać metr kwadratowy i metr kwadratowy. Na przykład: Gdy parametr unit_unit wybierze wartość sq.m, parametr surface_area wyświetla bieżącą wartość area_unit jako sq.m, a wskazówka wyświetla wartość area_unit jako sq.feet. nawzajem.

smukły Kod:

.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) 

Gdy zmiany area_unit wartość surface_area zmienia też.

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) 

Ale jak ustawić treść wskazówek?

Answer 1

Będziesz musiał to zrobić również przy pomocy Javascript. Zasadniczo możesz po prostu dodać go do wydarzenia change. Jeśli używasz domyślnego formularza simple_form budowniczy, wówczas pole wskazówka powinna być renderowane jako <span> obok pola wejściowego samego, tj powinieneś zobaczyć coś jak następujące po otwarciu źródło strony:

<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> 

Tak więc zadaniem jest zaktualizowanie wartości podpowiedzi span w zdarzeniu wyboru jednostek w . Poniższy kod robi:

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')) 

Powyższy kod przelicza okolicę z powrotem do innych jednostek (można także prawdopodobnie wystarczy użyć oryginalnej wartości z wejścia property_surface_area, ale przeliczanie zaokrągla go również) i ustawia podpowiedź treści do tej wartości, w tym do innych jednostek. Selektor wskazówka jest: "div opakowywania dla całej linii formularza → zakres z" podpowiedź "klasy".