[AJAX] Listes liées - Pas d'actualisation après choix

**Jonathan_2012** · 13/06/2012, 16h00

Bonjour,

Je souhaite créer une application utilisant le même contexte que vos solutions proposées.

J'utilise exactement la même méthode que vous, mais lors du choix dans la 1ere liste, la seconde ne s'actualise pas. J'ai placé un alert(index) dans ma fonction contacts ( s'effectuant sur le onChange du 1er select) pour vérifier son exécution. Celle-ci est valide et l'index récupéré est bien le bon. J'ai vérifié de nombreuses fois les id et name de tous mes éléments.

Depuis 3 jours je ne peux trouver d'où vient ce blocage pour la seconde liste malgré de nombreuses recherches dans différents tutos utilisant cette méthode mais rien n'y fait !

Je m'en remets à vous si vous avez une idée du problème je suis preneur !! Merci d'avance.

Voilà mes différents codes :

page_principale :

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
<?php session_start();
if (!isset ($_SESSION["id_sess"]))
    header("location:http://".$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF'])."/formsess2.htm");
?>
<html>
<head>
<title>Création d'un devis</title>
<LINK REL="stylesheet" HREF="../axantech.css" TYPE="text/css">
<script language="javascript" src="MesFonctions.js"></script>
<script language="javascript" src="contact.js"></script>
 
 
</head>
<body>
  <center>
    <h2>Cr&eacute;ation d'un nouveau devis</h2>
  </center>
<p align="left"><b><a href="deconnex.php">DECONNEXION</a></b></p>
 
<?php
require ("../connect.php");
 
@$id_connex=mysql_connect (SERVEUR,NOM,PASSE);
 
@mysql_select_db(BASE);
 
$requete_societe="select num_societe, nom_societe from societe order by nom_societe;";
@$result_societe=mysql_query($requete_societe);
 
 
?>
<form name="form" method="post" action="InsertDevis.php" onSubmit="return ControlFormCreaDevis();">
  <hr>
  <br>
  <table border="0" align="center">
    <tr>
      <td width="400" height="24"><p align="center"><b>Nom de la société</b></p></td>
      <td>
            <select name="select_societe" id="select_societe" onChange="contacts(this.form);">
              <option value="0">Choisir une société</option>
          <?php
            while ($tab_result_societe=mysql_fetch_array($result_societe))
            { 
            ?>
              <option value="<?php echo $tab_result_societe[0]; ?>"> <?php echo $tab_result_societe[1]; ?></option>
 
            <?php
            }
            ?>
          </select>
 
      </td>
      <td width="400" height="24">
        <a href="FormCreaSociete.php"><p align="center"><b>Ajouter une nouvelle société</b></p></a>
 
        </td>
    </tr>
    <tr>
        <td width="400" height="24"><p align="center"><b>Nom du contact</b></p></td>
        <td>
        <select name="select_contact" id="select_contact">
              <!--
            <option value="0">Choisir un contact</option>
 
          <?php
            /*while ($tab_result_contacts=mysql_fetch_array($result_contacts))
            { 
            ?>
              <option value="<?php echo $tab_result_contacts[0]; ?>"> <?php echo $tab_result_contacts[1]." ".$tab_result_contacts[2]; ?></option>
 
            <?php
            }
            */
            ?>
            -->
         </select>
         </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

contact.js :

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
function getXMLHttpRequest() {
    var xhr = null;
 
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest(); 
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
 
    return xhr;
}
 
 
 
    function contacts(f)
    {
 
    var l1    = f.elements["select_societe"];
    var l2    = f.elements["select_contact"]; 
    var index = l1.selectedIndex;
    alert(index);    
    if(index < 1) 
       l2.options.length = 0; 
    else 
    { 
       var xhr_object = getXMLHttpRequest();
 
 
       xhr_object.onreadystatechange = function() 
       { 
          if(xhr_object.readyState == 4 && xhr_object.status == 200)
             leselect=xhr_object.responseText;
             document.getElementById('select_contact').innerHTML=leselect;
       }       
       xhr_object.open("POST", "./toto2.php", true); 
       xhr_object.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
       var data = "societe="+index;
       xhr_object.send(data);
 
     }
}

et enfin le code de toto2.php , script réalisant ( normalement ) l'actualisation de la seconde liste :

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
<?php
     header('Content-type: text/html; charset=iso-8859-1');
    echo "<select name="select_contact" id="select_contact">";
    require ("../connect.php");
    
    @$id_connex=mysql_connect(SERVEUR,NOM,PASSE);
 
    @mysql_select_db(BASE);
    $r1="SELECT num_contact, nom_contact, prenom_contact from contact c, societe s WHERE s.num_societe=c.num_societe AND c.num_societe=".$_POST["societe"]." ORDER BY nom_contact;";
    $result=mysql_query($r1) or die (mysql_error());
    while($r = mysql_fetch_array($result)) 
    {
        echo "<option value='".$r["num_contact"]."'>".$r["nom_contact"]." ".$r["prenom_contact"]."</option>";
    }
    @mysql_close($id_connex);
    echo "</select>";
?>

**andry.aime** · 13/06/2012, 16h12

Bonjour et Bienvenue sur dvp

.

1- Evite les @ devant les fonctions pendant les dev pour afficher les erreurs.
2- Pour le code qui contient (ou qui utilise) le javascript, le mieux c'est de nous donner le code HTML généré (ce qui se trouve dans le navigateur) mais pas le code qui s'éxecute coté serveur (php, ...).
3-

document.getElementById('select_contact').innerHTML=leselect;

Certains navigateurs ne supportent pas le innerHTML avec un select.
4-

echo "<select name="select_contact" id="select_contact">";

Là tu tentes de mettre une balise select dans un select

. Et tu as aussi d'erreur de PHP, la chaîne de ton echo est tronquée.

Tu peux lire ce tutoriel.

A+.

**Jonathan_2012** · 14/06/2012, 11h48

Bonjour,

2- Pour le code qui contient (ou qui utilise) le javascript, le mieux c'est de nous donner le code HTML généré (ce qui se trouve dans le navigateur) mais pas le code qui s'éxecute coté serveur (php, ...).

Je ne vois pas ce que tu souhaites du coup, t'entends quoi par le code HTML généré? Le code source de la page ?

Code source :

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
<html>
<head>
<title>Création d'un devis</title>
<LINK REL="stylesheet" HREF="../axantech.css" TYPE="text/css">
<script language="javascript" src="MesFonctions.js"></script>
<script language="javascript" src="contact.js"></script>
 
 
</head>
<body>
  <center>
    <h2>Cr&eacute;ation d'un nouveau devis</h2>
 
  </center>
<p align="left"><b><a href="deconnex.php">DECONNEXION</a></b></p>
 
<form name="form" method="post" action="InsertDevis.php" onSubmit="return ControlFormCreaDevis();">
  <hr>
  <br>
  <table border="0" align="center">
    <tr>
      <td width="400" height="24"><p align="center"><b>Nom de la société</b></p></td>
 
      <td>
			<select name="select_societe" id="select_societe" onChange="contacts(this.form);">
		  	<option value="0">Choisir une société</option>
 
		  	<option value="1"> 01DB</option>
+ De nombreuses autres sociétés, cette liste marche correctement
</select>
 
 
	  </td>
	  <td width="400" height="24">
		<a href="FormCreaSociete.php"><p align="center"><b>Ajouter une nouvelle société</b></p></a>
 
		</td>
    </tr>
	<tr>
		<td width="400" height="24"><p align="center"><b>Nom du contact</b></p></td>
 
		<td>
		<select name="select_contact" id="select_contact">
		  	<!--
			<option value="0">Choisir un contact</option>
 
		  			-->
         </select>
		 </td>
	</tr>
	</table>
	</form>
	</body>
 
	</html>

Pour tes remarques 3 et 4 , je viens de regarder ton tuto proposé qui utilise ceci également, et la plupart des tutos que j'ai pu voir le faisait comme cela également.
Comment pourrais-je faire du coup ?

J'ai également modifié la chaine de mon echo"<select ..> et à présent cela fonctionne !
Du moins partiellement ^^ J'ai un seul contact qui s'affiche, et je ne peux le sélectionner, lorsque je clique dessus ma liste déroulante se referme sans conserver la valeur.

**andry.aime** · 14/06/2012, 11h57

Re,

Tu donnes un id à la balise td conteneur du select, ensuite du coté php, tu génères un select complet avec ses options (ce que ) , et à la fin c'est le td conteneur que tu recharges avec innerHTML.

Code html :

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

1
2
3
4
5
6
7
8
<td id="idDuTd">
		<select name="select_contact" id="select_contact">
		  	<!--
			<option value="0">Choisir un contact</option>
 
		  			-->
         </select>
		 </td>

Code :

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

document.getElementById('idDuTd').innerHTML=leselect;

Code php :

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

1
2
3
 echo '<select name="select_contact" id="select_contact">';
...//tu charges les options aussi 
 echo "</select>";

A+.

**Jonathan_2012** · 14/06/2012, 12h05

Super sa marche !!
Je te remercie pour ton aide qui m'a été précieuse !!
Cette technique va désormais m'être très utile !
Encore merci et à bientôt ! Bonne journée !

**andry.aime** · 14/06/2012, 12h08

Cette solution, c'est le point 3-4 de mon précédent post

.

A+.

**Jonathan_2012** · 14/06/2012, 12h15

Oui merci j'avais pu comprendre. J'avais pensé, après voir relu le tuto que tu m'as proposé, de créer une div du coup, et à ce moment là j'ai vu ta proposition qui est bien plus efficace. Je ne savais même pas qu'on pouvait mettre un id sur un td.
Vraiment toute balise en fait peut avoir un id ?

**andry.aime** · 14/06/2012, 12h22

Tu peux mettre un id sur tous les types de balise, mais seulment, un id doit être unique dans une page.

[AJAX] Listes liées - Pas d'actualisation après choix

AJAX

Discussions similaires

Partager

Partager