[AJAX] Modifier 2 listes simultanément par rapport à une première

**Equinoxe5** · 27/01/2009, 11h27

Bonjour,
J'explique déjà le but de ma requête. Ce sera plus simple.
Je veux entrer les coordonnées d'un match (Equipe A contre equipe B) suivant la catégorie (juniors, seniors etc etc...)
Donc je commence à entrer la catégorie et ensuite, les listes déroulantes sont censées donner la liste des équipes correspondant à cette catégorie.
Ca fonctionne bien pour l'équipe A mais la liste de l'équipe B est vide.
Ce que je souhaite c'est que les 2 listes soient identiques.
Voici le bout de code (récupéré sur le net)

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
<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 {
  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('equipe').innerHTML = leselect;
  }
 }
 xhr.open("POST","../equipe.php",true);
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 sel = document.getElementById('abrev');
 choix = sel.options[sel.selectedIndex].value;
 xhr.send("abrev="+choix);
 }
</script>

Ensuite, voici la liste déroulante 1 qui fonctionne

Code :

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

1
2
3
4
5
    <div id='equipe' style='display:inline'>
     <select name="equipe1">
     <option selected></option>
     </select>
    </div>

Mais je ne sais pas quoi mettre dans la liste déroulante 2. Si je mets le même code que dans la 1, ça ne fonctionne pas. la liste 2 reste vide

Vous pouvez m'aider ou me donner un exemple svp ?

**Equinoxe5** · 27/01/2009, 13h08

Bon j'ai trouvé: J'ai rajouté la ligne en gras

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
<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 {
  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('equipe1').innerHTML = leselect;
  document.getElementById('equipe2').innerHTML = leselect;
  }
 }
 xhr.open("POST","../equipe.php",true);
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 sel = document.getElementById('abrev');
 choix = sel.options[sel.selectedIndex].value;
 xhr.send("abrev="+choix);
 }
</script>

et les 2 div:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    <div id='equipe1' style='display:inline'>
     <select name="equipe1">
     <option selected></option>
     </select>
    </div>
 
et
 
    <div id='equipe2' style='display:inline'>
     <select name="equipe2">
     <option selected></option>
     </select>
    </div>

De ce fait, ça m'ouvre bien 2 listes identiques à partie de la première

**E.Bzz** · 27/01/2009, 13h52

Bonjour,
bravo pour l'auto-résolution

Par contre, tu ne devrais pas donné aux div un id qui correspond aux name des select : en effet IE a du mal à distinguer id et name et ça pourrait poser problème ...

A+

**Equinoxe5** · 28/01/2009, 10h25

Merci de ton conseil,

Mais finalement ma solution ne me convient pas et je suis donc parti sur autre chose. Le principe de départ est toujours le même, -> une categorie de joueurs -> 2 listes déroulantes avec les équipes de la catégorie présélectionnée.
Voilà le code pour la partie ajax.

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
<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 {
  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('equipe1').innerHTML = leselect;
   }
}
 xhr.open("POST","../equipe1.php",true);
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 sel = document.getElementById('categorie');
 choix = sel.options[sel.selectedIndex].value;
 xhr.send("categorie="+choix);
 }
 
function go2(){
var xhr = getXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
 leselect = xhr.responseText;
   document.getElementById('equipe2').innerHTML = leselect;
   }
}
 xhr.open("POST","../equipe2.php",true);
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 sel = document.getElementById('categorie');
 choix = sel.options[sel.selectedIndex].value;
 xhr.send("categorie="+choix+"&equipe1="+equipe1); <--- envoi equipe1

 }
</script>

Voilà le code qui génère la 1ere liste et le div correspondant:

Code :

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

<select name='categorie' id='categorie' onchange='go()'>

et

Code :

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

1
2
3
4
5
    <div id='equipe1' style='display:inline'>
     <select name='equipe1'>
     <option selected>Equipe locaux</option>
     </select>
    </div>

le fichier php qui génère la première liste des équipes:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
        header('Content-Type: text/html; charset=ISO-8859-1');          // Pour avoir les lettres accentuees dans le formulaire
        echo "<select name='equipe1' id='equipe1' onchange='go2()'>";
         echo "<option value=\"\"></option>";
         require ("./config/config.inc.php");
         $query = "SELECT categorie, equipe FROM classement_des_equipes WHERE categorie='".$_POST['categorie']."' ORDER BY equipe ASC";
         $result = mysql_query($query) or die('Erreur SQL !'.$sql.''.mysql_error());;
         while($row = mysql_fetch_array($result))
         {
         echo"<option value=\"".$row['equipe']."\">".$row['equipe']."</option>";
         $equipe1=$row['equipe'];
         }
 echo "</select>";
?>

Ensuite le second div

Code :

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

1
2
3
4
5
   <div id='equipe2' style='display:inline'>
     <select name='equipe2'>
     <option selected>Equipe visiteurs</option>
     </select>
    </div>

et le fichier php qui génère la 2eme liste d'équipes

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
        header('Content-Type: text/html; charset=ISO-8859-1');          // Pour avoir les lettres accentuees dans le formulaire
        echo "<select name='equipe2' id='equipe2'>";
         echo "<option value=\"\"></option>";
         require ("./config/config.inc.php");
         $query = "SELECT categorie, equipe FROM classement_des_equipes WHERE categorie='".$_POST['categorie']."' AND equipe <> '".$_POST['equipe1']."' ORDER BY equipe ASC";
         $result = mysql_query($query) or die('Erreur SQL !'.$sql.''.mysql_error());;
         while($row = mysql_fetch_array($result))
         {
         echo"<option value=\"".$row['equipe']."\">".$row['equipe']."</option>";
         $equipe2=$row['equipe'];
         }
 echo "</select>";
?>

Voici mon problème:
Dans cette 2ème liste, je souhaiterais avoir les mêmes équipes que dans la première SAUF celle sélectionnée dans la 1ère puisque une équipe ne se rencontre pas :-)
J'ai donc essayé d'envoyer le paramètre equipe 1 (que j'ai mis en gras dans mon code ajax) mais sans succès. Voilà ce que donne la requête de ma liste 2

Code :

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

SELECT categorie, equipe FROM classement_des_equipes WHERE categorie='cadf' AND equipe <> '[object]' ORDER BY equipe ASC

C'est le [object] qui coince.
Voilà, j'espère que mes explications sont claires et que quelqu'un saura m'aider un peu.
Merci d'avance

**E.Bzz** · 28/01/2009, 10h31

L'objet qui coince, c'est la récupération du paramètre "post" et sa prise en compte dans la requête SQL.

Pur PHP, quoi

Je pense que tu trouveras ça dans la plupart des discussion du forum Ajax

A+

**Equinoxe5** · 28/01/2009, 12h49

Je recupère bien le post puisque la catégorie est bien incrémentée. C'est equipe1 qui pose problème.

Code :

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

xhr.send("categorie="+choix+"&equipe1="+equipe1);

[AJAX] Modifier 2 listes simultanément par rapport à une première

JavaScript

Vue hybride

Discussions similaires

Partager

Partager