Question complémentaires par rapport au sujet PHP "Recharger page après exécution code"

**moimp** · 01/02/2021, 15h56

Bonjour,
Le sujet auquel je fais référence dans le titre est résolu sur le fond avec AJAX et grâce aux conseils de ABCIWEB.

Toutefois, il me reste trois questions:

Pourquoi mon code ne fonctionne pas sans arguments pour la méthode send() en mode post?
ABCIWEB utilise un jeton qui m'intéresse pour protéger ma page AJAX mais je n'arrive pas à le faire fonctionner. Il s'affiche dans le champ 'token' (si le type est 'text') mais n'est pas transmis dans le $_POST. EDIT: J'ai trouvé, il fallait mettre ce jeton en argument du send() ce qui fait que ce point 2 rejoint le point 1 ci-dessus.
Comment transmettre les variables au formulaire sans passer par un argument dans le exit()?

Voici le code source (ctrl+U) de ma page formulaire:

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
39
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
		<meta http-equiv="Expires" content="-1" />
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 
		<base href="http://racine.local" />
 
		<link rel="stylesheet" media="all" type="text/css" href="../css/structure.css" />
		<link rel="stylesheet" media="all" type="text/css" href="../css/screen.css" />
		<link rel="stylesheet" media="print" type="text/css" href="../css/print.css" />
	</head>
 
	<body>
 
<form method="post" name="tabForm">
		<input type="hidden" id="id0" name="id" value="3011">
	<input type="hidden" name="token" value="89e5da68bf3988022f92f40f7e56054ae5d4dd1a2a037167">
<div class="formFlex">
		<fieldset><legend>Activités répertoriées</legend>
			<p class="note">
				du texte.
			</p>
			<fieldset><legend>Zone d'édition&nbsp;: Sélection d'une activité</legend>
				<label for="naf1">Section</label><select name='naf[1]' id='naf1' required='required'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select><br>
				<label for="naf2">Division</label><select name='naf[2]' id='naf2'><option value='' label='&lt; ---- &gt;'></option></select><br>
				<label for="naf3">Groupe</label><select name='naf[3]' id='naf3'><option value='' label='&lt; ---- &gt;'></option></select><br>
				<label for="naf4">Activité</label><select name='naf[4]' id='naf4'><option value='' label='&lt; ---- &gt;'></option></select><br>
			</fieldset>
 
	</div>
</form>
 
<script type="module" src="../js/customerActivitiesHandler.js"></script>
 
	</body>
</html>

Fichier "../js/customerActivitiesHandler.js

Code JS :

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
const
	nafs	= document.querySelectorAll("[id*='naf']")
	,root	= window.location.origin
	;
 
console.log(nafs);
 
function handleChange(lastList, idx) {
	var xhr = new XMLHttpRequest()
		;
 
	xhr.onreadystatechange = function(){
		if (xhr.readyState == 4 && xhr.status == 200){
			console.log(xhr.responseText);
			nafs[idx].innerHTML = xhr.responseText;
		}
	}
	xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // necessary for postmode
	xhr.send(lastList.name+'='+lastList.value);
	//xhr.send(); // Ne fonctionne pas. Pourquoi?
}
 
if (nafs.length){
	nafs.forEach(function(curNaf, index){
		curNaf.addEventListener('change', function(e){
			handleChange(curNaf,index+1);
		}, false );
	});
}

Et mon fichier Ajax:

Code php :

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
<?php
 
require_once('../classes/moimp/OptListSelect.php'); // permet de créer une liste d'options <select>
require_once('../classes/moimp/OptListOption.php'); // permet de créer une option de liste <option>
require_once('../config.php');
require_once('../model/model.php');
 
if ( empty(session_id()) )
	session_start();
 
use OptListSelect\OptListSelect;
use OptListOption\OptListOption;
 
var_export($_POST);echo "\r\n\r\n"; // Ne renvoie pas le jeton
var_export($_SESSION['tokenLists']);echo "\r\n\r\n";
$token = isset($_POST['token']) ? $_POST['token'] : null;
var_export($token);
if(!isset($_SESSION['tokenLists'][$token])) exit('token invalide'); // Voir le mode de sortie, voir pourquoi le jeton n'est pas reconnu.
 
function doNafList(int $iPrevLevel){
	$language = $_SESSION['language'];
 
	$iNewLevel	= $iPrevLevel+1;
	$iPrevId	= $_POST['naf'][$iPrevLevel];
	$data		= getNAF($language, $iNewLevel, $iPrevId);
	$lst		= new OptListSelect("naf[$iNewLevel]", ['id'=>"naf$iNewLevel", 'required'=>'required']);
	$lst->addOption(new OptListOption('', '', ['label'=>getDBText($language,16)]));
	if (!empty($data)){
		foreach($data as $aItem){
			$lst->addOption(new OptListOption($aItem['id'], $aItem['code'].' - '.$aItem[$language.'_text']));
		}
		unset($aItem);
	}
	return $lst;
}
 
for ($i=1;$i<5;$i++){
	if (isset($_POST['naf'][$i])){
		$lstNaf[$i+1] = doNafList($i);
		exit($lstNaf[$i+1]);
	}
}
var_export($_POST['naf']);

**ABCIWEB** · 04/02/2021, 03h55

Salut,

Alors c'est résolu ? J'ai vu dans l'autre sujet que tu avais mis résolu...

Sinon pour envoyer plusieurs valeurs ciblées dans ton send() le plus simple est de créer un objet formData et d'utiliser la méthode "append" pour rentrer des couples clé, valeur.

Code javascript :

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
const
	nafs	= document.querySelectorAll("[id*='naf']")
	,root	= window.location.origin
	,form = document.querySelector("form[name=tabForm]")
	;
 
console.log(nafs);
 
function handleChange(lastList, idx) {
	var xhr = new XMLHttpRequest();
 
	xhr.onreadystatechange = function(){
 
		if (xhr.readyState == 4 && xhr.status == 200){
			console.log(xhr.responseText);
			nafs[idx].innerHTML = xhr.responseText;
		}
	}
	xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);
 
	var data = new FormData();
	data.append(lastList.name, lastList.value);
	data.append('token', form.querySelector("input[name=token]").value);
 
	/*
	var data = new FormData(form);
	xhr.send(data);
	*/
 
	xhr.send(data);
}
...

Notes que j'ai créé une constante "form" qui représente ton formulaire. C'est à partir de cette valeur que tu devrais ensuite sélectionner tes champs, ce qui permet de les cibler précisément sans besoin d'avoir recours à des id.

Notes aussi que j'ai mis en commentaire /*...*/ une méthode qui permet d'envoyer tous les champs du formulaire dans la requête ajax.

Après sur le principe tu te compliques la vie avec tous tes id. Tu pourrais tout aussi bien faire : <label>Section<select name= .... </select></label> plutôt que d'utiliser des "for" qui imposent d'avoir un id correspondant.

Aussi tu aurais pu noter tous tes champs select avec la notation tableau "naf[]", cela dit dans ce cas il faudrait faire "data = new FormData(form)" pour envoyer toutes les valeurs des sélect dans la requête ajax et avoir un tableau "naf" indexé automatiquement (qui commencerait à 0), sinon tu ne saurais pas de quel select il s'agit si tu n'en envoie qu'un.

D'un point de vue général il faut éviter d'avoir des id dans un formulaire, surtout pour un formulaire dynamique car les id doivent être uniques, et en ajoutant des champs à la volée c'est vite fait d'avoir des id dupliqués, de même si on veut dupliquer le formulaire. La bonne méthode est de cibler le formulaire et ensuite de cibler les éléments internes par rapport à cet objet (comme je l'ai fait pour sélectionner le token).

Enfin bon si ton code fonctionne ce n'est pas la peine de tout changer, mais penses y pour les prochaines fois, tu verras qu'au final c'est beaucoup plus simple sinon ça devient vite un casse tête, sans compter que cela te fait un code plus lourd et moins facilement évolutif.

**moimp** · 04/02/2021, 21h01

Tout d'abord un grand merci pour toutes ces suggestions.

Envoyé par ABCIWEB

Alors c'est résolu ? J'ai vu dans l'autre sujet que tu avais mis résolu...

C'est résolu dans le sens où la sélection en cascade fonctionne et où la question n'est plus la même. Mais dans le cas de 4 listes, si je change la valeur d'une liste, seule celle qui la suit est réinitialisée. Les autres conservent leurs options ce qui est gênant pour l'utilisateur dans le cas où il se trompe. C'est d'autant plus gênant que dans la suite du développement, j'envisage d'utiliser le même formulaire pour pouvoir modifier les sélections précédentes.

Envoyé par ABCIWEB

Sinon pour envoyer plusieurs valeurs ciblées dans ton send() le plus simple est de créer un objet formData et d'utiliser la méthode "append" pour rentrer des couples clé, valeur.

Code javascript :

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
const
	nafs	= document.querySelectorAll("[id*='naf']")
	,root	= window.location.origin
	,form = document.querySelector("form[name=tabForm]")
	;
 
console.log(nafs);
 
function handleChange(lastList, idx) {
	var xhr = new XMLHttpRequest();
 
	xhr.onreadystatechange = function(){
 
		if (xhr.readyState == 4 && xhr.status == 200){
			console.log(xhr.responseText);
			nafs[idx].innerHTML = xhr.responseText;
		}
	}
	xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // necessary for postmode
 
	var data = new FormData();
	data.append(lastList.name, lastList.value);
	data.append('token', form.querySelector("input[name=token]").value);
 
	/*
	var data = new FormData(form);
	xhr.send(data);
	*/
 
	xhr.send(data);
}
...

Notes que j'ai créé une constante "form" qui représente ton formulaire.
Notes aussi que j'ai mis en commentaire /*...*/ une méthode qui permet d'envoyer tous les champs du formulaire dans la requête ajax.

Je te remercie pour cette suggestion que je vais creuser.

Envoyé par ABCIWEB

C'est à partir de cette valeur que tu devrais ensuite sélectionner tes champs, ce qui permet de les cibler précisément sans besoin d'avoir recours à des id.
Après sur le principe tu te compliques la vie avec tous tes id. Tu pourrais tout aussi bien faire : <label>Section<select name= .... </select></label> plutôt que d'utiliser des "for" qui imposent d'avoir un id correspondant.

Je connais cette possibilité, mais je ne l'utilise pas à cause du CSS qui me permet de traiter séparément les étiquettes et les champs pour mieux aligner verticalement les uns et les autres. Je ne vois pas comment obtenir cet alignement avec un champ imbriqué dans un label.

Envoyé par ABCIWEB

Aussi tu aurais pu noter tous tes champs select avec la notation tableau "naf[]", cela dit dans ce cas il faudrait faire "data = new FormData(form)" pour envoyer toutes les valeurs des sélect dans la requête ajax et avoir un tableau "naf" indexé automatiquement (qui commencerait à 0), sinon tu ne saurais pas de quel select il s'agit si tu n'en envoie qu'un.

Si tu regardes bien tu verras que c'est ce que j'ai fait.

Envoyé par ABCIWEB

D'un point de vue général il faut éviter d'avoir des id dans un formulaire, surtout pour un formulaire dynamique car les id doivent être uniques, et en ajoutant des champs à la volée c'est vite fait d'avoir des id dupliqués, de même si on veut dupliquer le formulaire. La bonne méthode est de cibler le formulaire et ensuite de cibler les éléments internes par rapport à cet objet (comme je l'ai fait pour sélectionner le token).

Compte tenu de ce qui précède, je génère les noms et les id en php comme ceci: id='naf'.$i name='naf[$i]'

Envoyé par ABCIWEB

Enfin bon si ton code fonctionne ce n'est pas la peine de tout changer, mais penses y pour les prochaines fois, tu verras qu'au final c'est beaucoup plus simple sinon ça devient vite un casse tête, sans compter que cela te fait un code plus lourd et moins facilement évolutif.

Par rapport à mon sujet au début de cette discussion, il me reste à régler les questions 1 et 3.

**ABCIWEB** · 05/02/2021, 06h24

Bonjour,

Le plus simple est que tu testes le code ci-dessous dans une page séparée.

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
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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
		<meta http-equiv="Expires" content="-1" />
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 
		<base href="http://racine.local" />
 
		<link rel="stylesheet" media="all" type="text/css" href="../css/structure.css" />
		<link rel="stylesheet" media="all" type="text/css" href="../css/screen.css" />
		<link rel="stylesheet" media="print" type="text/css" href="../css/print.css" />
 
        <style>
                form[name="tabForm"] .activite p {
                        line-height:30px;
                }
                
                form[name="tabForm"] .activite span {
                        display:inline-block;
                        width:100px;
                }
                
                form[name="tabForm"] .activite select {
                        width:200px;
                }
                </style>
	</head>
 
	<body>
 
<form method="post" name="tabForm" >
		<input type="hidden" id="id0" name="id" value="3011">
	<input type="hidden" name="token" value="89e5da68bf3988022f92f40f7e56054ae5d4dd1a2a037167">
<div class="formFlex">
		<fieldset><legend>Activités répertoriées</legend>
			<p class="note">
				du texte.
			</p>
			<fieldset class="activite"><legend>Zone d'édition&nbsp;: Sélection d'une activité</legend>
				<p><label><span>Section</span><select name='naf[]' required='required'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
				<p><label><span>Division</span><select name='naf[]'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
				<p><label><span>Groupe</span><select name='naf[]'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
				<p><label><span>Activité</span><select name='naf[]'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
			</fieldset>
 
	</div>
</form>
 
 
<script>
const
        form = document.querySelector("form[name=tabForm]")
        ,nafs = form.querySelectorAll("select[name='naf[]']")
        ,root   = window.location.origin
        ;
 console.log(nafs);
function handleChange(lastList, idx) {
        var xhr = new XMLHttpRequest();
 
        xhr.onreadystatechange = function(){
                
                if (xhr.readyState == 4 && xhr.status == 200){
                        console.log(xhr.responseText);
                        //nafs[idx].innerHTML = xhr.responseText;
                }
        }
        xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);              
        
        var data = new FormData(form);
        
        xhr.send(data);
}
 
if (nafs.length){
        nafs.forEach(function(curNaf, index){
                curNaf.addEventListener('change', function(e){
                        handleChange(curNaf,index);
                }, false );
        });
}
</script>
	</body>
</html>

Tu vois qu'on peut faire des alignements facilement même avec des select imbriqués dans les labels. il suffit d'entourer le texte d'un "span" et ensuite de le mettre en display:inline-block et de lui attribuer une largeur, j'ai fait pareil pour les select (qui par défaut sont en display:inline-block), et je me sert des <p> pour un conteneur qui permet d'espacer les lignes en définissant leur hauteur.

Il n'y a pas besoin d'id pour cibler tes champs, là j'utilise juste une classe "activite", et les span, select, et p sont ciblés par rapport à cet élément pour le css. Et la classe "activité" est elle même ciblée par form[name="tabForm"], ce qui fait qu'il n'y aura aucune ambiguïté possible avec les autre éléments de ta page (même si plus loin ils ont une classe "activite"). Evidemment j'aurais aussi pu utiliser un id="activite" pour faire plus simple, c'était pour te montrer que l'on peut aisément s'en passer si besoin (car il faut faire attention avec les id qui doivent être uniques pour tout le document).

Tu vois aussi que j'ai utilisé la syntaxe "naf[]" sans indiquer d'index, car pas besoin avec javascript/html/php qui s'entendent très bien ensemble (pour dire que cette syntaxe ne fonctionne pas forcément avec tous les langages serveur, mais tant que tu utilises php c'est ok). Mais attention les index commenceront à 0 (il faudra modifier ton code php en conséquence) et c'est mieux ainsi pour compatibilité avec les tableaux javascript et php.

Testes ce script dans une page séparée dans un premier temps et dans ta page customerActivityAjax.php fait en première ligne (le temps de tester) exit(var_dump($_POST));. Dans la console du navigateur -> onglet "réseau" et en cliquant sur la requête tu verras dans l'onglet "réponse" un tableau comme il faut, facilement exploitable par php. Ensuite tu pourras supprimer les options des trois derniers select dans le html que j'ai inclues pour le test.

Ah oui une chose, j'avais repris ton dernier code mais avec FormData il ne faut pas utiliser xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); que j'ai supprimé.

Concernant tes questions, le send de la requête ajax envoie des données, si tu n'en envoie pas, php ne recevra pas de données. Et concernant le exit côté php, il sert à sortir de la page et quand on lui met une variable en argument, il l'affiche en même temps. Pour afficher quelque chose et ne pas sortir du script fais des echo $valeur; et mets le exit (sans valeur) exit; à la suite de ta boucle (pas à l'intérieur), pour ordonner au script de sortir quand tu as terminé ton affichage.

Concernant le fonctionnement des selects, faudrait nous montrer le retour de "console.log(xhr.responseText);" car je ne vois pas ton code.

**moimp** · 06/02/2021, 12h13

Envoyé par ABCIWEB

Bonjour,

Le plus simple est que tu testes le code ci-dessous dans une page séparée.
...
Tu vois qu'on peut faire des alignements facilement même avec des select imbriqués dans les labels. il suffit d'entourer le texte d'un "span" et ensuite de le mettre en display:inline-block et de lui attribuer une largeur, j'ai fait pareil pour les select (qui par défaut sont en display:inline-block), et je me sert des <p> pour un conteneur qui permet d'espacer les lignes en définissant leur hauteur.

Il n'y a pas besoin d'id pour cibler tes champs, là j'utilise juste une classe "activite", et les span, label, et p sont ciblés par rapport à cet élément pour le css. Et la classe "activité" est elle même ciblée par form[name="tabForm"], ce qui fait qu'il n'y aura aucune ambiguïté possible avec les autre éléments de ta page (même si plus loin ils ont une classe "activite"). Evidemment j'aurais aussi pu utiliser un id="activite" pour faire plus simple, c'était pour te montrer que l'on peut aisément s'en passer si besoin (car il faut faire attention avec les id qui doivent être uniques pour tout le document).

Ton code marche très bien et répond à une problématique que je ne savais pas résoudre. Par contre il ne fonctionne plus si je remplace la liste par une variable. Dans ce cas dans le rendu, la liste passe en dessous de l'étiquette, comme-ci il y avait un '<br>' après le '</span>'. Je n'arrive pas à comprendre pourquoi.
Voici ce que donnent le rendu et la console:

Code html :

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

<label><span>Section</span><select name='naf[1]'><option value=''></option><option value='5'>Texte de l'option</option></select></label><br>

le contenu de ma variable:

Code html :

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

<select name='naf[1]'><option value=''></option><option value='5'>Texte de l'option</option></select>

et le code html du formulaire:

Code html :

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

<label><span>Section</span><?= $lstNaf[1]; ?></label><br>

**ProgElecT** · 06/02/2021, 13h38

Salut

Peut être que la nouvelle balise simplifié <?= n'est pas reconnu par ta version PHP, <?= = <php echo

**ABCIWEB** · 06/02/2021, 20h05

Envoyé par moimp

et le code html du formulaire:

Code html :

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

<label><span>Section</span><?= $lstNaf[1]; ?></label><br>

Bah si tu vois ça dans ton html (dans la console), c'est manifestement que le code php n'est pas interprété dans ta page. Il sort d'où ce code ? C'est le code php affiché initialement dans ta page de formulaire ou c'est le retour de ta requête Ajax ?

Si c'est le retour de ta requête ajax, c'est que ton code php n'a pas interprété les variables php, et javascript ne le fera pas à sa place. Consultes le retour de la réponse Ajax, il faut que ton html soit formé, tu ne dois plus voir de traces de php car php ne sera pas interprété en retour de la requête ajax.

Si c'est le code affiché initialement par php dans ton formulaire, c'est que tu as un problème pour transmettre des variables php dans le formulaire (la vue). Comment fais-tu pour tes autres codes ?

Au passage, concernant les index de ton tableau "naf", si tu tiens absolument à les indiquer dans le html (mais encore une fois tu n'es pas obligé avec php), commences les index à 0 et non pas à 1, sinon comme déjà dit, ça met le bin's avec javascript et php dont les tableaux sont naturellement indexés à partir de 0. Si tu dois faire une correction par la suite pour afficher 1 plutôt que 0 pour l'utilisateur, ne le fais qu'au dernier moment pour l'affichage utilisateur mais pas avant. Dans le code et les langages de programmation les tableaux numériques commencent avec l'index 0.

Question complémentaires par rapport au sujet PHP "Recharger page après exécution code"

AJAX

Vue hybride

Discussions similaires

Partager

Partager