jQuery Meetups

Envoi de données avec l'option "selectable" de jqueryui

Bonjour à tous,

Je débute avec jquery et mon problème ce situe sur l'option "selectable" proposée dans jqueryui.

J'aimerais utilisé cette option comme un input de type radio afin que l'utilisateur choisisse une date parmi toute celle proposé.

Mon code se présente comme suit :

Le javascript :

<script>

     $(function() {

             $( "#selectable" ).selectable({

                     stop: function() {

                             var result = $( "#select-result" ).empty();

                             $( ".ui-selected", this ).each(function() {

                                     var index = $( "#selectable li" ).index( this );

                                     result.append( + ( index + 1 ) );

});

});

});

</script>

et le html/php :

     <form action="" method="get" name="mod">

             <p id="feedback">

            //Cette ligne permet de renvoyer le numéro de la ligne sélectionnée

             <span id="select-result">none</span>. </p>

             <ol id="selectable">

                     <li class="ui-widget-content">Date 1</li>

                     <li class="ui-widget-content">Date 2</li>

                     <li class="ui-widget-content">Date 3</li>

                     <li class="ui-widget-content">Date 4</li>

             </ol>

                <center>

                        <input  type="submit" name="valider" value="" />

                </center>

        </form>

J'aimerais récupérer le numéro de la ligne sélectionner et l'envoyer en paramètre via un $_GET mais je ne vois pas du tout comment faire.

Si quelqu'un a déjà utilisé cette méthode, je suis preneur.

Merci d'avance,

Mika

Tags: de, données, formulaire, renvoi, selectable

Replies to This Discussion

Permalink Reply by Olivier Audard on May 25, 2011 at 7:56am

Hello,

L'approche naïve serait de récupérer les valeurs sélectionnées avant de faire une requête ajax manuellement (via $.get() par exemple).

Selon moi, pour rester cohérent avec les standards et garder un formulaire fonctionnel dans tous les cas, il vaut mieux utiliser des checkboxes "cachées" et garder le comportement normal du formulaire.

De cette façon, ton formulaire reste fonctionnel même dans un navigateur sans JS.

Une remarque: j'ai utilisé des checkboxes et non des boutons radio car le widget 'selectable' permet la selection multiple (via Ctrl+Clic ou drag'n'drop)

Ci-dessous ton code adapté:

<!DOCTYPE HTML><html lang="fr-FR">
<head>
 <meta charset="UTF-8">
       <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
  <script type="text/javascript" >

     $(function() {           

        $( "#selectable" ).selectable({                  

                stop: function() {                               

                var result = $( "#select-result" ).empty();                              
            $('input.check', this).removeAttr('checked') // Remise à zéro des checkboxes selectionnées

                                                        $(".ui-selected", this ).each(function() { 
                                                                 var index = $( "#selectable li" ).index( this ); 
                                                          result.append( + ( index + 1 ) );                
                                                 }).children('input.check').attr('checked', 'checked') // Ajout à la selection
                },
               create: function() {
                       // On cache les checkboxs une fois le plugin initialisé
                    $( ".check", this ).hide()
         }
             });      
     }); 

        </script>
</head>

<body>
<form action="" method="get" name="mod">

        <p id="feedback"> 
           Feedback: <span id="select-result">none</span>.
        </p>  

        <ol id="selectable">       
          <li class="ui-widget-content"><input type="checkbox" name="date[]" value="1" class="check"/>Date 1</li>    
              <li class="ui-widget-content"><input type="checkbox" name="date[]" value="2" class="check"/>Date 2</li>    
              <li class="ui-widget-content"><input type="checkbox" name="date[]" value="3" class="check"/>Date 3</li>    
              <li class="ui-widget-content"><input type="checkbox" name="date[]" value="4" class="check"/>Date 4</li> 
 </ol>                                 

        <div style="width:100%;text-align:center;">                                    
              <input  type="submit" name="valider" value="Envoyer" />                            
  </div>
</form> 

</body>

</html>