[AJAX] Liste reliée à un Input
Bonjour à tous,
En m'inspirant du tutoriel Ajax de Developpez j'ai essayez de remplir une liste déroulante dynamiquement en fonction de la valeur saisie dans une zone de texte (en utilisant l'évènement onblur) . Au momment ou sa devrait s'executer j'ai un "error on page" en bas de mon navigateur et rien ne se charge (a noter que 'je' suis sous IE6)
Formulaire :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<form method="POST" >
<label for="tester">tester</label><input type="text" id="tester" name="tester"><br/>
<table>
<tr>
<td>
<label for="line">Line</label>
</td>
<td>
<input type="text" id="line" name="line" onblur='go()'>
</td>
<td>
<label for="Product">Produit</label>
</td>
<td>
<select name="Product" id="Product">
<option value="-1"> Selectionnez un produit</option>
</select>
</td>
</tr>
<table>
</form> |
Code JavaScript :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <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 ok
///alert('toto');
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('Product').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxProduct.php5",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
sel = document.getElementById('line');
idline = sel.options[sel.selectedIndex].value;
xhr.send("idline="+idline);
} |
en gros c'est le même que celui du tutoriel en changant les noms de variables. En placant des alarme, j'ai l'impression que sa ne rentre pas dans la condition:
Code:
if(xhr.readyState == 4 && xhr.status == 200)
mon code PHP devrait fonctioné puisque je l'ai testé seul mais bon au cas ou le voila quand même:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| echo '<select id="Product">';
//echo "<select name='Product'>";
if(isset($_POST["idline"])){
$line=$_POST["idline"];
}
else
{
$line='001005';
}
$user2='user';
$pass2='pass';
$dsn2='mysql:host=host;dbname=name';
try{
$connect2 = new PDO($dsn2,$user2,$pass2);
$sql="SELECT DISTINCT mon_champs from ma_table where mon_champs='".$line."'";
foreach ($connect2->query($sql) as $row) {
print '<option value="'.$row['mon_champs'].'">'.$row['mon_champs']. "</option>";
}
}
catch(PDOException $e){
echo "erreur:".$e->getMessage();
die();
}
echo "</select>"; |
Si quelqu'un voit pourquoi sa ne marche pas merci d'avance pour votre aide.
