contrôler les indices de simple_form

Question

Je veux révéler l'indice dans la zone de saisie du formulaire simple. Si la sélection de l'unité "area_unit" change，l'indice change aussi, area_unit peut choisir le mètre carré et le pied carré. Par exemple : Lorsque area_unit sélectionne sq.m, surface_area affiche la valeur actuelle de area_unit comme sq.m , alors que l'indice affiche la valeur de area_unit comme sq.feet. vice versa.

le code minceur :

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

Lorsque l'unité de surface change, la valeur surface_area change également.

  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)

Mais comment définir le contenu des indices ?

Answer 1

Vous devrez le faire en utilisant Javascript, aussi. En principe, vous pouvez simplement l'ajouter à la balise change événement. Si vous utilisez le générateur de formulaire simple_form par défaut, le champ d'indication doit être rendu sous la forme d'un champ de type <span> à côté du champ de saisie lui-même c'est-à-dire que vous devriez voir quelque chose comme ce qui suit lorsque vous ouvrez la source de la page :

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

La tâche consiste donc à mettre à jour la valeur de l'indice span dans le change événement de la sélection des unités. Le code suivant fait cela :

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

Le code ci-dessus recalcule la surface en fonction des autres unités (vous pourriez tout aussi bien utiliser la valeur originale de l'option property_surface_area mais le nouveau calcul l'arrondit également) et définit le contenu de l'indice à cette valeur, y compris les autres unités. Le sélecteur pour l'indice est : "le div d'habillage pour toute la ligne du formulaire → le span avec la classe 'hint'".