Comportement de getElementsByClassName différent selon utilisateur

**zorax** · 22/10/2019, 12h29

Bonjour,
J'ai un site en drupal 8, sur lequel j'ai ajouté une fonction js afin de cacher des boutons selon leurs états.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
window.jQuery = window.$ = jQuery;
$(document).ready(function(){
 
	var paragraphs;
	var elemsUnflag;
	var elemsFlag;
 
    var paragraphs = document.getElementsByClassName('paragraph--type--doodle');
	console.log(paragraphs);
 
	for (let i=0; i<paragraphs.length;i++) {		
 
		 // pour chaque paragraphe si il existe un flag "action-unflag" alors dans ce paragraph display.none pour tous les flags "action-flag"
 
		  var elemsUnflag = paragraphs[i].getElementsByClassName('action-unflag');
		  console.log(elemsUnflag);
 
		   if (elemsUnflag.length>0) {
 
			    var elemsFlag = paragraphs[i].getElementsByClassName('action-flag');			
				for (let j=0; j<elemsFlag.length;j++) {
 
					 if (elemsFlag[j].style.display != 'none') {						 
						  elemsFlag[j].style.display = 'none'; 
					}  
				}
		  } 
    }
 
 
 
}
)

le problème :
Ca fonctionne très bien quand je suis loggé en administrateur, mais si je suis juste utilisateur du site ça ne fonctionne pas....
quand je regarde la console au niveau du code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(elemsUnflag);

les résultats affichés sont différents :

en admin :

HTMLCollection*[div.flag.flag-disponible.js-flag-disponible-18.action-unflag]
HTMLCollection*[div.flag.flag-disponible.js-flag-disponible-27.action-unflag]
HTMLCollection*[div.flag.flag-indisponible.js-flag-indisponible-28.action-unflag]
HTMLCollection*[div.flag.flag-indecis.js-flag-indecis-29.action-unflag]

quand j'ouvre un html collection :

HTMLCollection [div.flag.flag-disponible.js-flag-disponible-18.action-unflag]
0: div.flag.flag-disponible.js-flag-disponible-18.action-unflag
length: 1

utilisateur lambda :

HTMLCollection*[]
HTMLCollection*[]
HTMLCollection*[]
HTMLCollection*[]

quand j'ouvre un html collection :

HTMLCollection []
0: div.flag.flag-disponible.js-flag-disponible-18.action-unflag
length: 1

J'ai essayer en remplaçant getElementsByClassName par querySelectorAll mais c'est exactement pareil...
Pouvez vous m'expliquer pourquoi ????
Merci !

**mathieu** · 22/10/2019, 13h11

si vous avez déjà jQuery en place, vous pouvez faire cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(".paragraph--type--doodle .action-unflag .action-flag").css("display", "none");

**zorax** · 22/10/2019, 13h23

Merci pour ta réponse,
J'ai essayé ton code, mais malheureusement c'est pareil il ne fonctionne pas en mode utilisateur classique alors qu'il fonctionne en admin.
Je ne peux pas l'utiliser comme cela car il faut absolument regarder dans chaque paragraphe, si il existe un bouton action-unflag alors on supprime les boutons action-flag.
voilà le

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="field__item">  
<div class="paragraph paragraph--type--doodle paragraph--view-mode--default">
 
<div class="field field--name-field-date field--type-datetime field--label-hidden field__item">
<time datetime="2019-10-18T12:53:48Z" class="datetime">Vendredi 18 octobre 2019 - 14:53</time>
</div>
 
<div class="flag flag-disponible js-flag-disponible-18 action-unflag">
<a title="" href="/flag/unflag/disponible/18?destination=/dispos/test&amp;token=uWqYH5KSciBN4v71bXeiYCUqd010b3JFBDf1Biy4sVQ" rel="nofollow">Disponible:OK</a>
</div>
<div class="flag flag-indisponible js-flag-indisponible-18 action-flag">
<a title="" href="/flag/flag/indisponible/18?destination=/dispos/test&amp;token=MzuSXx7bwaZtZgNJ6ov7k6_k99DaIllCMKlPcb0vUQY" rel="nofollow">Indisponible</a>
</div>
<div class="flag flag-indecis js-flag-indecis-18 action-flag">
<a title="" href="/flag/flag/indecis/18?destination=/dispos/test&amp;token=6NgkhQB3ldMHRfv83x29e_SerZ3xiPCnH8JhAXZ4pHY" rel="nofollow">Indécis</a>
</div>
</div>
</div>
 
 
<div class="field__item">  
<div class="paragraph paragraph--type--doodle paragraph--view-mode--default">
 
<div class="field field--name-field-date field--type-datetime field--label-hidden field__item">
<time datetime="2019-10-18T12:53:48Z" class="datetime">Vendredi 18 octobre 2019 - 14:53</time>
</div>
 
<div class="flag flag-disponible js-flag-disponible-18 action-flag">
<a title="" href="/flag/unflag/disponible/18?destination=/dispos/test&amp;token=uWqYH5KSciBN4v71bXeiYCUqd010b3JFBDf1Biy4sVQ" rel="nofollow">Disponible:OK</a>
</div>
<div class="flag flag-indisponible js-flag-indisponible-18 action-flag">
<a title="" href="/flag/flag/indisponible/18?destination=/dispos/test&amp;token=MzuSXx7bwaZtZgNJ6ov7k6_k99DaIllCMKlPcb0vUQY" rel="nofollow">Indisponible</a>
</div>
<div class="flag flag-indecis js-flag-indecis-18 action-flag">
<a title="" href="/flag/flag/indecis/18?destination=/dispos/test&amp;token=6NgkhQB3ldMHRfv83x29e_SerZ3xiPCnH8JhAXZ4pHY" rel="nofollow">Indécis</a>
</div>
</div>
</div>

ici on doit intervenir sur le premier paragraphe le deuxième n'a pas de class action-unflag

**mathieu** · 22/10/2019, 13h44

j'avais mal compris ce que vous cherchez à faire, je pense que ça serait plutôt cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(".paragraph--type--doodle .action-unflag").parent().find(".action-flag").css("display", "none");

pour la différence entre les utilisateurs, il faut que vous regardez les différences de code HTML dans les 2 cas.

**SpaceFrog** · 22/10/2019, 13h57

vérifier en console le chargement des scripts
peut être l'utilisateur de base n'a-t-il pas les mêmes droits d'accès aux fichiers ?

**zorax** · 22/10/2019, 14h55

Merci Mathieu, le code fonctionne pour admin ! Dur de voir que tu résumes mes 30 lignes en une seule

Sinon toujours pareil ne fonctionne pas pour l'utilisateur lambda...
Spacefrog, j'ai ajouté un element console, celui-ci figure bien pour les deux utilisateurs donc le code est bien interprété...
Sinon dans le code je ne vois pas de grandes chose différentes..
dans le header
admin
script src="/core/assets/vendor/modernizr/modernizr.min.js?v=3.3.1"></script>
rien dans l'autre
utilisateur admin
<div class="field__item"> <div data-quickedit-entity-id="paragraph/27" class="paragraph paragraph--type--doodle paragraph--view-mode--default">
autre utilisateur
<div class="field__item"> <div class="paragraph paragraph--type--doodle paragraph--view-mode--default">

**mathieu** · 22/10/2019, 15h25

Envoyé par zorax

Dur de voir que tu résumes mes 30 lignes en une seule

je n'ai pas fait grand chose, c'est jQuery qui est très pratique pour ça.

pour bien débuger, il vaut mieux afficher le maximum de chose et donc comparer l'affichage du code avec ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
console.log($(".paragraph--type--doodle"));
console.log($(".paragraph--type--doodle .action-unflag"));
console.log($(".paragraph--type--doodle .action-unflag").parent());
console.log($(".paragraph--type--doodle .action-unflag").parent().find(".action-flag"));

**zorax** · 22/10/2019, 16h15

J'ai mis tes logs en place voici les résultats
Admin
r.fn.init(4)*[div.paragraph.paragraph--type--doodle.paragraph--view-mode--default, div.paragraph.paragraph--type--doodle.paragraph--view-mode--default, div.paragraph.paragraph--type--doodle.paragraph--view-mode--default, div.paragraph.paragraph--type--doodle.paragraph--view-mode--default, prevObject: r.fn.init(1)]
js_5YlJMUzx6O192NOw04ks3J7JyJgg7fhkZf2lh8VhquM.js:53 r.fn.init(4)*[div.flag.flag-disponible.js-flag-disponible-18.action-unflag, div.flag.flag-disponible.js-flag-disponible-27.action-unflag, div.flag.flag-indisponible.js-flag-indisponible-28.action-unflag, div.flag.flag-indecis.js-flag-indecis-29.action-unflag, prevObject: r.fn.init(1)]
js_5YlJMUzx6O192NOw04ks3J7JyJgg7fhkZf2lh8VhquM.js:54 r.fn.init(4)*[div.paragraph.paragraph--type--doodle.paragraph--view-mode--default, div.paragraph.paragraph--type--doodle.paragraph--view-mode--default, div.paragraph.paragraph--type--doodle.paragraph--view-mode--default, div.paragraph.paragraph--type--doodle.paragraph--view-mode--default, prevObject: r.fn.init(4)]
js_5YlJMUzx6O192NOw04ks3J7JyJgg7fhkZf2lh8VhquM.js:55 r.fn.init(8)*[div.flag.flag-indisponible.js-flag-indisponible-18.action-flag, div.flag.flag-indecis.js-flag-indecis-18.action-flag, div.flag.flag-indisponible.js-flag-indisponible-27.action-flag, div.flag.flag-indecis.js-flag-indecis-27.action-flag, div.flag.flag-disponible.js-flag-disponible-28.action-flag, div.flag.flag-indecis.js-flag-indecis-28.action-flag, div.flag.flag-disponible.js-flag-disponible-29.action-flag, div.flag.flag-indisponible.js-flag-indisponible-29.action-flag, prevObject: r.fn.init(4)]

Pour utilisateur lambda connecté
r.fn.init(4)
js_PbmKZMOzzRrZbJXtxniiFl2WjhS7-CBUdUsRvl2KAg4.js:53 r.fn.init(0)
js_PbmKZMOzzRrZbJXtxniiFl2WjhS7-CBUdUsRvl2KAg4.js:54 r.fn.init(0)
js_PbmKZMOzzRrZbJXtxniiFl2WjhS7-CBUdUsRvl2KAg4.js:55 r.fn.init(0)

**mathieu** · 22/10/2019, 17h06

si la 1re liste est vide avec l'utilisateur simple, cela veut dire qu'il n'y a pas de balise avec la classe "paragraph--type--doodle".

**zorax** · 22/10/2019, 18h47

la premiere ligne me renvoie r.fn.init(4) donc il a bien repéré les paragraphes, c'est ensuite qu'il n’accède pas aux div avec class="action-unflag".
Pourtant là le code html est le même, il a bien le lien parent enfant paragraphe action-unflag...
C'est incroyable cette histoire....

Comportement de getElementsByClassName différent selon utilisateur

JavaScript

Discussions similaires

Partager

Partager