[AJAX] Listes déroulantes liées

**neperien** · 11/06/2013, 16h31

Bonjour à tous et toutes, J'ai suivi le tuto des listes déroulantes liées dispo à cette adresse :
http://siddh.developpez.com/articles/ajax/#LIV-A

Et je l'ai un peu modifié:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
	<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
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('livre').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
				xhr.open("POST","script.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('auteur');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","*****","*****");
						mysql_select_db("vefceit");
						$res = mysql_query("SELECT * FROM atelier");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["num_atelier"]."'>".$row["titre"]."</option>";
						}
					?>
				</select>
				<label>Livres</label>
				<div id='livre' style='display:inline'>
				<?php
                                echo "<pre>";
                                print_r($_POST);
                                echo "</pre>";
        echo "<select name='livre'>";
        if(isset($_POST["idAuteur"])){
        
                mysql_connect("localhost","****","*****");
                mysql_select_db("vefceit");
                $res = mysql_query("SELECT * FROM phase 
                        WHERE num_atelier=".$_POST["idAuteur"]);
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["num_phase"]."'>".$row["titre"]."</option>";
                }
        }
        echo "</select>";
?>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Pour ceux qui n'ont pas vu la différence, j'essaye de faire en sorte que le post soit vers le même fichier script.php. Est ce que ça peut marcher ? ?

Merci d'avance

**andry.aime** · 11/06/2013, 16h43

Bonjour,

La page appelée par la requête Ajax ne doit retourner que ce que tu veux mettre à jour dans la page appelante, mais pas une page en entier.

A+.

**neperien** · 11/06/2013, 16h57

Okay merci

**neperien** · 11/06/2013, 17h58

Plutôt que de faire un double post, je vais reposter ici

Ce script ne marche absolument pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<select name='titre' id='titre' onchange="go()">	
     <option value='-1'>Aucun</option>
     <option id='opt3' value='3'>Hello</option>
     <option id='opt8' value='8'>Test</option>
</select>
 
 
 
 
<script type='text/javascript'>function getXhr(){
var xhr = null;
     if(window.XMLHttpRequest)
             xhr = new XMLHttpRequest();
else if(window.ActiveXObject){
    try {
              xhr = new ActiveXObject("Msxml2.XMLHTTP");} 
     catch (e) {
              xhr = new ActiveXObject("Microsoft.XMLHTTP");}}
else {
     alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
     xhr = false;}
return xhr;}
 
 
function go(){
var xhr = getXhr();
xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
        leselect =xhr.responseText;document.getElementById('numero_phase').innerHTML = leselect;}}	
 
        xhr.open("POST","ajaxLivre.php",true);xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        sel = document.getElementById('titre');
        idauteur = sel.options[sel.selectedIndex].value;
      xhr.send("idAtelier="+idauteur);
}
 
</script>

voilà

**Bovino** · 11/06/2013, 18h02

Heu... ça t'ennuierais de présenter ton code de façon à ce qu'il correctement soit lisible ?
Tu sais des trucs du style sauts de ligne, séparation de HTML et de JavaScript, indentation...

**andry.aime** · 11/06/2013, 18h07

Tu peux indenter ton code, poster la page php appelé et le code de la page appelante?

**neperien** · 11/06/2013, 18h08

Je vais essayer

Le truc c'est que c'est du code généré par php, c'est pas forcément clair du coup

**neperien** · 11/06/2013, 18h11

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
	echo "<select id =\"phase\" name='phase'>";
	if(isset($_POST["idAtelier"])){
 
		mysql_connect("localhost","****","*****");
		mysql_select_db("vefceit");
		$res = mysql_query("SELECT * FROM phase 
			WHERE num_atelier=".$_POST["idAtelier"]);
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["num_phase"]."'>".$row["titre"]."</option>";
		}
	}
	echo "</select>";
?>

voici le code php de la page appellé

Un alert dans la fonction go ne fonctionne pas.

**andry.aime** · 11/06/2013, 18h23

Il n'y a pas d'alert dans la fonction go

.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
if(xhr.readyState == 4){
  if( xhr.status == 200 || xhr.status == 0){
        leselect =xhr.responseText;
       document.getElementById('numero_phase').innerHTML = leselect;
   }
   else{
       alert("erreur" + xhr.statusText);
   }
 
}

Et le code html généré de la page appelante?

A+.

**neperien** · 12/06/2013, 09h16

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type='text/javascript'>function getXhr(){
var xhr = null;
     if(window.XMLHttpRequest)
             xhr = new XMLHttpRequest();
else if(window.ActiveXObject){
    try {
              xhr = new ActiveXObject("Msxml2.XMLHTTP");} 
     catch (e) {
              xhr = new ActiveXObject("Microsoft.XMLHTTP");}}
else {
     alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
     xhr = false;}
return xhr;}
 
 
function go(){
var xhr = getXhr();
xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
        leselect =xhr.responseText;document.getElementById('numero_phase').innerHTML = leselect;}}	
 
        xhr.open("POST","ajaxLivre.php",true);xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        sel = document.getElementById('titre');
        idauteur = sel.options[sel.selectedIndex].value;
      xhr.send("idAtelier="+idauteur);
}
 
</script>
 
<select name='titre' id='titre' onchange=\"go()\">";
<option value='-1'>Aucun</option>";
 
<?php mysql_connect("localhost","*****","*****");
mysql_select_db("vefceit");
if($_SESSION['com_type_utilisateur_log']!=1)
          $res = mysql_query("select * from atelier WHERE actif ='1' AND num_ent='".$_SESSION['com_num_ent']."'");
else
              $res = mysql_query("select * from atelier;");
while($row = mysql_fetch_assoc($res)){
       echo "<option id='".$row["num_atelier"]."' value='".$row["num_atelier"]."'>".$row["titre"]."</option>";
						}
 
?></select>
 
[EDIT]<div id='numero_phase'><select name='numero_phase'></select></div>[/EDIT]

**Bovino** · 12/06/2013, 09h18

Tu appelles ça du code HTML ?

**neperien** · 12/06/2013, 09h21

Autant pour moi , je vais mettre le code html. J'ai rajouté alert("hello"); juste apres <script type='text/javascript'> il n'est pas pris en compte...

**neperien** · 12/06/2013, 16h03

Sa marche ça yest , mais j'en ai aucune idée pourquoi O____o

Bref, avec la deuxième liste je refais du post, pour afficher un tableau en fonction de la deuxième liste. J'aimerais l'afficher dans le même tableau que mes deux listes déroulantes, est ce que c'est possible ? en gros :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<--! Mes deux listes déroulantes-->
<table>
       <tr>
              <td><select><option><option></select>
              <td><select><option><option></select>
 
       </tr>
<div id='resultat_sql'></div>

C'est le div id='resultat_sql' qui est modifié par l'ajax, et qui rajoute un </table> seulement le truc c'est que mon resultat sql est affiché en dehors de ma table... J'ai presque envie de dire que c'est normale, parce que ça vient de deux pages php différentes... Quelqu'un a une idée révolutionnaire qui pourrait m'aider svp ?

**neperien** · 13/06/2013, 10h43

J'ai lu que je pouvais partir sur un appendchild. Est ce que je suis sur la bonne voie ?

**andry.aime** · 13/06/2013, 10h48

Bonjour,

Avec appendChild, tu dois créer élément par élément (document.createElement) ce qui est mieux mais ça prend du temps pour coder. Tu peux aussi utiliser innerHTML beaucoup plus vite à coder mais il y a une faible risque que les éléments créés ne soient pas reconnus par javascript. Bref, tu peux utiliser le principe des listes liées comme tu as fait auparavant.

A+.

**neperien** · 13/06/2013, 12h38

Merci

[AJAX] Listes déroulantes liées

AJAX

Discussions similaires

Partager

Partager