Discussion :

[maxeur]

Bonjour à tous,

J'ai développé une petite application où j'ai utilisé de l'ajax.

La fonction ajax que j'utilise permet de mettre à jour une combobox lors de la sélection d'une valeur dans une autre combobox. Cette fonction récupère dans un premier temps la valeur de la première combobox, vide la seconde puis lance un scrip php afin de reremplir la seconde combobox.

J'avais développé cette fonction qui fonctionnait trés bien sous firefox. La personne pour laquelle j'ai développé l'application utilise IE. D'aprés ce que je vois lorsque je regarde le code source de la page ma combobox n'est pas vidée.

Voici le code de ma fonction :

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
function actualiserCombo(valueID)
{
   // On vide la combo 2
   document.getElementById('combo_fournisseur').innerHTML=null;
   //Je pense que c'est ici que la combo n'est pas vidée
   // On lance la requete ajax
   var xhr = getXhr();
   xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
         optionsselect = xhr.responseText;
         // On se sert de innerHTML pour rajouter les options a la liste
         document.getElementById('combo_fournisseur').innerHTML = optionsselect;
      }
    }
    // Ici on va voir comment faire du post
    xhr.open("POST","Code/Php/Maj_Combo_Fournisseur.php?vue=ajax",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, on regarde ce qui est séléctionné dans la combo1
    maCombo = document.getElementById('combo_facturation');
    idvalue = maCombo.options[maCombo.selectedIndex].value;
    // On envois la requete
    xhr.send("idvalue="+idvalue);
}
// Ici cf doc AJAX
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;
}

Je ne vois pas du tout d'où cela peut venir


Si vous auriez une petite idée.

MErci d'avance pour vos réponses

[E.Bzz]

Bonjour,
d'après ton code, tu sembles modifier le contenu du <select> via son innerHTML.
IE n'aime pas bien ça.
Pour lui il faut remplacer tout le select et non seulement les options.
Aussi tu dois modifier ta partie PHP pour qu'elle regénère les <select> et </select> en plus des options.
Côté HTML et Javascript, il faut que tu identifies le conteneur du <select>, quitte à en créer un spécifique. En effet, c'est via le innerHTML de ce conteneur que tu pourras remplacer la totalité du <select> lors du retour Ajax.
Il est donc préférable que ce conteneur ne contienne que le select ...

A+

[maxeur]

Merci pour ta réponse cela m'a été bien utile pour l'effacer.

Du coup dans mon code php j'ai fait en sorte de rajouter le select complet.

Le soucis maintenant est que le select est bien effacé mais il n'apparait plus quand j'essaie de l'ajouter

Apparemment la fonction getXHR me renvoie un XMLHttpRequest();

Par contre lorsque je débugue la fonction qui l'appelle je ne rentre jamais dans la condition suivante :

Code :

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

1
2
3
4
5
6
7
 xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
         optionsselect = xhr.responseText;
         // On se sert de innerHTML pour rajouter les options a la liste
         document.getElementById('id_four').innerHTML = optionsselect;
      }
    }

où id_four est le conteneur du select

Je commence à être un peu perdu car je n'ai pas fais beaucoup d'ajax.

Je pense peut être qu'il faut que je modifie le code présenté au dessu car elle s'applique directement à une combobox.

Est ce que je me tromp et pouvez vous m'aiguiller un peu sur ce que je dois faire

Merci d'avance pour vos réponses

[E.Bzz]

Par contre lorsque je débugue la fonction qui l'appelle je ne rentre jamais dans la condition suivante

Pas d'erreur apparente
Peut être que la modif que tu as faite côté PHP génère une erreur ...

Pour vérifier, ne serait-ce que si le serveur répond, essaye de taper l'url appelée par Ajax directement dans la barre d'adresse du nav (sans oublier les paramètres) : la réponse d'Ajax s'affichera ainsi (ou pas) directement dans le nav.
Par contre, tu passes des paramètre à la fois dans l'url et dans le send()
En POST, utilise le send() pour tous le paramètres à envoyer ...

A+

[maxeur]

Apparemment je n'ai pas de problème lorsque je lance la page php appelée par l'ajax mais je ne peut pas vraiment tester car je récupère des valeurs de $_SESSION

Il m'affiche bien un select en lançant cette page.

Mais je n'arrive pas à l'ouvrir à travers mon script

[E.Bzz]

Il y a dû y avoir pas mal de changements depuis les versions précédentes : il faudrait nous remontrer ta version actuelle (HTML + JS)

A+

[maxeur]

Je vais représenter mon code afin de voi rles changements:

Page html où sont affiché les deux combobox:

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
<form method="post" action="/Transporteurs/Code/Php/Export.php" id="LoginForm">
						<table cellspacing="0" cellpadding="2" border="0" style="background-color: rgb(187, 210, 224); border: 1px solid rgb(0, 50, 80);">
							<tbody>
								<tr><td style="text-align: center;"><h3>Sélection des paramètres</h3></td></tr> 
								<tr><td>Veuillez sélectionner la société de facturation </td>
								<td><select id="combo_facturation" name="facturation_select" onChange="actualiserCombo()">
									<option value="TOUS">Tous</option>
									<option value="ESPA">ESPA</option>
									<option value="PGB">PGB</option>
									<option value="PGL">PGL</option>
									<option value="CENPISA">CENPISA</option>
								</select></td></tr>
								<script type="text/javascript" src="Code/Javascript/Calendrier.js"/></script>
								<tr><td>Veuillez entrer la date de début :</td> <td><input onclick="ds_sh(this);" id="date_deb" name="date_debut" readonly="readonly" style="cursor: text" /></td></tr>
								<tr><td>Veuillez entrer la date de fin :</td> <td><input onclick="ds_sh(this);" id="date_fin" name="date_final" readonly="readonly" style="cursor: text" /></td></tr>
								<tr><td id='label_fournisseur'>Veuillez sélectionner le fournisseur </td>
								<td id = "id_four" name="td_four" >
									<?php 
                                                                                require "/Code/Php/fournisseurs.php";
                                                                                //Affichage de la combo fournisseur
                                                                                charger_combo(); 
                                                                        ?>
								</td></tr><tr><td><br/></td></tr><tr><td width="100%" style="text-align: center;"><input type="button" value="Valider" onclick="test_champs_dates('date_deb', 'date_fin');"/></td></tr>
							</tbody>
						</table>
					</form>

Code 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
function actualiserCombo(valueID)
{
   // On vide la combo 2
   document.getElementById('id_four').innerHTML= null;
 
   // On lance la requete ajax
   var xhr = getXhr();
   xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
         optionsselect = xhr.responseText;
         // On se sert de innerHTML pour rajouter les options a la liste
         document.getElementById('id_four') = optionsselect;
      }
    }
    // Ici on va voir comment faire du post
    xhr.open("POST","./Code/Php/Maj_Combo_Fournisseur.php?vue=ajax",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, on regarde ce qui est séléctionné dans la combo1
    maCombo = document.getElementById('combo_facturation');
    idvalue = maCombo.options[maCombo.selectedIndex].value;
    // On envois la requete
    xhr.send("idvalue="+idvalue);
			 if (window.ActiveXObject) {
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}
}
// Ici cf doc AJAX
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;
}

Code php pour mettre à jour les champs:

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
<?php
session_start();
if($_GET['vue'] == 'ajax'){
        echo "<select id='combo_fournisseur' name='fournisseurs_select'>";
        echo "<option value='Tous'> Tous </option>";
        if( strcmp($_POST['idvalue'],"TOUS") == 0){
                for($i=0;$i < $_SESSION["i"];$i++){
                        echo "<option value='".$_SESSION["fournisseur".$i]."'> ".$_SESSION["fournisseur".$i]." </option>";
                }
        }
        else{
                for($i=0;$i < $_SESSION["i"];$i++){
                        if(ereg($_POST['idvalue'],$_SESSION["factu".$i])){
                                echo "<option value='".$_SESSION["fournisseur".$i]."'> ".$_SESSION["fournisseur".$i]." </option>";
                        }
                }
        }
        echo "</select>";
    exit();
}
?>

En essayant de débugger mon code je me suis apeçu qu'à aucun moment la condition siuvante était vrai:

Code :

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

1
2
3
4
5
  if(xhr.readyState == 4 && xhr.status == 200){
         optionsselect = xhr.responseText;
         // On se sert de innerHTML pour rajouter les options a la liste
         document.getElementById('id_four') = optionsselect;
      }

Le code arrive sur le if mais n'exécute jamais ce qui est à l'intérieur.
La valeur readyState reste soit à 0 soit à 1 est ce que quelqu'un pourrait m'expliquer pourquoi ?? Alors qu'en déboguant ma page je vois que la combobox passe en état complete

[E.Bzz]

Heu ... c'est quoi ça

Code :

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

1
2
3
4
    xhr.send("idvalue="+idvalue);
			 if (window.ActiveXObject) {
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}

En faisant ça, le onreadystatechange que tu testes est celui de ce nouvel objet xhr.
Or celui-ci n'ayant (encore) jamais été envoyé, peu de chance que les codes retour prennent les valeurs attendues ...

A+

[maxeur]

Muchas Gracias E.Bzz. C'est vrai que je me demandais ce que ce code foutait là je l'ai mis en commentaire et ça fonctionne

Encore merci sans toi je n'y serais surement pas arrivé

[E.Bzz]

je me demandais ce que ce code foutait là

Un reste d'un ancien copié/collé, non ?

En tous cas, tant mieux si ça fonctionne

A+