Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

problème avec un select multiple

10 réponses
Avatar
Une Bévue
Je teste un select multiple avec array en defaultValue.

ça marche ok si je peuple mes options avec une array comme ça :

{label: 'Un', value: 1, selected: false},
{label: 'Deux', value: 2, selected: false},
{label: 'Trois', value: 3, selected: false},
{label: 'Quatre', value: 4, selected: true},
{label: 'Cinq', value: 5, selected: false},
{label: 'Six', value: 6, selected: false},

mon select deviendra :

<select multiple defaultValue="[ 1, 4]">
<option value="1" label="Un" selected>Un</option>
<option value="2" label="Deux" >Deux</option>
<option value="3" label="Trois" >Trois</option>
<option value="4" label="Quatre" selected>Quatre</option>
<option value="5" label="Cinq" >Cinq</option>
<option value="6" label="Six" >Six</option>
</select>

ça c'est une "simulation", avec les vraies valeurs, obtenues d'une base
de données ça ne marche pas les valeurs sont comme ça :

{label: "Rémy Dupont", value: "5429836efa9103a10bd63af1", selected: false},
{label: "Jacques Martin", value: "540432e9fa91036812d63af5", selected:
true},
{label: "Martine Petit", value: "5429836efa9103a10bd63af2", selected: true},

les "values" étant l'id de l'entrée correspondaante dans la bd.

alors j'ai cru que ça ne marchait pas parce que les values sont des
strings dans le cas réeldonc j'ai réalisé un premier test :

en remplaçant dans ma simulation les chiffres par les mêmes chiffres
entre '' c'est à dire comme des strings, par exemple :
{label: 'Un', value: '1', selected: false},
etc.

là ça roule

le deuxième essai a été de remplacer dans le cas réel les nombres hexa,
en strings (ie. "5429836efa9103a10bd63af1") par leur valeur hexa soit :
parseInt("5429836efa9103a10bd63af1", 16);
(pour ce nombre j'obtiens (de mémoire un truc en 2e+23)
et là ça ne marche pas non plus.

posté au cas où quelqu'un aurait une idée du pourquoi ça marche avec qqc
de la forme :
<option value="1" label="Un" selected>Un</option>

mais pas avec :
<option value="5429836efa9103a10bd63af1" label="Rémy Dupont"
selected>Rémy Dupont</option>

10 réponses

Avatar
Olivier Miakinen
Bonjour,

Le 03/02/2016 00:08, Une Bévue a écrit :
Je teste un select multiple avec array en defaultValue.

[...]

posté au cas où quelqu'un aurait une idée du pourquoi ça marche avec qqc
de la forme :
<option value="1" label="Un" selected>Un</option>

mais pas avec :
<option value="5429836efa9103a10bd63af1" label="Rémy Dupont"
selected>Rémy Dupont</option>



1) Avec quels navigateurs as-tu fait les tests ?

2) Es-tu certain que c'est le code HTML résultant qui n'est pas
correctement géré, plutôt que la traduction, depuis ta
représentation dans une « array », qui foire ?

3) Tu aurais un exemple de chacun des deux fichiers HTML (un qui
marche et un qui foire) accessible en ligne pour qu'on puisse
se rendre compte par nous-mêmes ?

Cordialement,
--
Olivier Miakinen
Avatar
Une Bévue
Le 03/02/2016 00:53, Olivier Miakinen a écrit :
1) Avec quels navigateurs as-tu fait les tests ?

2) Es-tu certain que c'est le code HTML résultant qui n'est pas
correctement géré, plutôt que la traduction, depuis ta
représentation dans une « array », qui foire ?



c'est bien le code html résultant qui "déconne" mais curieusement ça
marchait dans le cas simple où valie était un integer.

merci bien !
Avatar
Olivier Miakinen
Le 03/02/2016 14:51, Une Bévue a écrit :
Le 03/02/2016 00:53, Olivier Miakinen a écrit :
1) Avec quels navigateurs as-tu fait les tests ?

2) Es-tu certain que c'est le code HTML résultant qui n'est pas
correctement géré, plutôt que la traduction, depuis ta
représentation dans une « array », qui foire ?



c'est bien le code html résultant qui "déconne" mais curieusement ça
marchait dans le cas simple où valie était un integer.



Ok, j'ai ma réponse à la question numéro 2. Reste les 1 et 3.

merci bien !



Tu pourras remercier quand ton problème sera résolu. ;-)
Avatar
Une Bévue
Le 03/02/2016 16:44, Olivier Miakinen a écrit :
Ok, j'ai ma réponse à la question numéro 2. Reste les 1 et 3.

>merci bien !


Tu pourras remercier quand ton problème sera résolu.;-)



ça ne risque pas, je fais tellement de bévues ;-)
en fait j'avais piqué un truc sur GitHub, qui ne marche que dans le cas
de l'exemple donné.

pour le 1, j'utilise Opera généralement.
mais, comme j'utilise ReactJS, ça doit marcher sur n'importe quel butineur.

je pourrais mettre online quelques petits tests (si quelqu'un est
intéressé), les "vraies" pages vont chercher des données sur une bd
locale par WebSocket, donc ça ne peut pas être mis en ligne.

je trouve ReactJS élégant et simple à utiliser.
Avatar
Olivier Miakinen
Le 03/02/2016 19:00, Une Bévue a écrit :

pour le 1, j'utilise Opera généralement.



Ok.

mais, comme j'utilise ReactJS, ça doit marcher sur n'importe quel butineur.



Sauf qu'il y a au moins un cas où ça ne marche pas...

je pourrais mettre online quelques petits tests (si quelqu'un est
intéressé), les "vraies" pages vont chercher des données sur une bd
locale par WebSocket, donc ça ne peut pas être mis en ligne.



Qu'est-ce qui t'empêche de recopier le résultat d'une « vraie » page
(générée dynamiquement à partir de la base de données) et de le recopier
dans une page HTML statique, accessible sur un site quelconque ?
Avatar
Une Bévue
Le 03/02/2016 22:17, Olivier Miakinen a écrit :
Qu'est-ce qui t'empêche de recopier le résultat d'une « vraie » page
(générée dynamiquement à partir de la base de données) et de le recopier
dans une page HTML statique, accessible sur un site quelconque ?



rien, sinon, la paresse, vu que j'ai résolu le problème.
en fait le "geek" avait remplacé dans son code les "selected" des
options par une valeur "defaultValue" qui ne marche que dans certains cas.

je pense que c'est lié à une "étape" de ReactJS.

je suis revenu à quelque chose de standard, càd sans "defaultValue" mais
avec des "<option value="machin" selected />" et c'est entré dans l'ordre.
Avatar
Olivier Miakinen
Le 04/02/2016 09:54, Une Bévue a écrit :

Qu'est-ce qui t'empêche de recopier le résultat d'une « vraie » page
(générée dynamiquement à partir de la base de données) et de le recopier
dans une page HTML statique, accessible sur un site quelconque ?



rien, sinon, la paresse, vu que j'ai résolu le problème.
en fait le "geek" avait remplacé dans son code les "selected" des
options par une valeur "defaultValue" qui ne marche que dans certains cas.



Et donc, contrairement à ce que tu répondais à ma question 2, ce
n'était pas que le HTML résultant était incorrectement interprété,
mais que la traduction depuis la représentation dans une « array »
ne donnait pas vraiment du HTML standard.

J'ai bien compris que tu ne peux pas utiliser un validateur HTML en
ligne puisque le site est local, mais Opera ne peut pas te signaler
tout seul les erreurs HTML ? Ça te permettrait un premier filtrage,
avant de poser ici des questions auxquelles on ne *peut* pas répondre
(puisque ce n'est pas du HTML).

je pense que c'est lié à une "étape" de ReactJS.

je suis revenu à quelque chose de standard, càd sans "defaultValue" mais
avec des "<option value="machin" selected />" et c'est entré dans l'ordre.



Que ça fonctionne pour cette fois ne devrait pas te dispenser de faire
valider le code HTML, au cas où il y aurait d'autres erreurs ailleurs.
Avatar
Une Bévue
Le 04/02/2016 10:23, Olivier Miakinen a écrit :
mais Opera ne peut pas te signaler
tout seul les erreurs HTML ?



c'était pas "vraiment" une erreur HTML, mais un "oubli" dans le code du
geek.

enfin je ne suis pas sûr que ce soit un oubli, peut-être était-ce lié à
une version plus ancienne de ReactJS ?

disons qu'au lieu de mettre des "selected" dans la ou les options
sélectionnées, il tablait sur defaultValue, au niveau du select, pour
sélectionner les options.

je suis revenu à la gestion classique des options, avec un "selected"
donc dans la ou les options sélectionnées, et pas de defaultValue au
niveau du select, et ça roule.
Avatar
Olivier Miakinen
Le 04/02/2016 11:32, Une Bévue a écrit :

mais Opera ne peut pas te signaler
tout seul les erreurs HTML ?



c'était pas "vraiment" une erreur HTML, mais un "oubli" dans le code du
geek.



Tu parlais d'un attribut « defaultValue » dans l'élément « select ».
Ça m'a tout l'air d'une erreur HTML, non ?

En tout cas je ne le vois pas en HTML 4.01 :
https://www.w3.org/TR/html4/interact/forms.html#h-17.6

Et pas non plus en HTML 5 :
https://www.w3.org/TR/html-markup/select.html

enfin je ne suis pas sûr que ce soit un oubli, peut-être était-ce lié à
une version plus ancienne de ReactJS ?

disons qu'au lieu de mettre des "selected" dans la ou les options
sélectionnées, il tablait sur defaultValue, au niveau du select, pour
sélectionner les options.



Il tablait donc sur un attribut invalide. Ou alors je n'ai rien compris.

je suis revenu à la gestion classique des options, avec un "selected"
donc dans la ou les options sélectionnées, et pas de defaultValue au
niveau du select, et ça roule.



Attention, il peut exister une propriété « defaultValue » dans le DOM
JavaScript, comme je le vois ici :
http://www.w3schools.com/jsref/prop_text_defaultvalue.asp

... mais dans le HTML je suis persuadé que c'est une erreur, et je pense
que le navigateur Opera devrait pouvoir la détecter comme telle.
Avatar
Une Bévue
Le 04/02/2016 15:34, Olivier Miakinen a écrit :
Attention, il peut exister une propriété « defaultValue » dans le DOM
JavaScript, comme je le vois ici :
http://www.w3schools.com/jsref/prop_text_defaultvalue.asp



oui, oui, j'ai vérifié ça.
en fait c'est une propriété qui a du être ajoutée dans ReactJS qui
utilise un dom "virtuel" mais elle ne fonctionne pas toujours. d'après
ce que j'ai compris elle était supposée remplacer les selected dans les
options.

côté opera, je n'ai pas vu d'alerte concernant cet attribut
supplémentaire non conforme. de toutes façons ReactJS en ajoute d'autres
pour retrouver les n½uds dans le dom, "ref" et reactid par exemple.
(pour le binding)