Problème avec 2 listes dynamiques liées à une BdD

cs_ines57 Messages postés 15 Date d'inscription lundi 14 janvier 2008 Statut Membre Dernière intervention 9 juin 2009 - 21 avril 2009 à 11:14
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 - 21 avril 2009 à 16:39
Bonjour,

Je suis actuellement entrain de bosser sur un site et j'ai voulu utiliser de l'Ajax pour ma recherche.

Je me suis servie d'un tuto trouvé sur le net, ma première liste déroulante se remplit, mais la 2ème reste vide. L'erreur doit venir d'une requête, mais ça fait 2 jours que je cherche sans succès.

Voici les tables utilisés :

CREATE TABLE `type` (
  `typ_no_type` int(10) NOT NULL auto_increment,
  `typ_nom_type` varchar(100) NOT NULL default '',
  PRIMARY KEY  (`typ_no_type`)
) TYPE= MyISAM AUTO_INCREMENT=5 ;

#
# Contenu de la table `type`
#

INSERT INTO `type` VALUES (1, 'Achat');
INSERT INTO `type` VALUES (2, 'Location');
INSERT INTO `type` VALUES (3, 'Location de vacances');
INSERT INTO `type` VALUES (4, 'Programme neuf');

CREATE TABLE `batiment` (
  `bat_no_batiment` int(2) NOT NULL auto_increment,
  `bat_nom_batiment` varchar(100) NOT NULL default '',
  `bat_no_type` int(2) NOT NULL default '0',
  `bat_nb_piece_maison` int(2) default '0',
  `bat_nb_piece_appartement` int(2) default '0',
  PRIMARY KEY  (`bat_no_batiment`)
) TYPE=MyISAM AUTO_INCREMENT=12 ;

#
# Contenu de la table `batiment`
#

INSERT INTO `batiment` VALUES (1, 'Maison', 1, 3, 0);
INSERT INTO `batiment` VALUES (2, 'Maison', 2, 3, 0);
INSERT INTO `batiment` VALUES (3, 'Appartement', 1, 0, 1);
INSERT INTO `batiment` VALUES (4, 'Appartement', 2, 0, 1);
INSERT INTO `batiment` VALUES (5, 'Terrain', 1, 0, 0);
INSERT INTO `batiment` VALUES (6, 'Garage', 1, 0, 0);
INSERT INTO `batiment` VALUES (7, 'Garage', 2, 0, 0);
INSERT INTO `batiment` VALUES (8, 'Local commercial', 1, 0, 0);
INSERT INTO `batiment` VALUES (9, 'Local commercial', 2, 0, 0);
INSERT INTO `batiment` VALUES (10, 'Immeuble', 1, 0, 0);
INSERT INTO `batiment` VALUES (11, 'Immeuble', 2, 0, 0);



Voici ensuite les 2 fichiers ou je gère celà :

recherche.php

<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>

<?php
include_once("mysql.inc.php");
?>

<script type ='text/javascript'>

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;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/ 

function go() {
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est okif(xhr.readyState 4 &amp;&amp; xhr.status 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('batiment').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajax.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('type');
bat_no_type = sel.options[sel.selectedIndex].value;
xhr.send("bat_no_type="+bat_no_type);
}

</script>
</head>

<form>

<select name='type' id='type' onchange='go()'>
<option value='-1'>Aucun</option>

<?php
$res = mysql_query("SELECT * FROM type ORDER BY typ_no_type");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["typ_no_type"]."'>".$row["typ_nom_type"]."</option>";}
?>

</select>

<select name='batiment' id="batiment">
<option value='-1'>Choisir un batiment</option>

</select>

</form>

</html>


et

ajax.php

<?php

include_once("mysql.inc.php");

echo "<select name ='batiment' id='batiment'>";

if( isset($_POST["typ_no_type"]) ) {
$res = mysql_query("SELECT bat_no_batiment, bat_nom_batiment FROM batiment
WHERE bat_no_type=".$_POST["bat_no_type"]." ORDER BY bat_nom_batiment");

while ( $row = mysql_fetch_assoc($res) ) {
echo "<option value='".$row["bat_no_batiment"]."'>".$row["bat_nom_batiment"]."</option>";
}
}
echo "</select>";
?>


Je vous remercie d'avance

2 réponses

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
21 avril 2009 à 11:26
Bonjour,

t'es sûr que c'est un souci javascript ??
si oui, regarde/affiche le code html/javascript généré et donne le nous !
( l'extrait nécessaire, pas plus )

et si tu voulais un autre exemple : va voir ici

Cordialement [mon Site] [M'écrire] Bul
0
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
21 avril 2009 à 16:39
C'est un bug connu sur IE que l'on ne peut pas modifier le innerHTML des select. Regarde ce lien, tu trouvera l'information nécessaire pour contourner ce bug :
http://support.microsoft.com/kb/276228
0
Rejoignez-nous