Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1075 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2072017
darkangel
C2FFA
Posté le 26-04-2011 à 12:06:13  profilanswer
 

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
mood
Publicité
Posté le 26-04-2011 à 12:06:13  profilanswer
 

n°2072332
darkangel
C2FFA
Posté le 28-04-2011 à 10:46:33  profilanswer
 

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]

n°2072337
pop-pan
yay!
Posté le 28-04-2011 à 11:09:35  profilanswer
 

...
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
n°2072342
darkangel
C2FFA
Posté le 28-04-2011 à 11:30:35  profilanswer
 

: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

n°2072720
pop-pan
yay!
Posté le 29-04-2011 à 14:58:58  profilanswer
 

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
n°2076863
darkangel
C2FFA
Posté le 18-05-2011 à 16:12:30  profilanswer
 

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]


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
envoie de formulaire AJAX JQUERY[Android] Widget perso : Une grille 2D avec 3 Scrollviews
JQUERY Drag & Drop : ma div reste collée a ma sourischanger un simple select en multiselect
Bon livre HTML 5 CSS3 voir Jquery[JS] Jquery UI Drag&Drop de cellules dans un tableau
[HTML/CSS/Javascript/(php ?)] Widget sidebarJquery - Post - Iframe (shadowbox)
Changer la couleur d'un bouton JQuery mobileNavigation dynamique en JQuery
Plus de sujets relatifs à : [jQuery] Widget multiselect, (dé)grisage dans un form


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR