menu dynamique ajax

9 août 2010 à 20:23:49

Bonjour à tous.
Vive le SDZ !!! une merveille ce site, passionnant, je passe mes nuits à coder.
Heureusement qu'il y a le forum pour débeuguer ...

Bon je sais qu'il y a déja des milliers de message sur ce sujet, mais j'ai préféré construire mon propre code tout seul en suivant les indications du sdz, mais il semblerai qu'un infime (ou gros) grain de sable s'y trouve.

Je vous remerci par avance parce que j'ai beau relire, je suis un peu short au niveau de la maitrise.

Page traitement client : aj1.php

php

"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>

<script type="text/javascript" src="oXHR.js"></script>

<script type="text/javascript">

</script>

</head>
<body>

<p id="p_r">
<?php
echo '<select id="r"><option value="0">categorie :</option>';
$cat = array('Antique', 'France', 'Colonie', 'Europe', 'Monde');
for($numero=0; $numero<5; $numero++) {
$categorie = $cat[$numero];
echo '<option value="'.$categorie.'">'.$categorie.'</option>';
}
echo '</select>';
?>
</p>

<p id="p_sr">
<select id="sr"></select>
</p>

</body>
</html></code>

Page traitement serveur : aj11.php

<?php
header("Content-Type: text/xml");
echo '<?xml version="1.0" encoding="utf-8" ?>';
echo '<list>';

$ajr = (isset($_POST['ajr'])) ? htmlentities($_POST['ajr']) : NULL;
if ($ajr) {
	mysql_connect("localhost", "root", "");
	mysql_select_db("test");
	
	$rq="SELECT DISTINCT epopays FROM numis WHERE support=10 AND categorie='.mysql_real_escape_string($ajr).'";
	$donnees=mysql_query($rq) or die(mysql_error());
	while($fiche=mysql_fetch_array($donnees)) {
		echo '<item id="'.$fiche['epopays'].'" name="'.$fiche['epopays'].'">';
	}
}

echo '</list>';

?>

Laurent

Tillertan

9 août 2010 à 23:21:26

Corrige ton zcode..

Xia

9 août 2010 à 23:26:27

Citation : daporoty

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>

<script type="text/javascript" src="oXHR.js"></script>

<script type="text/javascript">
<!-- 
function request(oSelect) { //fonction A
	var value = oSelect.options[oSelect.selectedIndex].value;
	var xhr = getXMLHttpRequest(); //instanciation
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readData(xhr.responseXML); //retour des données
		}
	}; //récupération des données
	
	//xhr.open("GET", "aj1.xml", true); //get vers page fournissant les données*
	xhr.open("POST", "aj11.php", true); //post vers page fournissant les données*
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	//xhr.send(null); //envoi get
	xhr.send("ajr=" + value); //envoi post
}

function readData(oData) { //fonction B lorsque A est terminée
	var nodes = oData.getElementsByTagName("item");
	var oSelect = document.getElementById("sr");
	var oOption, oInner;

	oSelect.innerHTML = ""; //transcription des données
	for (var i=0, c=nodes.length; i<c; i++) {
		oOption = document.createElement("option");
		oInner  = document.createTextNode(nodes[i].getAttribute("name"));
		oOption.value = nodes[i].getAttribute("id");
		
		oOption.appendChild(oInner);
		oSelect.appendChild(oOption);
	}
}
//-->
</script>

</head>
<body>

<p id="p_r">
<?php
echo '<select id="r"><option value="0">categorie :</option>';
$cat = array('Antique', 'France', 'Colonie', 'Europe', 'Monde');
for($numero=0; $numero<5; $numero++) {
	$categorie = $cat[$numero];
	echo '<option value="'.$categorie.'">'.$categorie.'</option>';
}
echo '</select>';
?>
</p>

<p id="p_sr">
<select id="sr"></select>
</p>

</body>
</html>

Page traitement serveur : aj11.php

<?php
header("Content-Type: text/xml");
echo '<?xml version="1.0" encoding="utf-8" ?>';
echo '<list>';

$ajr = (isset($_POST['ajr'])) ? htmlentities($_POST['ajr']) : NULL;
if ($ajr) {
	mysql_connect("localhost", "root", "");
	mysql_select_db("test");
	
	$rq="SELECT DISTINCT epopays FROM numis WHERE support=10 AND categorie='.mysql_real_escape_string($ajr).'";
	$donnees=mysql_query($rq) or die(mysql_error());
	while($fiche=mysql_fetch_array($donnees)) {
		echo '<item id="'.$fiche['epopays'].'" name="'.$fiche['epopays'].'">';
	}
}

echo '</list>';

?>

Laurent

J'ai refait la balise de code, y avait des bugs... C'est bien du code php, même si tu le fais passer pour du XML

(je me mets a l'aise pour lire quoi...)

Edit : Maintenant que j'ai lu, je ne vois pas d'appel à la fonction "request"...

Xia | Javascript avec style | Python et JS en s'amusant | Random xkcd | ZdS

daporoty

10 août 2010 à 0:16:55

Bonjour,
Désolé pour l'affichage du code, mais l'apercu ne fonctionne pas ?!

En effet il manquait l'appel dans la balise :
<select id="r" onchange="request(this);"> (dans aj11.php)

Mais je n'ai toujours pas de retour de données, le second menu reste vide.

Ma table est structurée de cette façon :
id | categorie(r) | epopays(sr) | ...

Je pense qu'il y a un problème dans les variables et leur suivi.

Laurent

Xia

10 août 2010 à 0:23:05

Une question toute bête mais, le champ catégorie contient bien les nom 'Antique', 'France', 'Colonie', 'Europe' et 'Monde', pas des numéros?

Xia | Javascript avec style | Python et JS en s'amusant | Random xkcd | ZdS

daporoty

10 août 2010 à 21:22:54

Bonjour,

En effet, le champs categorie de la table ne contient que les valeurs mentionnés dans l'array :
$cat = array('Antique', 'France', 'Colonie', 'Europe', 'Monde');

Le problème se situe donc dans la fonction readData(), cependant ... j'ai appris sur le sdz le html, xml, css, php et maintenant ajax, mais pas le javascript, c'est pourquoi je requière votre aide pour ces menus qui bloquent tout mon projet.

Shivaan

10 août 2010 à 21:26:35

Ha ben si tu ne fais pas les choses dans l'ordre aussi. Apprends le JavaScript avant l'aJaX. Ca ne te sera que profitable

Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !

daporoty

10 août 2010 à 23:35:23

Bonjour,

Cette réponse ne m'a pas aidé, mais pouvez vous me confirmer si c'est bien de la fonction readData(), ou si c'est un autre problème ?

Laurent