[jQuery] Widget multiselect, (dé)grisage dans un form

Widget multiselect, (dé)grisage dans un form [jQuery] - HTML/CSS - Programmation

Marsh Posté le 26-04-2011 à 12:06:13    

Bonjour les gens  :jap:

 

Je me suis attelé à la tache de faire un formulaire pour remplir différentes valeurs dans une base de données. Jusque là, rien de très pationnant :sleep:
A cause de mes besoins, j'ai du chercher un moyen de sélectionner plusieurs éléments dans une liste, tout en évitant le recours aux listes multiples. Après plusieurs essais (genre ajouter un bouton + pour ajouter d'autres éléments), je me suis résolu à me tourner vers jQuery.
Il y a un widget répondant exactement à mes besoins, multiselect : http://www.erichynds.com/jquery/jq [...] ct-widget/

 

Il permet en gros de faire une liste déroulante à choix multiples.
Niveau implémentation, rien de très compliqué, cependant, je veux que mon formulaire soit "interactif", c'est à dire qu'il soit grisé de base et qu'il se dégrise au fur et à mesure de sa complétion.

 

J'ai essayé de passer par les fonctions javascript de base ( document.getElementById("idElement" ).disabled="true"; ), mais si elles marchent bien pour les éléments de base (soit une liste déroulante normale, soit une liste à choix multiple de base), elles ne fonctionnent pas pour le widget en question (qui est donc une liste à choix multiples déroulante).

 

Comme je ne suis pas vraiment un kador en jQuery, j'aimerai un peu d'aide : dans la page que j'ai donné, il y a certaines fonctions qui semblent utilisables (enable / disable en tête) : mon problème est que je ne vois pas où et sous quel forme faire mon test ; entre autre, j'ai ça :

Code :
  1. $(function(){
  2.      $("#clients" ).multiselect({
  3.        multiple: false,
  4.        header: "Choix du client :",
  5.        noneSelectedText: "Choisir un client",
  6.        selectedList: 1,
  7.        height: 100,
  8.  
  9.  
  10.    
  11.       hide: ["explode", 1000]
  12.      });
  13.      $("#test" ).multiselect({
  14.        multiple: false,
  15.        header: "Choix de l\'authorisation :",
  16.        noneSelectedText: "Séléctionner autorisation",
  17.        selectedList: 1,
  18.        height: 50,
  19.    
  20.       hide: ["explode", 1000]
  21.      });
  22.      $("#groupes" ).multiselect({
  23.       selectedList: 1,
  24.       noneSelectedText: "Choisir les groupes",
  25.       checkAllText: "Tous",
  26.       uncheckAllText: "Aucun",
  27.       selectedText: "# Séléctionnés",
  28.       height: 100,
  29.    
  30.       hide: ["explode", 1000]
  31.      });
  32.   });
 

Donc en gros, j'aimerai que lorsqu'on choisit un client, on dégrise test, puis lorsque test est choisi, on dégrise groupe. Evidemment, ces éléments sont grisés de base avec un simple disabled="disabled".

 


Bref, si quelqu'un a déjà touché à ça, ce serait sympa de filer un coup de main [:faman]


Message édité par darkangel le 26-04-2011 à 12:07:59
Reply

Marsh Posté le 26-04-2011 à 12:06:13   

Reply

Marsh Posté le 28-04-2011 à 10:46:33    

eup :o
 
Je suis en train de finir les autres scripts (j'ai décidé de faire celui là en dernier finalement, toujours pas trouvé), mais j'ai trouvé un bug intéressant : je n'arrivais pas à rechoper une valeur d'un select alors que tout semblait normal.
En cherchant, je me suis rendu compte que ma fonction grisage, dans laquel j'avais testé uniquement un select (je vous le donne en mille) était toujours activée : en la désactivant, j'ai alors bien eut accès à la valeur de mon select :D
 
Moralité : le setattribute du javascript désactive bien l'élément, mais pas visuellement :p
Bon, ça ne m'avance pas des masses finalement [:tsouille]

Reply

Marsh Posté le 28-04-2011 à 11:09:35    

...
ton widget "skin" tes selects en les modifiants.
si tu faits un debug sur code final (généré par le js) tu verra certainement que tes elements ne sont pas accessibles de la meme facon.
essaie d'abord de regarder avec firebug et firefox pour bien identifier ce que tu souhaites.
 
sinon je ne comprends pas pourquoi tu affiche tous tes selects des le debut. autant leur attribuer un attr disabled et ensuite lorsque le premier a une valeur binder un event "click" ou "close" pour afficher le second select.
 
ie:
$(function(){
     $("#clients" ).multiselect({
       multiple: false,
       header: "Choix du client :",
       noneSelectedText: "Choisir un client",
       selectedList: 1,
       height: 100,
      hide: ["explode", 1000],
      close: function(event, ui){
  // si il y a une valeur de selectionnee
                // afficher le suivant
                // genre $("#test" ).removeAttr("disabled" );
                // ou simplement le code d'init du second select
 }
     });


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Marsh Posté le 28-04-2011 à 11:30:35    

:jap:
 
voilà, c'est exactement ce que je cherche à faire. Pour répondre à la question "pourquoi les activer dès le départ", c'est juste pour des besoins de développement et finir les autres scripts avant : au départ, ils seront bien par défaut désactivés dans la version finale.
 
Et tu as bien mis le doigt sur mes lacunes avec ce langage : je ne voyais pas bien comment faire ça :  
close: function(event, ui){  
  // si il y a une valeur de selectionnee  
                // afficher le suivant  
                // genre $("#test" ).removeAttr("disabled" );  
                // ou simplement le code d'init du second select  
 }  
 
J'imagine que c'est comme dans tous les langages, genre un if (value etc) :)
 
Merci en tout cas, même si ça doit te sembler simplissime  :D

Reply

Marsh Posté le 29-04-2011 à 14:58:58    

bah un truc comme ca :
 

Code :
  1. $(function(){
  2.    $("#clients" ).multiselect({
  3.        multiple: false,
  4.        header: "Choix du client :",
  5.        noneSelectedText: "Choisir un client",
  6.        selectedList: 1,
  7.        height: 100,
  8.        click: function(event, ui){
  9.            if (ui.checked){
  10.                alert("trop bien on doit enable le suivant" );
  11.                $("#test" ).multiselect("enable" );
  12.            }else{
  13.                alert("trop moins bien on doit disable les deux suivants" );
  14.                $("#test" ).multiselect("disable" );
  15.                $("#groupes" ).multiselect("disable" );
  16.            }
  17.        }
  18.    });
  19.    $("#test" ).multiselect({
  20.        multiple: false,
  21.        header: "Choix authorisation:",
  22.        noneSelectedText: "Choisir authorisation",
  23.        selectedList: 1,
  24.        height: 100,
  25.        click: function(event, ui){
  26.            if (ui.checked){
  27.                alert("trop bien on doit enable le suivant" );
  28.                $("#groupes" ).multiselect("enable" );
  29.            }else{
  30.                alert("trop moins bien on doit disable les deux suivants" );
  31.                $("#groupes" ).multiselect("disable" );
  32.            }
  33.    }
  34.    });
  35.    $("#groupes" ).multiselect({
  36.        multiple: false,
  37.        header: "Choix du groupe:",
  38.        noneSelectedText: "Choisir un groupe",
  39.        selectedList: 1,
  40.        height: 100,
  41.    }); 
  42.    //cache les test/groupes a l'init
  43.    $("#test" ).multiselect("disable" );
  44.    $("#groupes" ).multiselect("disable" );
  45. });


 
 
tu init tes multiselects
tu disable le second et troisieme
sur les callback de click du premier et second tu verifie que ta valeur est selectionnée, si c'est le cas tu enable le suivant.
 
ATTENTION, l'event et le test de "checked" se fait sur le click, donc ca marchera pas comme ca avec des select multiple.


Message édité par pop-pan le 29-04-2011 à 15:23:41

---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Marsh Posté le 18-05-2011 à 16:12:30    

Hello, je ne t'avais pas remercié pour ton excellente aide à propos, c'était en effet pas très compliqué :D
 
Donc : merci beaucoup [:prophecie:5]  [:dolores:3]

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed