Discussion :

[Xenonmax]

Bonjour,

Après quelques recherches sur le net qui n'ont pas donné de résultats, je fait appel à la communauté de developpez.net.

Je travaille sous Prestashop, mais la n'est pas la question (juste une parenthèse).
J'ai un script qui modifie la valeur sélectionné dans un <select> :

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
function setDefaultColorSize() {
	var combination = 0; 
	while(combinations[combination]['quantity']<=0)
	{
		// alert(combinations[combination]['quantity']+' '+combinations[combination]['idCombination']);
		++combination
	}
	var color = combinations[combination]['attributes_color'];
	var size = combinations[combination]['attributes_size'];
	// alert(color+ ' - ' +size);
 
	// Fonction dans la console mais ne s'execute pas ici
	var optionColor = document.getElementById('group_3');
	var optionSize = document.getElementById('group_4');
		optionColor.selectedIndex=2;
		optionColor.onchange();
		optionSize.selectedIndex=2;
		optionSize.onchange();
 
}

Le script HTML :

Code :

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

1
2
3
4
5
6
7
8
9
<select name="group_3" id="group_3" onchange="javascript:findCombination();">
	<option value="1">Blue</option>
	<option value="2">Red</option>
	<option value="3">Yellow</option>
	<option value="4">Curacio</option>
</select>
<script language="JavaScript">
	setDefaultColorSize()
</script>

J'ai simplifié le HTML afin que l'on ne voit pas le SMARTY (question de lisibilité).

Donc quand je fais :

Code :

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

1
2
3
var optionColor = document.getElementById('group_3');
		optionColor.selectedIndex=2;
		optionColor.onchange();

Rien ne se passe, je précise que le javascript se trouve dans un fichier externe. Que quand je fais ces même commande dans la console de Chrome, çà marche, mais pas dans mon code.

Auriez vous une solution ou une piste ?
(dite moi s'il vous faut plus d'info )

Je vous remercie d'avance.
Cordialement, Maxime N.

[headmax]

Quelques corrections de logique :
1) onchange n'a pas besoin de javascript: en amont.
2) j'imagine que setDefaultColorSize() s'execute au chargement de la page?

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
 
function checkIfChangeEvent(element){
  if ("fireEvent" in element)
      element.fireEvent("onchange");
  else
  {
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("change", false, true);
      element.dispatchEvent(evt);
  }
};
 
function setDefaultColorSize() {
	var combination = 0; 
	while(combinations[combination]['quantity']<=0)
	{
		// alert(combinations[combination]['quantity']+' '+combinations[combination]['idCombination']);
		++combination
	}
	var color = combinations[combination]['attributes_color'];
	var size = combinations[combination]['attributes_size'];
	// alert(color+ ' - ' +size);
 
	// Fonction dans la console mais ne s'execute pas ici
	var optionColor = document.getElementById('group_3');
	var optionSize = document.getElementById('group_4');
		optionColor.selectedIndex=2;
		checkIfChangeEvent(optionColor);
		optionSize.selectedIndex=2;
		checkIfChangeEvent(optionSize);
 
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<select name="group_3" id="group_3" onchange="findCombination();">
	<option value="1">Blue</option>
	<option value="2">Red</option>
	<option value="3">Yellow</option>
	<option value="4">Curacio</option>
</select>
<script language="JavaScript">
window.onload = function(){
	setDefaultColorSize();
};
</script>

[Xenonmax]

Bonjour,

Toujours pas d'amélioration, j'ai mis le "onload" mais çà ne fonctionne toujours pas. J’ai viré "javascript:" mais qui n'est à priori pas la solution à mon problème.
Je n'ai pas encore rajouté la fonction "checkIfChangeEvent()" pour le moment car "document.getElementById('group_3').selectedIndex=2;" ne s’exécute même pas.

Le script se lance car si je décommente les "alert", elles s'affichent. Mais c'est seulement les instructions "document.getElementById('group_3').selectedIndex=2;" et "document.getElementById('group_3').onchange();" qui ne s’exécutent pas.

Une piste ? Un document sur l'accès et la modification du DOM & Cie... ?

[andry.aime]

Bonjour

Code :

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

optionColor.options[2].selected=true;

A+.

[Xenonmax]

Bonjour,

En faite c'est le "document.getElementById" qui ne me récupère rien.
La console de Chrome me dit : "Cannot set property 'selectedIndex' of null".
Ce qui veux certainement dire que je ne récupère rien dans mes variables "optionColor" et "optionSize".

[Xenonmax]

J'ai la nette impression (je me trompe peut être) que ma fonction est appelé avant que toute ma page soit chargé.
Car quand je lance ma fonction dans la console, elle fonctionne. Et à l'exécution de la page les document.getElementById('group_3') n'existe pas quand ma fonction est appelé.

Faut il que je précise que group_3 et group_4 sont généré en Smarty ?!?

[Xenonmax]

Finalement, et c'est souvent le cas... J'ai trouvé la solution tout seul.
Je dirai plutôt que j'ai trouvé la bêtise que j'ai faite.
Bref je me suis perdu dans les 1000 lignes de code de product.tpl de Prestashop

En faite j'ai pas fait attention, j'ai appelé ma fonction "setDefaultColorSize()" en haut de mon code, donc elle s'appelait avant le chargement total de ma page, ce qui ne pouvait pas fonctionner.

Je vous remercie encore pour votre attention à mon égare.
Cordialement, M. Nicole