Gestion des id des balises à la volée

**Vincent Valentine** · 09/12/2015, 12h09

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 :

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
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 :

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
<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 :

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
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.

Gestion des id des balises à la volée

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager