Steuern Sie die Hinweise von simple_form

Question

Ich möchte den Hinweis im Eingabefeld von simple_form aufdecken. Während die Auswahl der Einheit "area_unit" sich ändert, ändern sich auch die Hinweise, area_unit kann Quadratmeter und Quadratfuß wählen. Beispiel: Wenn Area_unit sq.m auswählen, zeigt der Oberflächenbereich den aktuellen Wert area_unit als sq.m an, während der Hinweis den Wert area_unit als sq.feet anzeigt. und umgekehrt.

die schlanke Code:

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

Wenn die area_unit ändert, wird der Wert surface_area auch ändert.

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) 

Aber wie den Inhalt die Hinweise setzen?

Answer 1

Sie müssen es auch mit Javascript tun. Im Prinzip können Sie es einfach zum Ereignis change hinzufügen. Wenn Sie die Standard simple_form Formular-Builder verwenden, dann sollte das Hinweisfeld als <span> neben dem Eingabefeld selbst gemacht werden, also sollten Sie so etwas wie das sehen Sie bei der die Quelle der Seite zu öffnen:

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

Die Aufgabe ist also, den Wert des Hinweises span im change Ereignis der Einheitenauswahl zu aktualisieren. Der folgende Code funktioniert das:

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

Der obigen Code den Bereich zurück zu den anderen Einheiten neu berechnet (man könnte auch wahrscheinlich nur den ursprünglichen Wert aus dem Eingang property_surface_area verwenden, aber die Neuberechnung rundet es auch) und setzt die Hinweis auf diesen Wert, einschließlich der anderen Einheiten. Der Selektor für den Hinweis ist: "das Wrapping div für die gesamte Formularzeile → der Bereich mit der 'Hinweis' Klasse".