Onchange sur un select

Version imprimable

Bonjour,

J'ai le code PHP suivant :

Code:

1
2
3
4
5
6
7
8
9
 									<select class="form-control" onchange="poutre()" id="caillebotis" name="caillebotis" value="">
 										<?php
                                                                                        $db = Database::connect();
                                                                                        echo '<option selected="selected" value="vide">Pas de finition</option>';
                                                                                        foreach ($db->query('SELECT code, description FROM type_caillebotis ORDER BY code DESC') as $caillebotis)
                                                                                                echo '<option value="' . $caillebotis['code'] . '">' . $caillebotis['description']  . '</option>';
                                                                                        Database::disconnect();
                                                                                        ?>
									</select>

Et voici le javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 	<script type="text/javascript">
 		function poutre() {
				alert(document.getElementById("caillebotis").value);
 			if (document.getElementById("caillebotis").value != "vide") {
				var poutreSelect = "Poutre";
				var largeur = document.getElementById("la1").value;
				document.getElementById("seulement_poutre").checked=false;
			} else {
				alert ('je suis passé');
				var poutreSelect = "Pas de poutre";
				var largeur = 0;
			}
 			$.post('insert-dv.php', {
 				retour: poutreSelect, large:largeur
 			}); //renvoie la valeur de escSelect sur le serveur
 			$.post('selectPoutre-dv.php', // AJAX : On appelle un script php
 				{
 					poutre: poutreSelect,large:largeur
 				}, // Passage de la variable en paramètre
 				function(data) {
 					$('#poutre').html(data);
 				});
 		}
 	</script>

Lors du premier changement de value, le script est bien appelé.
Lors des autres changement, il ne l'est plus !

Où peut bien être le problème ? J'utilise ce principe dans un autre select, sans problème et j'ai beau comparer, je ne vois pas où ça coince...

Merci d'avance de vous pencher sur mon problème.

22/05/2019, 15h16
Invité

Bonjour,

1- à mon avis, il faut que tu regardes dans les fichiers PHP appelés via Ajax : insert-dv.php ou selectPoutre-dv.php.

2- Je pense m^me que le 2ème appel Ajax devrait se faire DANS le 1er (et pas à la suite).
En effet, les appels Ajax sont asynchrones.

N.B. Tant qu'à utiliser jQuery, :

Code:

document.getElementById("caillebotis").value

s'écrit :

Code:

$("#caillebotis").val()
22/05/2019, 15h37
patlej

Bonjour,

Merci pour la syntaxe Jquery.

Je ne pense pas qu'il soit utile de vérifier ce qu'il se passe dans selectPoutre.php car le code est correctement exécuté la première fois.

Le code PHP est issu de insert-dv.php...

Le test est très simple à faire : lorsque j'ai coché la case "seulement_poutre", le script décoche cette case.
Au premier passage, la case est bien modifiée par le script. Au second passage, sa valeur ne change plus...

J'ai fait un copier-coller de ma fonction en y ajoutant progressivement les lignes après test.
J'ai appelé la copie poutre2() et je l'ai appelée de la même manière.
Aucune erreur et après avoir ajouté toutes les lignes, cela fonctionne comme je le veux.
Comme je ne détecte pas de différences entre les deux, j'ai renommé la première en "poutre2". Cela fonctionne !
Encore plus fort : puisque les deux fonctionne quand je les renomme, je modifie mon select et j'appelle poutre(). Cela ne fonctionne plus !

J'ai cherché dans mon code toutes les occurence de "poutre", rien d'anormal...

J'y perd mon latin !

Celui qui trouve la solution sera mon mentor jusqu'à la fin de ma carrière !

Code:

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
39
40
41
42
43
44
 	<script type="text/javascript">
 		function poutre() {
 			if (document.getElementById("caillebotis").value !== "vide") {
				var poutreSelect = "Poutre";
				var largeur = document.getElementById("la1").value;
				document.getElementById("seulement_poutre").checked=false;
			} else {
				var poutreSelect = "Pas de poutre";
				var largeur = 0;
			}
 			$.post('insert-dv.php', {
 				retour: poutreSelect, large:largeur
 			}); 
 			$.post('selectPoutre-dv.php', 
 				{
 					poutre: poutreSelect,large:largeur
 				}, 
 				function(data) {
 					$('#poutre').html(data);
 				});
 		}
 	</script>
 	<script type="text/javascript">
 		function poutre2() {
 			if (document.getElementById("caillebotis").value !== "vide") {
				var poutreSelect = "Poutre";
				var largeur = document.getElementById("la1").value;
				document.getElementById("seulement_poutre").checked=false;
			 }else{
				var poutreSelect = "Pas de poutre";
				var largeur = 0;
				}
				$.post('insert-dv.php', {
					retour: poutreSelect, large:largeur
				}); 
				$.post('selectPoutre-dv.php', 
					{
						poutre: poutreSelect,large:largeur
					}, // Passage de la variable en paramètre
					function(data) {
						$('#poutre').html(data);
					});
 		}
 	</script>