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

Version imprimable

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:

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:

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 ?

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

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
<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:

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

27/01/2009, 13h52
E.Bzz

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+

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:

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:

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

Code:

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:

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:

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:

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:

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

28/01/2009, 10h31
E.Bzz

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 :mrgreen:

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

A+
28/01/2009, 12h49
Equinoxe5

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

Code:

xhr.send("categorie="+choix+"&equipe1="+equipe1);
28/01/2009, 13h16
Bovino

Moi, j'ai du mal à voir où tu définis equipe1.
:koi:
28/01/2009, 13h56
E.Bzz

Citation:

Envoyé par Equinoxe5

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

J'avais bien compris, et ce n'est pas de la récupération dont je parlais, mais de l'intégration de cette valeur dans ton SQL ...

Citation:

Envoyé par Bovino

Moi, j'ai du mal à voir où tu définis equipe1.
:koi:

J'ai peur que ça ne marche que grâce à la permissivité d'IE :aie:

Il permet(tait) d'accéder à un objet uniquement via son id

Code:

id_element.value = 'toto';

Associé au fait qu'il confond name et id, je crains que "equipe1" fasse bien référence au <select> :?
Méga coup de bol (et hyper aléatoire) si c'est le cas vu qu'equipe1 est aussi l'id du div parent re-:aie:

A+
28/01/2009, 13h58
Equinoxe5

Ca y est j'ai trouvé.

Je vous mets la solution détaillée ce soir avec le code. Ca pourra peut-être servir à d'autres personnes

Voilà donc ce que j'ai fait.

Déjà, E.Bzz avait raison en disant 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 ...
Ca posait problème.

Pour rappel, le but est d'entrer les adversaires d'une rencontre sportive suivant la catégorie des joueurs sans que l'équipe choisie dans la première liste n'apparaisse dans la seconde puisqu'une équipe ne se rencontre pas.

Ensuite voici le code complet

La partie Ajax du module principal

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
50
51
<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('liste1').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('liste2').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;
 sel = document.getElementById('equipe1');
 choix2 = sel.options[sel.selectedIndex].value;
 xhr.send("categorie="+choix+"&equipe1="+choix2);
 }
</script>

(La partie en gras me posait problème aussi).

Le select de la liste catégorie

Code:

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

Le DIV de la première équipe

Code:

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

Le DIV de la seconde équipe

Code:

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

Le fichier php de la première équipe

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
        header('Content-Type: text/html; charset=ISO-8859-15');          // Pour avoir les lettres accentuees dans le formulaire
        echo "<select name='equipe1' id='equipe1' onchange='go2()'>";
	$categorie=utf8_decode ($_POST['categorie']);
         echo "<option value=\"\"></option>";
         require ("./config/config.inc.php");
         $query = "SELECT categorie, equipe FROM classement_des_equipes WHERE categorie='$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>";
?>

Le fichier php de la seconde équipe

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
        header('Content-Type: text/html; charset=ISO-8859-15');          // Pour avoir les lettres accentuees dans le formulaire
        echo "<select name='equipe2' id='equipe2'>";
	$equipe1=utf8_decode ($_POST['equipe1']);
         echo "<option value=\"\"></option>";
         require ("./config/config.inc.php");
         $query = "SELECT categorie, equipe FROM classement_des_equipes WHERE categorie='".$_POST['categorie']."' AND equipe <> '$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>";
?>

Et ça fonctionne. L'équipe sélectionnée dans la 1ere liste n'apparait pas dans la seconde.
J'ai rajouté aussi un utf8_decode car xhr.send n'aime pas trop les lettres accentuées.

Je vous remercie tous de votre aide et de vos conseils en tout cas

28/01/2009, 14h44
E.Bzz
:king:

Par contre, pour ne pas reproduire la même erreur
Code:

1 2 <div id='div_liste1' style='display:inline'> <select name='liste1'>
Pareil pour liste2 ;)

A+