J'ai un problème concernant des listes liés, ma seconde liste ne s'affiche pas dans le "select" et n'arrive pas à trouver le problème même si je me doute qu'il vient du php.
Ca vous paraitra certainement très simple donc vous trouverez ci-dessous le code épuré de l'inutile :
Ma page principale (.php)
<?php
function chargClass($class) { require 'lib/'.$class.'.class.php'; } spl_autoload_register('chargClass');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>LIST</title>
<link href="css/testStyle.css" rel="stylesheet" type="text/css">
<script src="js/xhr.js" type="text/javascript"></script>
<script src="js/box.js" type="text/javascript"></script>
</head>
<body>
<div>
<select id="firstList" onchange="request(this);" >
<option id="-1">Sélection</option>
<?php
try {
$bdd = BDD::getBDD();
$bdd->exec('SET NAMES utf8');
$firstList = new ConnectB($bdd);
$firstList->viewFirstList();
}
catch(Exception $e) { die('blah blah blah...'); }
?>
</select>
<span id="loader"><img src="i/loader.gif" alt="chargement" /></span>
<select id="secondList"></select>
</div>
</body>
</html>
function getXHR() {
var xhr = null;
if(window.XMLHttpRequest || window.ActiveXObject) {
if(window.ActiveXObject) {
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
}
else {
xhr = new XMLHttpRequest();
}
}
else {
alert('Votre navigateur ne supporte pas l\'objet : \n - XMLHttpRequest \n - ActiveXObject');
return null;
}
return xhr;
}
function request(sel) {
var xhr = getXHR(), val = sel.options[sel.selectedIndex].value;
xhr.onreadystatechange = function() {
var loader = document.getElementById('loader').style;
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
viewDone(xhr.responseXML);
loader.display = 'none';
}
else if(xhr.readyState < 4) {
loader.display = 'inline';
}
};
xhr.open('POST', 'list.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('Ided=' + val);
}
function viewDone(eDone) {
var items = eDone.getElementsByTagName('item'), itLen = items.length, sel = document.getElementById('secondList');
sel.innerHTML = '';
for(var i = 0; i < itLen; i++) {
var op = document.createElement('option'), tx = document.createTextNode(items[i].getAttribute('name'));
op.value = items[i].getAttribute('id');
op.appendChild(tx);
sel.appendChild(op);
}
}
<?php
class ConnectB
{
protected $bdd;
public function __construct($bdd) {
$this->bdd = $bdd;
}
public function viewFirstList() {
$viewFirstQuery = $this->bdd->query('SELECT * FROM dpt ORDER BY name');
foreach($viewFirstQuery as $viewFirstDone) {
echo '<option value="'.$viewFirstDone['id'].'">'.$viewFirstDone['name'].'</option>';
}
}
public function viewSecondList($ided) {
$viewSecondQuery = $this->bdd->query('SELECT * FROM location WHERE idDpt='.$ided.' ORDER BY name');
while($viewSecondDone = $viewSecondQuery->fetch()) {
echo '<item id="'.$viewSecondDone['id'].'" name="'.$viewSecondDone['name'].'" />';
}
$viewSecondQuery->closeCursor();
}
}
<?php
function chargClass($class) { require 'lib/'.$class.'.class.php'; } spl_autoload_register('chargClass');
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="utf-8"?>';
echo '<list>';
if(isset($_POST['Ided'])) {
try {
$bdd = BDD::getBDD();
$bdd->exec('SET NAMES utf8');
$secondList = new ConnectB($bdd);
$seconList->viewSecondList($_POST['ided']);
}
catch(Exception $e) { die('Echec de la base de données...blh blah blah'); }
}
echo '</list>';
?>
body { margin:0; padding:0; background:#ffffff; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; }
#loader { display:none; width:16px; height:16px; }
La première liste contient deux champs (id et name), la seconde en contient trois (id, name et id correspondant de la première).
Je sais pas si c'est assez clair du moins je l'espère.
Merci par avance