Gestion des id des balises à la volée

Version imprimable

2 pièce(s) jointe(s)

Bonjour,
mon souci est un peu complexe et fait appel à pas mal de code, je m'excuse d'avance si c'est un peu confus.

BESOIN : Je voudrais pouvoir ré-utiliser la base d'un même formulaire pour deux cas différents. Je gère les deux cas avec des cases à cocher, si on coche l'une, ça va changer l'ID d'un SELECT et charger une requête PHP spécifique. Cette requête alimente une première liste déroulante, qui elle même alimente une seconde liste dynamiquement avec une requête AJAX (spécifique à la checkbox).

PROBLÈME : si j'arrive bien à changer l'ID, ma requête AJAX ne le prends pas en compte, c'est toujours celle de l'ID par défaut qui fonctionne, du coup, mon second SELECT n'est pas rempli comme il faut ... :(

Le code, puis des capture d'écran.

Mes CHECKBOX :
(En gras le code qui change mes ID selon la checkbox choisie)
Au début, je fais tourner mes deux requête PHP, les résultats sont les OPTION des SELECT. Stockés dans deux variables.
Selon la CHECKBOX je rempli mon SELECT avec une suite d'OPTION ou l'autre.

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<p>Affectation possible :</p>
						
							<!-- On rempli dessuite les option des select des communes pour les afficher ensuite via JS -->
							<?php 
								$communeAd = '';
								while($valComAd = $resultComAd->fetch() ) {
									$communeAd .= '<OPTION value="'.$valComAd['commune'].'">'.$valComAd['commune'].'</OPTION>';
								}
								$communeAd = str_replace("'","\'",$communeAd);
								$resultComAd->closeCursor(); 
						
								$commune = '';
								while($valCom = $resultCom->fetch() ) {
									$commune .= '<OPTION value="'.$valCom['commune'].'">'.$valCom['commune'].'</OPTION>';
								}
								$commune = str_replace("'","\'",$commune);
								$resultCom->closeCursor(); 
							?>
						
						<li><label>Administration (AADE) : </label><input type="checkbox" name="verrouAd" id="verrouAd" value="verrouAd"></li>							
							<script>
								$(document).ready(function(){
									$('#maskAffect').children().hide();
									$('#verrouAd').click( function() {
										if ($('#verrouAd').is(':checked') == true) {
											$('#maskEl').children().hide('slow');
											$('#maskAffect').children().hide('slow');
											$('#maskAffect').children().show('slow');
											$('#verrouEL').attr('checked', false);
											$('#verrouAffect').attr('checked', false);
											var e = (document.getElementsByName("commune"));
											e[0].id ="communeAd";
											document.getElementById("communeAd").innerHTML = '<option value="">-- Commune --</option><?php echo $communeAd; ?>';
											$('#commune').val('');
											$('#denomination_etab').empty();
											$('#type_structure_etab').val('');
											$('#rne_etab').val('');
											$('#circo').val('');
											$('#rne_circo').val('');
											$('#date_debut_affectation').val('');
											$('#date_fin_affectation').val('');
											$('#quotite_affectation').val('');
										} else {
											$('#maskAffect').children().hide('slow');
										}
									});
								});
							</script>
						<li><label> --- </label>---</li>
						<li><label>CLIS / ULIS (AVS Sco) : </label><input type="checkbox" name="verrouAffect" id="verrouAffect" value="verrouAffect"></li>
							<script>
								$(document).ready(function(){
									$('#maskAffect').children().hide();
									$('#verrouAffect').click( function() {
										if ($('#verrouAffect').is(':checked') == true) {
											$('#maskEl').children().hide('slow');
											$('#maskAffect').children().hide('slow');<SELECT name="commune" id="commune" >
											$('#maskAffect').children().show('slow');
											$('#verrouEL').attr('checked', false);
											$('#verrouAd').attr('checked', false);
											var e = document.getElementsByName("commune");
											e[0].id ="commune";
											document.getElementById("commune").innerHTML = '<option value="">-- Commune --</option><?php echo $commune; ?>';
											$('#commune').val('');
											$('#denomination_etab').empty();
											$('#type_structure_etab').val('');
											$('#rne_etab').val('');
											$('#circo').val('');
											$('#rne_circo').val('');
											$('#date_debut_affectation').val('');
											$('#date_fin_affectation').val('');
											$('#quotite_affectation').val('');
										} else {
											$('#maskAffect').children().hide('slow');
										}
									});
								});
							</script>

Le formulaire réutilisé :
(En gras, le SELECT dont je change l'ID

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<span id="maskAffect">
							<li><label class="rouge">Commune : </label>	<SELECT name="commune" id="commune" >
																		<!-- Rempli via JS -->
																	</SELECT></li>										
							<li><label class="rouge">Établissement : </label>		<SELECT name="denomination_etab" id="denomination_etab" >
																		<option value="">-- Établissement --</option>
                                                                                                                                               <!--rempli via AJAX -->
																	</SELECT></li>																			
							<li><label>Type de structure : </label>	<input type="text" name="type_structure_etab" id="type_structure_etab" value="" disabled="disabled" /></li>
							<li><label>RNE établissement : </label> <input type="text" name="rne_etab" id="rne_etab" value="" /></li>
							<li><label>Circonscription : </label>	<input type="text" name="circo" id="circo" value="" disabled="disabled" /></li>
							<li><label>RNE Circonscription : </label><input type="text" name="rne_circo" id="rne_circo" value="" disabled="disabled" /></li>																		
							<li><label>Début d'affectation : </label><input type="text" name="date_debut_affectation" id="date_debut_affectation" value="" /></li>																		
							<li><label>Fin d'affectation : </label>	<input type="text" name="date_fin_affectation" id="date_fin_affectation" value="" /></li>
							<li><label>Quotité : </label>	<input type="text" name="quotite_affectation" id="quotite_affectation" value="" /></li>
					</span>

Mon JS qui est dans un autre fichier, appelé en début de page :
J'ai fais le test de mettre mes deux bloc d'AJAX dans une condition, mais ça ne fonctionne pas, c'est toujours l'ID de départ qui pris, pas celui qui a changer une fois la page chargé. Sachant que si je ne remplis pas l'ID, ça plante.

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<script>
$(document).ready(function(){
 
//double listes déroulantes commune établissement
var $denomination_etab = $('#denomination_etab');
var $type_structure_etab = $('#type_structure_etab');
var $rne_etab = $('#rne_etab');
var $rne_circo = $('#rne_circo');
var $circo = $('#circo');
 
 
var e = document.getElementsByName("commune");
if (e[0].id == "commune") {
	var $commune = $('#commune');
	// à la sélection d une commune dans la liste
	$commune.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de la commune
		if(val != '') {
			$denomination_etab.empty(); // on vide la liste des établissements
			$.ajax({
				url: 'fonction/communeClis.php',
				type: 'GET',
				data: 'id_com='+ val, // on envoie $_GET['id_com']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$denomination_etab.append('<option value="'+ index +'">'+ value +'</option>');
						$denomination_etab.on('change', function() {
							var val = $(this).val();
							$('#rne_etab').val(val);
							$('#rne_etab').change();	
						});	
						$denomination_etab.change();	
					});
				}
			});				
		}
	});
} else {
	var $communeAd = $('#communeAd');
	// à la sélection d une commune dans la liste (administration)
	$communeAd.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de la commune
		if(val != '') {
			$denomination_etab.empty(); // on vide la liste des établissements
			$.ajax({
				url: 'fonction/commune.php',
				type: 'GET',
				data: 'id_com='+ val, // on envoie $_GET['id_com']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$denomination_etab.append('<option value="'+ index +'">'+ value +'</option>');
						$denomination_etab.on('change', function() {
							var val = $(this).val();
							$('#rne_etab').val(val);
							$('#rne_etab').change();	
						});	
						$denomination_etab.change();	
					});
				}
			});				
		}
	});
}												 
 
 
 
 
// à la selection d'un établissement scolaire
$denomination_etab.on('change', function() {
	var val = $(this).val();			
	if(val != '') {
		$type_structure_etab.empty();
		$.ajax({
			url: 'fonction/etab.php',
			type: 'GET',
			data: 'id_type='+ val,
			dataType: 'json',
			success: function(json2) {
				$.each(json2, function(index, value) {
					$type_structure_etab.val(value);
					$type_structure_etab.change();	
				});
			}
		});
 
		$rne_circo.empty();
		$circo.empty();
		$.ajax({
			url: 'fonction/circo.php',
			type: 'GET',
			data: 'id_circo='+ val,
			dataType: 'json',
			success: function(json3) {
				$.each(json3, function(index, value) {
					$rne_circo.val(index);
					$rne_circo.change();
					$circo.val(value);
					$circo.change();
				});
			}
		});	
	}
});
 
 
}); // fin de script
</script>

Merci pour votre.

Joyeux mélange de PHP de Vanilla JS et de jQuery !

Votre code n'est pas clair, vous manipulez des éléments ayant la classe "commune" pour changer l'ID d'un élément. Êtes-vous certain de toujours modifier le bon élément ?

Il est tout à fait possible de changer l'ID d'un élément du DOM, mais ce n'est pas recommandé et l'utilité de la chose m'échappe.

Exemple :
Code:

1 2 3 <select id="commune"> <option value="un">1</option> </select>
Code:

1 2 3 4 5 6 7 8 9 10 11 <script> "use strict"; $( function(){ // forme abrégée de $(document).ready( function( ){ $( "#commune" ).attr( "id", "communeAd" ); $( "#communeAd" ).append( '<option value="deux">2</option>' ); }); </script>
Je vous conseille d'abandonner les ID et d'utiliser la classe pour sélectionner le bon élément : $( ".commune" ).eq( 0 ) ou $( ".commune" ).eq( 1 ).

10/12/2015, 08h12
SpaceFrog

il suffirait d'ajouter du data au niveau des balises ...
10/12/2015, 09h49
Vincent Valentine

Merci pour vos réponses.
Je tiens à préciser que je ne suis pas développeur, j'ai quelques connaissances, mais c'est pas mon métier de base. Je réponds à un besoin dans un service, avec les moyens du bord ...

Citation:

Joyeux mélange de PHP de Vanilla JS et de jQuery !

Je ne savais pas que je faisais du Vanilla JS ... Quelle portion de code est du V-JS ?

Citation:

Votre code n'est pas clair, vous manipulez des éléments ayant la classe "commune" pour changer l'ID d'un élément. Êtes-vous certain de toujours modifier le bon élément ?
Il est tout à fait possible de changer l'ID d'un élément du DOM, mais ce n'est pas recommandé et l'utilité de la chose m'échappe.

J'ai pas de classe sur mon SELECT, juste un name et un id.
Je vais essayé d'être plus clair.
1. J'ai un seul SELECT qui doit contenir des OPTION différentes selon que se soit l'une ou l'autre des checkbox qui soit active.
2. J'ai un second SELECT qui se rempli selon le choix du premier SELECT. Ce second SELECT est rempli dynamiquement avec une requête AJAX qui se réfère à l'id du premier SELECT. Si j'ai le même idées, je ne pourrais pas avoir de requête AJAX différentes. D'où mon besoin de changer l'ID du premier SELECT quand j'active l'une ou l'autre des checkbox.
3. Comme je ne peux pas me référé à l'id pour changer l'id, ça serait un peu idiot :mouarf: Je me réfaire au name, qui lui ne change pas. J'ai bien fais attention de n'avoir qu'un seul name="commune" dans mon code.

Évidemment, si il y a une autre manière de faire, je suis preneur, cependant mes connaissances sont assez faible à ce niveau de JS.

Qu'est-ce qui change en utilisant une class ?

Citation:

il suffirait d'ajouter du data au niveau des balises ...

Là pour le coup, je ne sais pas de quoi vous parlé. Je veux bien un peu plus de détail SVP.
10/12/2015, 10h50
danielhagnoul

J'ai oublié de rappeler un point important, un ID doit être unique dans la page web.

Le Vanilla JS, c'est le JS classique par rapport au JS avec additif, genre jQuery.

En effet, j'ai mal vu, ce n'est pas une classe, mais un attribut name : var e = (document.getElementsByName("commune"));.

Comme déjà dit, je ne vois pas clair dans cet amas de codes divers.

Merci pour votre. Bien que vous n'ayez pas répondu directement à mon problème, vos proposition m'ont aidé.
1. j'ai un peu ranger mon code, c'est plus lisible. Tout le JS est dans un fichier.JS, mon code PHP est à part.
2. J'ai essayé de remplacé le Vanilla JS par du Jqery, histoire de rester logique.
3. j'ai changé de logique, je ne change plus mon id, mais test mes checkbox (plus simple, moins périlleux, et fonctionnel !)

JQuery :

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
45
46
47
48
49
50
51
var $commune = $('#commune');
// à la sélection d une commune dans la liste
$commune.on('change', function() {
	alert('change');
	if ($('#verrouAffect').is(':checked') == true) {
		alert('true');
		var val = $(this).val(); // on récupère la valeur de la commune
		if(val != '') {
			$denomination_etab.empty(); // on vide la liste des établissements
			$.ajax({
				url: 'fonction/communeClis.php',
				type: 'GET',
				data: 'id_com='+ val, // on envoie $_GET['id_com']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$denomination_etab.append('<option value="'+ index +'">'+ value +'</option>');
						$denomination_etab.on('change', function() {
							var val = $(this).val();
							$('#rne_etab').val(val);
							$('#rne_etab').change();	
						});	
						$denomination_etab.change();	
					});
				}
			});				
		}
	} else {
		var val = $(this).val(); // on récupère la valeur de la commune
		if(val != '') {
			$denomination_etab.empty(); // on vide la liste des établissements
			$.ajax({
				url: 'fonction/commune.php',
				type: 'GET',
				data: 'id_com='+ val, // on envoie $_GET['id_com']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$denomination_etab.append('<option value="'+ index +'">'+ value +'</option>');
						$denomination_etab.on('change', function() {
							var val = $(this).val();
							$('#rne_etab').val(val);
							$('#rne_etab').change();	
						});	
						$denomination_etab.change();	
					});
				}
			});				
		}
	}	
});

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<li><label>Administration (AADE) : </label><input type="checkbox" name="verrouAd" id="verrouAd" value="verrouAd"></li>							
						<li><label> --- </label>---</li>
						<li><label>CLIS / ULIS (AVS Sco) : </label><input type="checkbox" name="verrouAffect" id="verrouAffect" value="verrouAffect"></li>
						<li><label> --- </label>---</li>
						<li><label>Élève (AVS M / I) : </label><input type="checkbox" name="verrouEL" id="verrouEL" value="verrouEL"></li>			
 
					<span id="maskAffect">
							<li><label class="rouge">Commune : </label>	<SELECT name="commune" class="commune "id="commune" >
																		<!-- Rempli via JQ -->
																	</SELECT></li>										
							<li><label class="rouge">Établissement : </label>		<SELECT name="denomination_etab" id="denomination_etab" >
																		<option value="">-- Établissement --</option>
																		<!--rempli via AJAX -->
																	</SELECT></li>