Liste liées à plusieurs niveaux par bibibo - page 1

Bonjour à tous,

Je viens de lire le tutoriel "L'objet XMLHttpRequest" issu du cours Ajax et l'échange de données. J'ai au préalable lu le cours d'introduction au javascript mais je reste novice en la matière. J'ai donc saisi le code pour l'exemple des listes liés. Pour rappel, le principe est de sélectionner une donnée dans le <select> qui remplit automatiquement un second <select> en fonction du choix.

Je copie/colle le code du cours

<!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) {
	var value = oSelect.options[oSelect.selectedIndex].value;
	var xhr   = getXMLHttpRequest();
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readData(xhr.responseXML);
			document.getElementById("loader").style.display = "none";
		} else if (xhr.readyState < 4) {
			document.getElementById("loader").style.display = "inline";
		}
	};
	
	xhr.open("POST", "XMLHttpRequest_getListData.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("IdEditor=" + value);
}

function readData(oData) {
	var nodes   = oData.getElementsByTagName("item");
	var oSelect = document.getElementById("softwaresSelect");
	var oOption, oInner;
	
	oSelect.innerHTML = "";
	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>
<fieldset>
	<legend>Programmes</legend>
	<div id="programBox">
		<p id="editors">
			<select id="editorsSelect" onchange="request(this);">
				<option value="none">Selection</option>
				<?php					
					mysql_connect($hote, $login, $m_d_p);
					mysql_select_db($bdd);
					
					$query = mysql_query("SELECT * FROM ajax_example_editors ORDER BY name");
					while ($back = mysql_fetch_assoc($query)) {
						echo "\t\t\t\t<option value=\"" . $back["id"] . "\">" . $back["name"] . "</option>\n";
					}
				?>			
			</select>
			<span id="loader" style="display: none;"><img src="images/loader.gif" alt="loading" /></span>
		</p>
		<p id="softwares">
			<select id="softwaresSelect"></select>
		</p>
	</div>
</fieldset>
</body>
</html>

et la page PHP

<?php

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

$idEditor = (isset($_POST["IdEditor"])) ? htmlentities($_POST["IdEditor"]) : NULL;

if ($idEditor) {
	mysql_connect($hote, $login, $m_d_p);
	mysql_select_db($bdd);
	
	$query = mysql_query("SELECT * FROM ajax_example_softwares WHERE idEditor=" . mysql_real_escape_string($idEditor) . " ORDER BY name");
	while ($back = mysql_fetch_assoc($query)) {
		echo "<item id=\"" . $back["id"] . "\" name=\"" . $back["name"] . "\" />";
	}
}

echo "</list>";

?>

Je tente de faire plus de 2 listes liées. C'est à dire ne pas s'arrêter à la seconde remplit après le choix de la première mais une troisième qui se remplit en fonction de la 2ème, etcc. J'ai encore un peu de mal avec les fonctions et arguments en JS. Si quelqu'un a une toute petite piste pour me mettre sur les rails ça serait super !!

Merci pour votre aide précieuse.

Cordialement

Liste liées à plusieurs niveaux

Liste liées à plusieurs niveaux

Supprimer

Modérer

Signaler le message aux modérateurs