controlla i suggerimenti di simple_form

Question

Voglio rivelare il suggerimento nella casella di input di simple_form. Mentre la selezione dell'unità "area_unità" cambia, anche i suggerimenti cambiano, area_unit può scegliere metri quadrati e piedi quadrati. Ad esempio: Quando area_unit seleziona sq.m, surface_area visualizza il valore corrente area_unit come sq.m, mentre il suggerimento visualizza il valore area_unit come sq.feet. vice versa.

il codice sottile:

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

Quando cambia area_unit, il valore surface_area cambia troppo.

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) 

Ma come impostare il contenuto dei suggerimenti?

Answer 1

Avrete bisogno di farlo utilizzando anche Javascript. In linea di principio, puoi semplicemente aggiungerlo all'evento change. Se si utilizza il costruttore modulo simple_form di default, allora il campo suggerimento dovrebbe essere reso come <span> accanto al campo di immissione in sé, per esempio, si dovrebbe vedere qualcosa di simile a quanto segue quando si apre il sorgente della pagina:

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

Quindi l'attività è di aggiornare il valore del suggerimento span nell'evento change della selezione delle unità. Il seguente codice lo fa:

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

Il codice di cui sopra ricalcola la zona posteriore alle altre unità (si potrebbe pure probabilmente solo utilizzare il valore originale dall'ingresso property_surface_area, ma il ricalcolo arrotonda anche esso) e imposta il suggerimento del contenuto su questo valore, comprese le altre unità. Il selettore per il suggerimento è: "il div wrapping per l'intera linea di form → lo span con la classe 'hint'".