jquery ui plusieurs curseurs et leurs valeurs lors de la validation du formulaire

Question

I m mise en place à l'aide de curseurs 5 UI jQuery sous une forme comme ceci:

$(".slider").slider({ 
    step: 1, 
    min:0, 
    max:10, 
    value: 5, 
    start: // start logic, 
    slide: function(event, ui) { //slide logic }, 
    stop: function(event, ui) { //stop logic } 

}); Les curseurs font partie d'un formulaire avec d'autres champs tels que le nom, le courrier électronique, etc. Lorsque le formulaire est soumis et que je montre le formulaire avec des erreurs possibles, les curseurs sont réinitialisés à 5 (valeur par défaut). Est-il possible au lieu de réinitialiser d'afficher les valeurs assignées par l'utilisateur?

Answer 1

Vous pouvez configurer des champs de formulaire cachés qui contiennent les valeurs des curseurs lorsqu'ils changent.

Ensuite, lorsque votre formulaire recharge, définissez les curseurs en fonction des champs de formulaire masqués. Ce que je fais habituellement avec les curseurs est d'avoir une zone de texte directement au-dessous d'eux qui est mise à jour lorsque l'utilisateur définit le curseur. Avec certaines conventions de nommage cohérentes, c'est assez facile à faire.

Voici un exemple simple:

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".slider1").slider({ 
     step: 1, 
     min: 0, 
     max: 10, 
     value: 5, 
     slide: function(event, ui) { 
      //get the id of this slider 
      var id = $(this).attr("id"); 

      //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
      $("input[id*=" + id + "]").val(ui.value); 
     } 
    }); 
}); 

Voici la partie HTML:

<div class="slider1">  
</div> 
<input type="text" id="slider1-txt" /> 

Si vous ne voulez pas que les boîtes d'entrée vous pouvez simplement les remplacer par des champs cachés .