je suis actuellement en train de coder 3 listes déroulantes liées en ajax et j'aimerai bien être aidé pour le problème que je viens de rencontrer.
Voici mon problème, lors de la sélection du fabricant, j'ai bien la liste des sous catégories en liaison avec ce fabricant qui se met a jour automatiquement, alors que celle des familles ne se met pas a jour.
Avec la console de développeur de google chrome j'obtiens comme erreurs :
-"Failed to load resource" dans rpc.php
-"Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
handleResponse" dans sfam.js à la ligne 29
voici le code de ma page index.php
<?php
require './config.inc.php';
$mysqli = new mysqli($db['server'], $db['user'], $db['passwd'], $db['name']);
if (0 !== mysqli_connect_errno()) {
exit('Could not connect to database: ' . mysqli_connect_error());
}
$sql = 'SELECT ps_manufacturer.id_manufacturer, ps_manufacturer.name FROM ps_manufacturer INNER JOIN ps_manufacturer_category ON ps_manufacturer.id_manufacturer = ps_manufacturer_category.id_manufacturer WHERE (((ps_manufacturer_category.id_manufacturer_category) Like 1)) ORDER BY name ASC;';
$sql_fam = 'SELECT cl.id_category, cl.name FROM ps_category_lang cl LEFT JOIN ps_category c ON cl.id_category = c.id_category WHERE c.level_depth = 3 order by name';
$sql_sfam = 'SELECT cl.id_category, cl.name FROM ps_category_lang cl LEFT JOIN ps_category c ON cl.id_category = c.id_category WHERE c.level_depth > 3 order by name';
?>
<script type="text/javascript" src="fabricant.js"></script>
<script type="text/javascript" src="sfam.js"></script>
<form action="#" method="post" id="form">
<p>Sélectionnez un fabricant :
<select name="fabricants" id="fabricants" onchange="updatefamilles(this.value);updatesousfamilles(this.value);">
<option selected value="-1">Choisir un fabricant...</option>
<?php
if (FALSE !== ($res = $mysqli->query($sql))) {
while ($row = $res->fetch_assoc()) {
printf('<option value="%s">%s</option>', $row['id_manufacturer'], $row['name']);
}
$res->close();
}
?>
</select>
</p>
<?php //<div id="familles">
?>
<p>Sélectionnez une famille :
<select name="familles" id="familles" onchange="">
<option selected value="-1">Choisir une famille...</option>
<?php
if (FALSE !== ($res = $mysqli->query($sql_fam))) {
while ($row = $res->fetch_assoc()) {
printf('<option value="%s">%s</option>', $row['id_category'], $row['name']);
}
$res->close();
}
?>
</select>
<?php //</div>?>
</p>
<?php //<div id="sousfamilles">?>
<p>Sélectionnez une sous-famille :
<select name="sousfamilles" id="sousfamilles" onchange="">
<option selected value="-1">Choisir une sous-famille...</option>
<?php
if (FALSE !== ($res = $mysqli->query($sql_sfam))) {
while ($row = $res->fetch_assoc()) {
printf('<option value="%s">%s</option>', $row['id_category'], $row['name']);
}
$res->close();
}
?>
</select>
<?php //</div>?>
</p>
<p><input type="submit" value="Soumettre" />
</form>
Celui de ma page rpc.php
<?php
if (TRUE === isset($_GET['fabricant'])) {
$fabricant = intval($_GET['fabricant']);
} else {
exit;
}
if ($fabricant == "" or $fabricant == " " or $fabricant == "-1"){
exit;
} else {
require './config.inc.php';
$mysqli = new mysqli($db['server'], $db['user'], $db['passwd'], $db['name']);
if (0 !== mysqli_connect_errno()) {
exit('Could not connect to database: ' . mysqli_connect_error());
}
header('Content-Type: text/xml; charset=UTF-8');
$dom = new DOMDocument('1.0', 'utf-8');
$message = $dom->createElement('message');
$message = $dom->appendChild($message);
$sql = 'SELECT id_category, name From ps_category_lang Where id_category IN (SELECT DISTINCT ps_category.id_parent FROM ps_category INNER JOIN ps_manufacturer_category_lien ON ps_category.id_category = ps_manufacturer_category_lien.id_category WHERE (((ps_manufacturer_category_lien.id_manufacturer_category_lien) Like '.$fabricant.') AND ((ps_category.level_depth) Like 4)))';
if (FALSE !== ($res = $mysqli->query($sql))) {
while ($row = $res->fetch_assoc()) {
$famille = $dom->createElement('famille', utf8_encode($row['name']));
$famille = $message->appendChild($famille);
$famille->setAttribute('id', $row['id_category']);
}
$res->close();
}
echo $dom->saveXML();
}
?>
Celui de ma page fabricant.js
var ajax;
var ajax1;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
if (typeof XMLHttpRequest!='undefined') {
ajax = new XMLHttpRequest();
}
}
}
function updatefamilles(fabricant) {
alert(fabricant);
ajax.open('get', 'rpc.php?fabricant=' + fabricant);
ajax.onreadystatechange = handleResponse;
alert(ajax.onreadystatechange.value);
ajax.send(null);
alert(ajax.send.value);
}
function handleResponse() {
if(ajax.readyState == 4) {
var data = ajax.responseXML.getElementsByTagName('famille');
document.getElementById('familles').innerHTML = '';
for(var i=0;i<data.length;i++) {
var option = document.createElement('option');
option.setAttribute('value',data[i].getAttribute("id"));
option.appendChild(document.createTextNode(data[i].firstChild.nodeValue));
document.getElementById('familles').appendChild(option);
}
}
}
function initForm() {
document.getElementById('fabricants').selectedIndex = 0;
updatefamilles(document.getElementById('fabricants').value);
}
if (window.addEventListener) {
window.addEventListener("load", initForm, false);
} else if (window.attachEvent){
window.attachEvent("onload", initForm);
}
Celui de ma page sfam.php
<?php
if (TRUE === isset($_GET['fabricant'])) {
$fabricant = intval($_GET['fabricant']);
} else {
exit;
}
if ($fabricant == "" or $fabricant == " " or $fabricant == "-1"){
exit;
} else {
require './config.inc.php';
$mysqli = new mysqli($db['server'], $db['user'], $db['passwd'], $db['name']);
if (0 !== mysqli_connect_errno()) {
exit('Could not connect to database: ' . mysqli_connect_error());
}
header('Content-Type: text/xml; charset=UTF-8');
$domsfam = new DOMDocument('1.0', 'utf-8');
$message = $domsfam->createElement('message');
$message = $domsfam->appendChild($message);
$sql = 'SELECT id_category, name From ps_category_lang Where id_category IN (SELECT DISTINCT ps_category.id_category FROM ps_category INNER JOIN ps_manufacturer_category_lien ON ps_category.id_category = ps_manufacturer_category_lien.id_category WHERE (((ps_manufacturer_category_lien.id_manufacturer_category_lien) Like '.$fabricant.') AND ((ps_category.level_depth) Like 4)))';
if (FALSE !== ($res = $mysqli->query($sql))) {
while ($row = $res->fetch_assoc()) {
$sousfamille = $domsfam->createElement('sousfamille', utf8_encode($row['name']));
$sousfamille = $message->appendChild($sousfamille);
$sousfamille->setAttribute('id', $row['id_category']);
}
$res->close();
}
echo $domsfam->saveXML();
}
?>
Celui de ma page sfam.js
var ajax;
var ajax1;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
if (typeof XMLHttpRequest!='undefined') {
ajax = new XMLHttpRequest();
}
}
}
function updatesousfamilles(fabricant) {
alert(fabricant);
ajax.open('get', 'sfam.php?fabricant=' + fabricant);
ajax.onreadystatechange = handleResponse;
alert(ajax.onreadystatechange.value);
ajax.send(null);
alert(ajax.send.value);
}
function handleResponse() {
if(ajax.readyState == 4) {
var data = ajax.responseXML.getElementsByTagName('sousfamille');
document.getElementById('sousfamilles').innerHTML = '';
for(var i=0;i<data.length;i++) {
var option = document.createElement('option');
option.setAttribute('value',data[i].getAttribute("id"));
option.appendChild(document.createTextNode(data[i].firstChild.nodeValue));
document.getElementById('sousfamilles').appendChild(option);
}
}
}
function initFormSousFamille() {
document.getElementById('fabricants').selectedIndex = 0;
updatesousfamilles(document.getElementById('fabricants').value);
}
if (window.addEventListener) {
window.addEventListener("load", initFormSousFamille, false);
} else if (window.attachEvent){
window.attachEvent("onload", initFormSousFamille);
}