Retour requête non pris en cours [Débutant(e)]

**vandman** · 06/07/2016, 14h29

Bonjour,

En m’appuyant sur les tutoriels Developpez, je suis arrivé à faire ceci:

Fonction Ajax

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
// Node cleaner
function go(c){
	if(!c.data.replace(/\s/g,''))
		c.parentNode.removeChild(c);
}
 
function clean(d){
	var bal=d.getElementsByTagName('*');
 
	for(i=0;i<bal.length;i++){
		a=bal[i].previousSibling;
		if(a && a.nodeType==3)
			go(a);
		b=bal[i].nextSibling;
		if(b && b.nodeType==3)
			go(b);
	}
	return d;
}
 
function getXhr()
{
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
	            xhr = new ActiveXObject("Msxml2.XMLHTTP");
	        } catch (e) {
	            xhr = new ActiveXObject("Microsoft.XMLHTTP");
	        }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
	return xhr;
}
 
function ListePerimetre(Type_groupe,Type_ar)
{
	var value = "";
	var titi = "";
	option = document.createElement("option");
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			reponse = clean(xhr.responseXML.documentElement);
			value = reponse.getElementsByTagName("id");
			value = value.getAttribute("value");
			option.setAttribute("value", value);
			option.text = reponse.getElementsByTagName("texte");
		}
	}
	xhr.open("POST","./php/ListeCategorie.php",true);
	xhr.send("Type_groupe="+Type_groupe&"Type_ar="+Type_ar);
	return option
}

Fichier PHP permettant de générer le XML:

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
// nomdb
global $db;
$db = new PDO($dsn, $user, $pass);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
 
 
if (isset($_POST["Type_groupe"]) && empty($_POST["Type_ar"]))
{
	$Where= "WHERE type_groupe = '".$_POST["Type_groupe"]."'";
}
else if (empty($_POST["Type_groupe"]) && isset($_POST["Type_ar"]))
{
	$Where= "WHERE Type_ar = '".$_POST["Type_ar"]."'";
}
else if (isset($_POST["Type_groupe"]) && isset($_POST["Type_ar"]))
{
	$Where= "WHERE type_groupe = '".$_POST["Type_groupe"]."' AND Type_ar = '".$_POST["Type_ar"]."'";
}
else
{
	$Where= "";
}
 
$SqlQry= "select * from param.groupe_code ".$Where." ORDER BY intitule_groupe_code;";
$qry = $db->prepare($SqlQry); 
$qry->execute();
//$numlignes = $qry->rowCount();
//$numcol = $qry->columnCount();
$buffer  = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
$buffer .= "<perimetre>\n";
$buffer .= "\t<select>\n";
while ($row=$qry->fetch())
{
	$buffer .= "\t\t<id value=\"".$row['id_groupe_code']."\"><texte>".$row['intitule_groupe_code']."</texte>\n</id>\n";
 
}
$buffer .= "\t</select>\n";
$buffer .= "</perimetre>\n";
$qry->closeCursor();
 
header('Content-Type: text/xml');
echo $buffer;
 
/* CLOTURE DES CONNEXIONS DB */
 
?>

En clair, j'ai besoin de récupérer l'id_groupe_code et l'intitule_groupe_code et dans la table groupe_code pour afficher les données dans une liste déroulante de mon formulaire.
Ca ne fonctionne pas.
Je suis bloqué. Quelqu'un serait-il ce qui me manque?
Cordialement,
Vandman

**andry.aime** · 07/07/2016, 07h42

Bonjour,

Code :

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

1
2
3
4
value = reponse.getElementsByTagName("id");
			value = value.getAttribute("value");
			option.setAttribute("value", value);
			option.text = reponse.getElementsByTagName("texte");

1- getElementsByTagName retourne un Array.
2- Tu ne fais rien ensuite avec l'élément "option".

Code :

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

xhr.send("Type_groupe="+Type_groupe&"Type_ar="+Type_ar);

Code :

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

xhr.send("Type_groupe="+Type_groupe"&Type_ar="+Type_ar);

Tu dois aussi nous montrer le code HTML de la page qui utilise cette requête AJAX.

A+.

**vandman** · 07/07/2016, 10h31

Bonjour,
Ca avance un peu. je vois bien le résultat de la requette sur le XML, mais je ne sais pas pourquoi, je n'obtiens que la dernière valeur dans mon 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
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
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="refresh" content="url=index.php">
	    <meta charset="utf-8">
		<title>injection des codes</title>
    	<!--<link href="css/index.css" rel="stylesheet" type="text/css" media="screen" />
		//<script src="js/fonction.js"></script>
		//<script src="js/fonction_ajax.js"></script>
		//<script type="text/javascript" src="js/tablecloth.js"></script> !-->
		<script>
// Node cleaner
function go(c){
	if(!c.data.replace(/\s/g,''))
		c.parentNode.removeChild(c);
}
 
function clean(d){
	var bal=d.getElementsByTagName('*');
 
	for(i=0;i<bal.length;i++){
		a=bal[i].previousSibling;
		if(a && a.nodeType==3)
			go(a);
		b=bal[i].nextSibling;
		if(b && b.nodeType==3)
			go(b);
	}
	return d;
}
 
function getXhr()
{
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
	            xhr = new ActiveXObject("Msxml2.XMLHTTP");
	        } catch (e) {
	            xhr = new ActiveXObject("Microsoft.XMLHTTP");
	        }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
	return xhr;
}
 
function ListePerimetre(Type_groupe,Type_ar)
{
	var value = "";
	var p = document.createElement("p");
	var select = document.createElement("select");
	var option = document.createElement("option");
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			var reponse = clean(xhr.responseXML.documentElement);
			var Id = reponse.getElementsByTagName("id");
			var titi = Id.length;
			for(i=0;i<Id.length;i++)
			{
				value = Id[i].getAttribute("value");
				//value = value.getAttribute("value");
				option.setAttribute("value", value);
				option.text = Id[i].getElementsByTagName("texte")[0].firstChild.nodeValue;
				select.appendChild(option);
			}
		}
	}
	xhr.open("POST","./php/ListeCategorie.php",true);
	xhr.send("Type_groupe=CA&Type_ar=A");
	p.appendChild(select);
	document.body.appendChild(p);
	//console.log(option);
}
</script>
	</head>
	<body onload="ListePerimetre()">
 
	</body>
</html>

PS: voici le xml généré.

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
<?xml version="1.0" encoding="UTF-8"?>
<perimetre>
	<select>
		<id value="1"><texte>CA_titi</texte>
</id>
		<id value="2"><texte>CA_titi_et_toto_a</texte>
</id>
		<id value="3"><texte>CA_titi_et_toto_r</texte>
</id>
		<id value="5"><texte>CA_toto_bla</texte>
</id>
		<id value="13"><texte>CA_toto_bli</texte>
</id>
	</select>
</perimetre>

Cordialement,
Vandman

**andry.aime** · 07/07/2016, 12h37

Re,

p.appendChild(select);
document.body.appendChild(p);

ça doit être dans le block if(xhr.readyState == 4 && xhr.status == 200) après la création des options.

A+.

**vandman** · 07/07/2016, 13h43

Merci andry.aime.
J'ai trouvé, il fallait placer:

Code :

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

option = document.createElement("option");

dans la boucle for.

Maintenant, j'ai un autre probleme:
J'ai isolé la partie traitement ajax du reste des fonctions. En faisant cela, le résultat est une liste vide. Quand j'exécute mon code en pas à pas, ca fonctionne. Quand je le laisse s'exécuter tout seul, la liste est vide.
c'est comme si la fonction n'attendait pas le résultat du traitement et ne retournait rien????

Voici le code que j'ai:
Partie du code servant à générer le 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
cell = document.createElement("td");
	cell.setAttribute("class", "col3");
	// définit le select de la 2ème colonne du formulaire dans le tableau
    select = document.createElement("select");
    select.setAttribute("class", "StyleSelect");
    select.setAttribute("name", "perimetre");
    select.setAttribute("id", "perimetre");
    var ListePerim = ListePerimetre("0", "0");
    for (i = 0; i<ListePerim.length; i++)
    {
		option = document.createElement("option");
		option.setAttribute("value", ListePerim[i].getAttribute("value"));
		option.text = ListePerim[i].getElementsByTagName("texte")[0].firstChild.nodeValue;
		select.appendChild(option);
    }
	select.setAttribute("onchange", "OnChangePerimetre(event)");
	cell.appendChild(select);
	row.appendChild(cell);

Voici ma fonction Ajax dans :

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
Voici ma fonction Ajax dans un autre fichier:
// Node cleaner
function go(c){
	if(!c.data.replace(/\s/g,''))
		c.parentNode.removeChild(c);
}
 
function clean(d){
	var bal=d.getElementsByTagName('*');
 
	for(i=0;i<bal.length;i++){
		a=bal[i].previousSibling;
		if(a && a.nodeType==3)
			go(a);
		b=bal[i].nextSibling;
		if(b && b.nodeType==3)
			go(b);
	}
	return d;
}
 
function getXhr()
{
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
	            xhr = new ActiveXObject("Msxml2.XMLHTTP");
	        } catch (e) {
	            xhr = new ActiveXObject("Microsoft.XMLHTTP");
	        }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
	return xhr;
}
 
function ListePerimetre(Type_groupe,Type_ar)
{
	var value = "";
	var reponse = "";
	var Id = "";
	//option = document.createElement("option");
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	SendPost = "Type_groupe="+Type_groupe+"&Type_ar="+Type_ar;
	xhr.open("POST","./php/ListeCategorie.php",true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send(SendPost);
	xhr.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			reponse = clean(xhr.responseXML.documentElement);
			Id = reponse.getElementsByTagName("id");
			document.getElementById("message").className="tumevoispas";
		}
		else
		{
			document.getElementById("message").className="tumevois";
		}
	};
	return Id;
}

Le XML n'a pas changé et le fichier PHP non plus.

Cordialement,
Vandman

**NoSmoking** · 07/07/2016, 18h24

Bonjour,
isolons 2 lignes

Code :

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

1
2
    var ListePerim = ListePerimetre("0", "0");
    for (i = 0; i<ListePerim.length; i++)

tu fais appel à la fonction ListePerimetre puis tu boucles sur les données, seulement voilà ta fonction est asynchrone et ne renvoie pas le résultat immédiatement, il n'est donc pas encore disponible au moment où tu lances ta boucle, ce qui n'est pas le cas lorsque tu fais du pas par pas.

A lire : Un classique AJAX : utiliser les données au bon moment !

**vandman** · 07/07/2016, 18h45

Bonjour,
C'est bien ce qui me semblait.

J'ai essayé ca:

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
function ListePerimetre(Type_groupe,Type_ar)
{
	var value = "";
	var reponse = "";
	var Id = "";
	//option = document.createElement("option");
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	SendPost = "Type_groupe="+Type_groupe+"&Type_ar="+Type_ar;
	xhr.open("POST","./php/ListeCategorie.php",true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send(SendPost);
	xhr.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			reponse = clean(xhr.responseXML.documentElement);
			Id = reponse.getElementsByTagName("id");
			document.getElementById("message").className="tumevoispas";
			return Id;
		}
	};
	while (xhr.readyState < 4)
	{
		document.getElementById("message").className="tumevois";
	}
 
}

Mais ca ne fonctionne pas. Ca bloque tout alors que la requette SQL dure environ 13ms???
Comment faire pour que ca soit plus fluide?

Cordialement,
Vandman

**NoSmoking** · 11/07/2016, 19h03

Ton return Id n'a aucun sens à l'endroit où tu l'a mis, ta fonction retourne OU ? (tu as mal du lire le lien que je t'ai fourni)
Tu dois mettre le traitement de ta réponse dans

Code :

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

1
2
3
4
5
if (xhr.readyState == 4 && xhr.status == 200)
{
    reponse = clean(xhr.responseXML.documentElement);
    // faire le traitement ICI
}

ou utiliser une fonction de rappel

Code :

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

1
2
3
4
5
6
if (xhr.readyState == 4 && xhr.status == 200)
{
    reponse = clean(xhr.responseXML.documentElement);
    // traitement dans une fonction dédiée
    fct_callback( reponse);
}

**vandman** · 12/07/2016, 10h04

Bonjour,

Dans le code précédemment fourni, le traitement se faisait bien la ou tu l'indique:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
if(xhr.readyState == 4 && xhr.status == 200)
		{
			// Début du traitement: nettoyage du XML
			reponse = clean(xhr.responseXML.documentElement);
			// Suite du traitement: Récupération des élément ID de "Reponse".
			Id = reponse.getElementsByTagName("id");
			// Suite du traitement: Effacement du message d'attente avec CSS
			document.getElementById("message").className="tumevoispas";
			// Fin du traitement: retour des Éléments "Id"
			return Id;
		}

Le problème de ce code est qu'il ne fonctionne pas???

Je pense que le problème vient du fait qu'entre deux changement d'état (xhr.readyState), la fonction a le temps de se terminer et qu'une fois sortie, le contexte de la fonction n'existe plus.

Cordialement,
vandman

**NoSmoking** · 12/07/2016, 18h48

Quand je dis que le traitement doit se faire dans la partie retour, cela signifie TOUT le traitement, mettre un return dans cette partie n'a AUCUN sens.

Pour coller à ton cas, toute la partie qui suit

Code :

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

var ListePerim = ListePerimetre("0", "0");

soit ce code

Code :

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

1
2
3
4
5
6
7
8
9
10
    for (i = 0; i<ListePerim.length; i++)
    {
		option = document.createElement("option");
		option.setAttribute("value", ListePerim[i].getAttribute("value"));
		option.text = ListePerim[i].getElementsByTagName("texte")[0].firstChild.nodeValue;
		select.appendChild(option);
    }
	select.setAttribute("onchange", "OnChangePerimetre(event)");
	cell.appendChild(select);
	row.appendChild(cell);

doit être dans la partie retour de la réponse. Il te faut pour la cohérence mettre ce qui précède également dans, ou dans une fonction callback comme déjà indiqué.

Donc en gros

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
if (xhr.readyState == 4 && xhr.status == 200)
{
    // Début du traitement: nettoyage du XML
    reponse = clean(xhr.responseXML.documentElement);
    // Suite du traitement: Récupération des élément ID de "Reponse".
    Id = reponse.getElementsByTagName('id');
    //////////////////////////////////////////////
    // maintenant je peux faire ce que je souhaite
    //////////////////////////////////////////////
    cell = document.createElement('td');
    cell.setAttribute('class', 'col3');
    // définit le select de la 2ème colonne du formulaire dans le tableau
    select = document.createElement('select');
    select.setAttribute('class', 'StyleSelect');
    select.setAttribute('name', 'perimetre');
    select.setAttribute('id', 'perimetre');
    for (i = 0; i < Id.length; i++)
    {
        option = document.createElement('option');
        option.setAttribute('value', Id[i].getAttribute('value'));
        option.text = Id[i].getElementsByTagName('texte') [0].firstChild.nodeValue;
        select.appendChild(option);
    }
    select.setAttribute('onchange', 'OnChangePerimetre(event)');
    cell.appendChild(select);
    row.appendChild(cell);
}

à tester mais c'est pour l'idée.

**vandman** · 04/08/2016, 10h24

Merci pour la réponse, J'ai bien compris.

J'exécute bien tout le traitement dans la fonction et ca fonctionne bien.

Merci à NoSmoking et a andry.aime

Cordialement,
Vandman

Retour requête non pris en cours [Débutant(e)]

AJAX

Discussions similaires

Partager

Partager