XMLHTTPRequest et listes liées

**ben23** · 31/12/2005, 14h18

Bonjour,

voila j'essaie d'utiliser pour la première fois les objets XMLHTTPRequest.
EN fait j'ai un formulaire avec deux listes liées dont le contenu provient d'une bdd.
Le but étant de remplir la 2ème liste en fonction du choix fait dans la 1ère sans avoir de rechargement de page. J'ai repris des fonctions existantes ( blog de qwix) et ai un peu de mal à réaliser ce que je veux faire.
J'ai besoin d'aide au niveau de ma fonction javascript (senddata() et dans le code php de ma page (get.php) qui va actualiser la seconde liste.

Voila ma page avec le formulaire et la fonction javascript

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
91
92
93
94
95
96
97
98
99
100
101
102
103
 
<?php
// les includes
require_once "includes/data.inc.php";
require_once "includes/db.inc.php";
require_once "includes/fns.inc.php";
 
// requete de sélection des catégories
$reqCategorie = "SELECT id_categorie, nom_categorie FROM categorie";
 
$res_reqCategorie = mysql_query($reqCategorie);
// en cas d'erreur  
if (!$res_reqCategorie) echo "Erreur n&deg; ".mysql_errno()." : ".mysql_error();
?>
 
<html>
<head>
<script language="javascript">
/**
* Permet d'envoyer des données en GET ou POST en utilisant les XmlHttpRequest
*/
function sendData(data,method)
{
   if(document.all)
   {
       //Internet Explorer
       var XhrObj = new ActiveXObject("Microsoft.XMLHTTP");
   }//fin if
   else
   {
       //Mozilla
       var XhrObj = new XMLHttpRequest();
   }//fin else
 
   //définition de l'endroit d'affichage:
   var content = document.getElementById("image");
 
   //si on envoie par la méthode GET:
   if(method == "GET")
   {
       if(data == 'null')
       {
           //Ouverture du fichier sélectionné:
           XhrObj.open("GET", "get.php");
       }//fin if
       else
       {
           //Ouverture du fichier en methode GET
           XhrObj.open("GET", "get.php?"+data);
       }//fin else
   }//fin if
   else if(method == "POST")
   {
       //Ouverture du fichier en methode POST
       XhrObj.open("POST", "get.php");
   }//fin elseif
 
   //Ok pour la page cible
   XhrObj.onreadystatechange = function()
   {
       if (XhrObj.readyState == 4 && XhrObj.status == 200)
           content.innerHTML = XhrObj.responseText;
}    
 
   if(method == "GET")
   {
       XhrObj.send(null);
   }//fin if
   else if(method == "POST")
   {
       XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
       XhrObj.send(data);
   }//fin elseif
}//fin fonction SendData
</script>
</head>
<body>
 
<form name="formGet" method="get">
  <label for="categorie">Cat&eacute;gorie de la fiche:</label>
  <select name="categorie" id="categorie" onChange="sendData('idcategorie='+document.formGet.categorie.value,'GET')">
      <option value="">S&eacute;lectionnez une cat&eacute;gorie</option>
      <option value="">- - - - - - - - - - - - - - - - - - - - - - -</option>
 
       <?
if (mysql_num_rows($res_reqCategorie) != 0) {
 
// boucle sur les categorie
  while ($tabCategorie = mysql_fetch_array($res_reqCategorie)) {          echo "<option value=\"".$tabCategorie["id_categorie"]."\">".$tabCategorie["nom_categorie"]."</option>\n";
  }      
}
?>
 </select><br />  
 <select name="image" id="image">
<option value="">S&eacute;lectionnez une image</option>
      <option value="">- - - - - - - - - - - - - - - - - - - - - - -</option>
       <option value="">pas d'image</option>
 </select>
 
<br />
</form>
</body>
</html>

et ma page get.php

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
 
<?php
 
// les includes
require_once "includes/data.inc.php";
require_once "includes/db.inc.php";
require_once "includes/fns.inc.php";
 
// requete des titres des fiches
// pour sélection des images en fonction des catégories
if (isset($_GET['idcategorie']) && $_GET['idcategorie']!="") {
$reqNomJaquette= "SELECT image.id_image, image.nom_image, image.url_image"
. " FROM image, type_image"
. " WHERE type_image.nom_type_image = \"FICHE\""
. " AND type_image.id_categorie = \"".$_GET['idcategorie']."\""
. " AND image.id_type_image = type_image.id_type_image ";
}
else $reqNomJaquette = "SELECT image.id_image, image.nom_image, image.url_image"
. " FROM image, type_image"
. " WHERE type_image.nom_type_image = \"FICHE\""
. " AND image.id_type_image = type_image.id_type_image ";
 
$res_reqNomJaquette = mysql_query($reqNomJaquette);
 
if (mysql_num_rows($res_reqNomJaquette) != 0) {
echo "<option value=\"\">S&eacute;lectionnez une jaquette</option><br>";
echo "<option value=\"\">- - - - - - - - - - - - - - - - - - - - - -</option><br>";
echo "<option value=\"\">pas d'image</option><br>";
// boucle sur les categories
while ($tabNomJaquette = mysql_fetch_array($res_reqNomJaquette)) {
echo "<option value=\"../".$tabNomJaquette["url_image"]."\">".$tabNomJaquette["nom_image"]."</option><br>";
 
}
}
else {
echo "<option value=\"\">S&eacute;lectionnez une jaquette</option><br>";
echo "<option value=\"\">- - - - - - - - - - - - - - - - - - - - - -</option><br>";
echo "<option value=\"\">pas d'image</option><br>";
 
 
}
?>
 
voila. merci d'avance pour votre aide.

[/code]

**siddh** · 31/12/2005, 15h33

et ca fais quoi ?
as tu des erreurs ?

**ben23** · 31/12/2005, 15h49

Bon, après des recherches j'ai fait des modifications:

maintenantmes listes s'affichent correctement mais la seconde ne change pas en fonction du choix de la première.

voila mes nouvelles pages:

test.php

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
<?php
 
// les includes
require_once "includes/data.inc.php";
require_once "includes/db.inc.php";
require_once "includes/fns.inc.php";
 
// requete de sélection des catégories
$reqCategorie = "SELECT id_categorie, nom_categorie FROM categorie";
 
$res_reqCategorie = mysql_query($reqCategorie);	
// en cas d'erreur			
if (!$res_reqCategorie) echo "Erreur n&deg; ".mysql_errno()." : ".mysql_error();
?>
 
<html>
<head>
<script language="javascript">
 
/**
* Permet d'envoyer des données en GET ou POST en utilisant les XmlHttpRequest
*/
function sendData(data,method)
{
    if(document.all)
    {
        //Internet Explorer
        var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
    }//fin if
    else
    {
        //Mozilla
        var XhrObj = new XMLHttpRequest();
    }//fin else
 
    //définition de l'endroit d'affichage:
    var content = document.getElementById("image");
 
    //si on envoie par la méthode GET:
    if(method == "GET")
    {
        if(data == 'null')
        {
            //Ouverture du fichier sélectionné:
            XhrObj.open("GET", "get.php");
        }//fin if
        else
        {
            //Ouverture du fichier en methode GET
            XhrObj.open("GET", "get.php?"+data);
        }//fin else
    }//fin if
    else if(method == "POST")
    {
        //Ouverture du fichier en methode POST
        XhrObj.open("POST", "get.php");
    }//fin elseif
 
    //Ok pour la page cible
    XhrObj.onreadystatechange = function()
    {
        if (XhrObj.readyState == 4 && XhrObj.status == 200)
           eval(xhr_object.responseText);// content.innerHTML = XhrObj.responseText ;
 
      }    
 
    if(method == "GET")
    {
        XhrObj.send(null);
    }//fin if
    else if(method == "POST")
    {
        XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        XhrObj.send(data);
    }//fin elseif
}//fin fonction SendData
</script>
</head>
<body>
<form name="formGet" method="get">
   <label for="categorie">Cat&eacute;gorie de la fiche:</label>
	<select name="categorie" id="categorie" onChange="sendData('idcategorie='+document.formGet.categorie.value,'GET');">
      	<option value="">S&eacute;lectionnez une cat&eacute;gorie</option>
      	<option value="">- - - - - - - - - - - - - - - - - - - - - - -</option>
 
        <?
	if (mysql_num_rows($res_reqCategorie) != 0) {
 
		// boucle sur les categorie
		while ($tabCategorie = mysql_fetch_array($res_reqCategorie))    
 
               {
			echo "<option value=\"".$tabCategorie["id_categorie"]."\">".$tabCategorie["nom_categorie"]."</option>\n";
					}				  
		}
	?>
        </select><br />   
	<select name="image" id="image">
	  	  <option value="">S&eacute;lectionnez une image</option>
      	          <option value="">- - - - - - - - - - - - - - - - - - - - - - -</option>
		  <option value="">pas d'image</option>	
	</select>
	<br />
</form>
</body>
</html>

et get.php

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
 
 <?php
 
// les includes
require_once "includes/data.inc.php";
require_once "includes/db.inc.php";
require_once "includes/fns.inc.php";
 
 
// requete des titres des fiches
// pour sélection des images en fonction des catégories
if (isset($_GET['idcategorie']) && $_GET['idcategorie']!="") {
	$reqNomJaquette= "SELECT image.id_image, image.nom_image, image.url_image" 
	        	          . " FROM image, type_image"
			   	 . " WHERE type_image.nom_type_image = \"FICHE\""
				 . " AND type_image.id_categorie = \"".$_GET['idcategorie']."\""
				 . " AND image.id_type_image = type_image.id_type_image ";
}
else $reqNomJaquette = "SELECT image.id_image, image.nom_image, image.url_image"
				 . " FROM image, type_image"
				 . " WHERE type_image.nom_type_image = \"FICHE\""
				 . " AND image.id_type_image = type_image.id_type_image ";
 
 
$a= "formGet";
$b="image";
 
$res_reqNomJaquette = mysql_query($reqNomJaquette);	
echo 'var o = null;';
echo 'var s = document.forms["'.$b.'"].elements["'.$a.'"];'; 
echo 's.options.length = 0;';
 
if (mysql_num_rows($res_reqNomJaquette) != 0) {
 
			// boucle sur les categories
 
  while($tabNomJaquette = mysql_fetch_array($res_reqNomJaquette)) {
	    echo 's.options[s.options.lenght] = new Option("'.$tabNomJaquette["url_image"].'");'; 			
 }				  
}
 
?>

J'y suis presque mais il doit y avoir une petite erreur je ne sais ou.

**siddh** · 31/12/2005, 15h51

Code :

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

"sendData('idcategorie='+this.options[this.selectedIndex].value,'GET');"

**ben23** · 31/12/2005, 16h18

Bon, ca ne marche toujours pas meme avec la modif (merci au fait).

de plus il y avait une erreur de syntaxe dans la fonction sendData: eval(XhrObj.responseText); au lieu de eval(Xhr_object.responseText);

il doit y avoir un probleme dans la fonction javascript. Je ne vois toujours pas.

**ben23** · 31/12/2005, 16h32

Bon j'ai trouvé, il y avait quelques erreurs bêtes dans get.php, sinon le code est fonctionnel.

Pour débuguer, j'ai affiché mon résultat et regardé si celui-ci correspondait bien à ce que je voulais.

dans le if:

if (XhrObj.readyState == 4 && XhrObj.status == 200)
eval(XhrObj.responseText);
j'ai ajouté:

alert(XhrObj.responseText);

merci pour ton aide.

XMLHTTPRequest et listes liées

JavaScript

Discussions similaires

Partager

Partager