Bonjour;
J'essaie de générer deux(2) listes liées et aussi des input dynamiquement avec ajax et javascript mais dure dure...
Mon code ne marche pas normalement.
En effet , j'arrive a avoir la première liste mais l'action onchange sur la function goe(); ne marche pas.je ne sais d'où vient le problème.
J'ai besoin de votre aide.Merci d'avance pour votre regard neutre.
Voila mon code:
<HTML><HEAD>
<script type='text/javascript'>
/**
*Création de l'objet XmlHttpRequest
*/
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 onchange du champ determination
*/
function goe(){
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 ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('methode').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
//valeur = document.getElementById('liste').value;
xhr.open("POST","ajaxListe.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 la determination
sel = document.getElementById('liste');
idliste = sel.options[sel.selectedIndex].value;
xhr.send("idliste="+idliste);
}
/**
* 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 ok
if(xhr.readyState == 4 && xhr.status == 200){
//alert(xhr.responseText);
document.getElementById('liste').innerHTML = xhr.responseText;
}
}
xhr.open("GET","message.php",true);
xhr.send(null);
}
</script>
<script language="javascript">
function affichform (nbinput) {
var form;
// on teste le nombre de inputs qu'il faut ajouter
if (nbinput != "0" && nbinput != "") {
document.getElementById("inputs").innerHTML = "";
for (i =1;i<=nbinput;i++) {
form = '<tr><td><input type="button" onclick="go()" value="charger determination" name="charger_determination[]'+ i + '"id="charger_determination'+ i + '"/></td><td nowrap="nowrap">Determination :</td><td><div id="liste" style="display:inline"><select name="liste" onChange="goe()"></select></div></td> <td nowrap="nowrap">Methode :</td><td><div id="methode" style="display:inline"><select name="methode"><option>Choisir une methode</option></select></div></td> <td nowrap="nowrap">Valeur :</td><td><input type="text" size =5 name="qte[]'+i+'" id="tst'+i +'"></td> <td nowrap="nowrap">Unite :</td><td><input type="text" size =5 name="qte[]'+i+'" id="tst'+i +'"></td></tr><br/>';
document.getElementById("inputs").innerHTML += form;
}
} else {
//JE NE FAIS RIEN
}
}
</script>
</HEAD>
<BODY>
<TABLE>
<tr>
<td id="tdnbtitre" >Nombre de ligne de formulaire à ajouter:</td><td id="tdnbform" ><input name="nbinput" type="text" id="nbinput" onKeyUp="affichform(document.getElementById('nbinput').value)" size="4" maxlength="2">
</tr>
<tr><span id=inputs ></span><tr>
</table>
</TABLE>
</BODY>
</HTML>
Voici mes autres script PHP appelés par AJAX:
message. php :
<?php
echo "<select name='liste' id='liste' onChange='goe()'>";
//echo "<option value=''>";
//requete utiliser par la function afficher_option() pour fabriquer les select
$query_determination="select code,signification from code where id_codage=111";
afficher_option($conn,$query_determination, $determination);
//echo "</option>";
echo "</select>";
?>
ajaxListe.php:
$valeur= $_POST["idliste"];$methode="met_".$valeur; echo $valeur;
if(isset($_POST["idliste"])){
echo "<select name='methode'>";
echo "<option value=''>";
//requete utiliser par la function afficher_option() pour fabriquer les select
afficher_option($conn,"select code,signification from code A,codage B where A.id_codage=B.id_codage and b.nom_variable_codee= 'met_$valeur'", $methode);
echo "</option>";
"</select>";
}else {echo "il ya un probleme";}
Merci pour votre soutien.