[AJAX] "injection php" avec Ajax.

Version imprimable

Bonjour à toutes & à tous,

Avant tout, je souhaite à prevenir que je suis tres novice dans le web 2.0 et nottament l'Ajax.

voici mon probleme:
Une fonction ajax s'exécute sur l'evenement onchange d'une balise select.
Je souhaiterai pouvoir injecter du php non pas dans une balise div, mais dans 2 balises div distinctes, et différencier le code a injecter en fonction des balises.

Me basant sur l'exemple proposé sur dev.com :
http://siddh.developpez.com/articles/ajax/

(pour les puristes, étant donné que je fais de l'injection php et que par conséquent je n'utilise pas d'XML, on ne peut pas parler réellement d'AjaX).

voici mon code epuré, basé sur l'exemple proposé par dev.com, pour 1 injection php.
Comment le modifier pour pouvoir faire 2 injections différentes dans 2 balises div distinctes.
(Sans passer par 2 fonctions différentes, car je présente un exemple simple ou je n'ai que 2 injections a faire, mais je vais etre ammener a faire plusieurs injections (5-6 en meme tps).

MaPage.php avec les 2 div:
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 <html> ....... ....... <script> function ajaxpenalites() { var xhr = getXhr(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { leselect = xhr.responseText; document.getElementById('MaDiv1').innerHTML = leselect; } } xhr.open("POST","ajaxPenalites.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); sel = document.getElementById('id_pou'); idpou = sel.options[sel.selectedIndex].value; xhr.send("MonIDPou="+idpou); } </script> ..... ..... <select name='id_pou' onchange='ajaxpenalites()'>.....</select> ..... ..... <div id='MaDiv1'></div> ..... ..... <div id='MaDiv2'></div> ..... ..... </html>
Ajaxpenalites.php
Code:

1 2 3 4 5 <?php ..... //Mon injection php avec des echo ..... ?>
J'espere avoir été le plus clair possible, merci par avance de vos solutions.

Il te faut un moyen de différencier ce qui va sur telle et telle div.

Moi généralement j'utilise l'xml pour ca mais tu peux aussi bien faire ca en JSON.

En xml, faut que tu génères quelque chose qui ressemble a ca par exemple:
Code:

1 2 3 4 <root> <A><![CDATA[ ici ce qui doit aller dans ta div A ]]></A> <B><![CDATA[ et la ce qui doit aller dans la B ]]></B> </root>
Tu mets le header xml qui va bien et tu retournes ca.

Et coté javascript, tu récupères tes données et tu les dispatches dans les deux divs:
Code:

1 2 3 4 5 var xml = xhr.responseText; var contentA = xml.getElementsByTagName("A")[0].firstChild.nodeValue; divA.innerHTML = contentA; var contentB = xml.getElementsByTagName("B")[0].firstChild.nodeValue; divB.innerHTML = contentB;

hum hum, ca a l'air d'etre un début de solution interessant! merci de ton aide en tout cas.

ne pratiquant pas le xml, pourrais-tu me fournir un extrait du :

Code:

<![CDATA[ ici ce qui doit aller dans ta div A ]]>

sachant par exemple que je souhaite injecter une balise select généré en php de cette maniere:
Code:

1 2 3 4 5 6 7 8 9 10 11 .... echo "<select name='id_equ'>"; for ($i=1;$i<=$nbe_equ;$i++) { $tableau = mysql_fetch_array($result); $id_equ = $tableau['id_equ']; $nom_equ = $tableau['nom_equ']; echo "<option value='$id_equ'>$nom_equ</option>"; }; echo "</select>"; .....

19/06/2008, 09h16
DoubleU

En fait, dans le CDATA, il faut que tu mettes tout ce que tu mettrais dans tes echo, en séparant bien sur le contenu pour A et B dans deux tags différents.

en farfouillant je suis arrivé à ca:
javascript exécuter sur le onchange d'un <select>:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
	function ajaxpenalitesXML()
	{
				var xhr = getXhr();
				xhr.onreadystatechange = function()
				{
					if(xhr.readyState == 4 && xhr.status == 200)
					{
						MaVar = xhr.responseXML.documentElement;
						document.getElementById('ZlistDerEqu').innerHTML = MaVar.getElementsByTagName("A")[0].firstChild.nodeValue;
					}
				}
				//xhr.open("GET","ajaxxml.php",true);
				//xhr.send(null);
				xhr.open("GET","ajaxPenalitesXML.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('id_pou');
				idpou = sel.options[sel.selectedIndex].value;
				xhr.send("MonIDPou="+idpou);
 
	}

et voici la page ajaxPenalitesXML.php:

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
<?php
        header('Content-Type: text/xml');
        include('scripts/config.php');
        $link = dbConnect();
        if(isset($_GET["MonIDPou"]))
        {
                $temp = $_GET["MonIDPou"];
                $query = "SELECT E.id_equ, nom_equ FROM equipes AS E, equpou AS EP WHERE E.id_equ=EP.id_equ AND EP.id_pou=$temp ORDER BY nom_equ";
                $result = mysql_query($query);
                if ($result) 
                {
                        $nbe_equ = mysql_num_rows($result);
   $buffer1 .= "<select name='id_equ' onchange=ajaxpenalites2()>";
                        for ($i=1;$i<=$nbe_equ;$i++)
                        {
                                $tableau = mysql_fetch_array($result);
                                $id_equ = $tableau['id_equ'];
                                $nom_equ = $tableau['nom_equ'];
                                $buffer1 .= "<option value='$id_equ'>$nom_equ</option>";
                        };
   
   $buffer  = '<?xml version="1.0"?>';
   $buffer .= "<root>";
   $buffer .= "<A>";
   $buffer .= '<![CDATA[ $buffer1 ]]>';
   $buffer .= "</A>";
   $buffer .= "</root>";
   echo $buffer;
        };
?>

et j'ai le bug suivant:
Line: 496
Character: 7
Code: 0
Error Message: 'MaVar' a la valeur Null ou n'est pas un objet.
URL: http://127.0.0.1/bpa7.13/penalites.php

qui pointe sur la ligne : document.getElementById('ZlistDerEqu').innerHTML = MaVar.getElementsByTagName("A")[0].firstChild.nodeValue;

(j'utilise companion.JS pr le débuggage javascript sous ie).

19/06/2008, 13h44
DoubleU

MaVar = xhr.responseXML suffit, il ne faut pas rajouter le .documentElement
19/06/2008, 13h49
tomo0013

j'ai testé aussi cette solution ... ca me genere un bug a la ligne d'apres:

Code:

Error Message: Objet requis

mon code à l'air cohérent pourtant ....
19/06/2008, 17h10
tomo0013

Rebonjour!

J'avance petit à petit sur mon code ...
mon probleme précédent était du a un } oublié ...

voici un autre message qui apparait:

Citation:

Error Message: Cet objet ne gère pas cette propriété ou cette méthode

Ce message s’affiche sur cette ligne :

Code:

document.getElementById('ZlistDerEqu').innerHTML = MaVar.getElementsByTagName("A")[0].firstChild.nodeValue;

ou celle la :

Code:

alert (MaVar.getElementsByTagName("A")[0].firstChild.nodeValue);

donc y’a un bug avec le :

Code:

MaVar.getElementsByTagName("A")[0].firstChild.nodeValue

....
19/06/2008, 17h27
DoubleU

Tu peux pas utiliser firebug sous FF?

Parce que les message d'erreur de IE, tu les aurais pas tu serais pas moins avancé ^^
19/06/2008, 17h32
tomo0013

ben j'utilise companion.JS un firebug like pour ie.

Bon ben je me suis débrouillé seul, et j'ai résolu mon probleme.
Voici mon code, fonctionnel, propre et commenté:

Les fcts 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
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
//-----------------------------------= fct getXHR = utilisé dans Ajax =-------------------------------------------
	//fct pour instancier l'objet xhr en fonction du navigateur du client :
	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;
	}
//-----------------------------------= FIN DE : fct getXHR = utilisé dans Ajax =---------------------------------
 
//-----------------------------------------------= Fct ajax/XML go & clean penalites.php =--------------------------------------
			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;
			}
//------------------------------------------------------------------------------------------------------------------------------
 
 
 
//-----------------------------------= Fct ajax/XML pr penalites.php =--------------------------------------
	function ajaxPenalitesPoules()
	{
	//Principe : Apres avoir instancié xhr, de maniere procédurale, on va d'abord exécuté la partie B, puis apres la partie A.
 
				var xhr = getXhr(); //On instancie xhr comme un objet de la classe XMLHttpRequest grace a l'appel de la fct getXhr()
 
				//Partie A
				xhr.onreadystatechange = function() //A chaque changement d'état de l'objet xhr, on exécute la fonction entre { }:
				{
					//A chaque changement d'état, on test que l'état de l'objet xhr est "pret" ( = à 4), et si tous la réponse du serveur web est "OK" ( = 200)
					if(xhr.readyState == 4 && xhr.status == 200)
					{
						//Si on est ici, c'est qu'on a terminé de récupéré correctement les données traités et transformé en XML, par conséquent, on récupere le tout dans une var nommé MaReponse, en précisant que les datas sont du XML (par la méthode : .responseXML.documentElement) (a la différence la méthode standard : .responseText)
						//De plus on néttoie grace a la fct clean, afin que l'arborescence du fichier XML soit cohérent selon les différents navigateurs.
						MaReponse = clean(xhr.responseXML.documentElement);
						//Grace a la méthode innetHTML, on "injecte" du code html sur la page principale, dans la balise div identifié : ZListDerEqu. Le code injecte est l'ensemble de la chaine de texte du noeud (.firstChlid.nodeValue), de la balise XML "A" de l'objet MaReponse.
						document.getElementById('ZlistDerEqu').innerHTML = MaReponse.getElementsByTagName("A")[0].firstChild.nodeValue;
						document.getElementById('TxtEqu').innerHTML = MaReponse.getElementsByTagName("B")[0].firstChild.nodeValue;
					}
					//Ici la fin de la fct
				}
 
				//Partie B:
				//On passe en post nos var déclaré ci-dessous, vers la page ajaxPenalitesPoules.php, en mode asynchrone (true)
				xhr.open("POST","ajaxPenalitesPoules.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //Indispensable
				//On récupere la valeur de la balise identifié id_pou sur notre page principale.
				sel = document.getElementById('id_pou');
				idpou = sel.options[sel.selectedIndex].value; //On traite cette valeur pour pouvoir la passer en parametre grace a Xhr
				xhr.send('MonIDPou='+idpou); //On passe notre valeur en POST vers la page ajaxPenalitesPoules.php, qui va généré en fct de cette var (MonIDPou) le fichier XML contenant les balises A et B.
	}
//-----------------------------------= FIN DE : Fct ajax pour la page penalites.hp =-----------------------------

La pages ajaxPenalitesPoules.php (qui genere mon fichier XML à partir du code php) :

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
<?php
//												-=GENERATION CODE XML A PARTIR DU PHP=-
//															-=INJECTION PHP=-
//							NB : IL FAUT QUE TOUTES LES CONCAT DE CHAINE DE TXT SE FASSE AVEC UN SIMPLE QUOTE !!!!!!!!!!
 
	include('scripts/config.php');
	$link = dbConnect();
//------------------------------------------CREATION BALISE -=A=- DU # XML -------------------------------------------------------
//Ici on creer notre chaine de texte qui va contenir l'intégralité du code HTML de la balise de <select> des équipes.
	$temp = $_POST['MonIDPou']; //Dans notre cas on est OBLIGER de passer les var de la fct javascript vers cette page, en POST.
		$query = "SELECT E.id_equ, nom_equ FROM equipes AS E, equpou AS EP WHERE E.id_equ=EP.id_equ AND EP.id_pou='$temp' ORDER BY nom_equ";
		$result = mysql_query($query);
		if ($result) 
		{
			$nbe_equ = mysql_num_rows($result);
 
   $buffer1 = '<select name="id_equ" id="id_equ" onchange="ajaxPenalitesEquipes()">';
   			for ($i=1;$i<=$nbe_equ;$i++)
			{
				$tableau = mysql_fetch_array($result);
				$id_equ = $tableau['id_equ'];
				$nom_equ = $tableau['nom_equ'];
				$buffer1 .= '<option value='.$id_equ.'>'.$nom_equ.'</option>';
			};
	$buffer1 .= '</select>';
 
//------------------------------------------CREATION BALISE -=B=- DU # XML -------------------------------------------------------
	$buffer2 = 'Choisir l\'equipe :';
 
 
 
 
 
//------------------------------------------CREATION # XML -------------------------------------------------------
//Ici on creer la structure du fichier HTML en intégrant les 2 variable buffer1 et buffer2 créé ci-dessus.
   $buffer = '';
   $buffer .= '<reponse>';
   $buffer .= '<A>';
   $buffer .= '<![CDATA['; //CDATA permet de ne pas interprété les caracteres spéciaux (nottament les < et >)
   $buffer .= $buffer1; //La balise A contient le code renvoyé dans la balise ZListDerEqu
   $buffer .= ']]>'; //Fin balise CDATA
   $buffer .= '</A>';
   $buffer .= '<B>';
   $buffer .= $buffer2;
   $buffer .= '</B>';
   $buffer .= '</reponse>';
 
   header('Content-Type: text/xml'); //On déclare le fichier généré ci-dessus comme un fichier XML
   echo $buffer;	//Valeur de retour vers la fct javascript.
   	};
?>

Extrait de ma page principale :

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
…..
…..
<body>
…..
…..
                            <tr>
                            	<td width="50%" align="center">
                                	Choisir la poule :
                                </td>
                                <td width="50%" align="center">
                                	<?php
//------------------------------------------------------------------------------AFF POULE------------------------------
$query = "SELECT id_pou, nom_pou FROM poules WHERE id_comp=$id_comp ORDER BY nom_pou";
$result = mysql_query($query);
if (!$result) fail("Erreur d'exécution de requête d'extraction de la poule");
$nbe_pou = mysql_num_rows($result);
 
echo "<select name='id_pou' id='id_pou' onchange='ajaxPenalitesPoules()'>";
for ($i=1;$i<=$nbe_pou;$i++)
{
        $tableau = mysql_fetch_array($result);
        $id_pou = $tableau['id_pou'];
        $nom_pou = $tableau['nom_pou'];
        echo "<option value='$id_pou'>$nom_pou</option>";
};
echo "<option value='' selected></option>";
echo "</select>";
//---------------------------------------------------------------------------------------------------------------------
                                                                        ?>
                                </td>
                            </tr>
                            <tr>
                            	<td>
                                	<br />
                                    <br />
                                </td>
                            </tr>
                            <tr>
                            	<td width="50%" align="center" class="texte">
                            		<div id='TxtEqu' name='TxtEqu'>
                                	</div>
                                </td>
                            	<td width="50%" align="center" class="texte">
                            		<div id='ZlistDerEqu' name='ZlistDerEqu'>
                                	</div>
                                </td>
                            </tr>
.....
.....
</body>
.....
.....