[AJAX] Affichage Resultat Requete

Version imprimable

Bonjour,

je souhaite réaliser en Ajax un script qui permet de rechercher un nom de client en la tapant dans une textbox ...
Je veux qu'à chaque lettre tapé la liste s'actualise pour affiner la recherche.

Voici donc ce que j'ai fait :

Code Javascript (inclus a la page ou je suis sensé afficher les résultats)

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
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
<script type="text/javascript">
  function getRequeteHttp()
  {
    var requeteHttp;
    if (windows.XMLHttpRequest)
    { //Mozilla
      requeteHttp=new XMLHttpRequest();
      if (requeteHttp.overrideMimeType)
      {  //problème firefox
        requeteHttp.overrideMimeType('text/xml');
      }
    }
    else
    {
      if (window.ActiveXObject)
      {  //C'est Internet explorer < IE7
        try
        {
          requeteHttp=new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch(e)
        {
          try
          {
            requeteHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch(e)
          {
            requeteHttp=null;
          }
        }       
      }
    }
    return requeteHttp;
  }
    function envoyerRequete(url, debut)
  {
    var requeteHttp=getRequeteHttp();
    if (requeteHttp==null)
    {
      alert("Impossible d'utiliser Ajax sur ce navigateur");
    }
    else
    {
      requeteHttp.open('POST','url',true);
      requeteHttp.onreadystatechange=function(){recevoirReponse (requeteHttp);};
      requeteHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      requeteHttp.send('debutLib=' + debut);
    }
    return;
  }
  function recevoirReponse(requeteHttp)
  {
     if(requeteHttp.readyState==4)
     {
      if (requeteHttp.status==200)
      {
        traiterReponse(requeteHttp.responseText);
      }
      else
      {
        alert("La requête ne s'est pas correctement exécutée");
      }
     }
  }
  function traiterReponse(reponse)
  {
     var i,nb,selectClt;
     var clients=reponse.split('/');
     nb=clients.length;
     selectClt=document.getElementById("listeClients");
     selectClt.length=nb;
     for (i=0; i<nb; i++)
     {
      selectClt.option[i].text=clients[i];
     }
  }
  </script>

Code liste_clients.php

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
<?php
  include "includes/head.php";
  $cnx = mysql_connect("localhost", "root", "");
  mysql_select_db("videotheque",$cnx);
  mysql_query("SET NAMES UTF8");
 
 
if(!isset($_SESSION['login']))
{
	echo '<p>Vous devez vous identifier pour accéder à cette partie du site.<p>';
}
else
{
	echo '<h1>Liste de tous les Clients</h1><p><label>Recherche d\'un client : </label><input type="text" 		onkeyup="javascript:envoyerRequete(\'getClient.php\',this.value)"><br />';
 
	echo '<select id="listeClients" size="6">
</select></p>';
}
?>
 
 
<?php
include "includes/foot.php";
?>

Code getClient.php

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
<?php
  header("Cache-Control: no-cache,must-revalidate");
  header('Content-Type: text/plain; charset=ISO-8859-1');
 
  $cnx = mysql_connect("localhost", "root", "");
  mysql_select_db("videotheque",$cnx);
  mysql_query("SET NAMES UTF8");
 
$req=mysql_query("select * from clients where nom like '".$_POST['debutLib']."%'");
$res=mysql_fetch_assoc($req);
if ($res)
{
  $resultat=$res['nom'];
  $res=mysql_fetch_assoc($req);  
}
else
{
  $resultat='';
}
while($res)
{
  $resultat=$resultat.'/'.$res['nom'];
  $res=mysql_fetch_assoc($req);
}
 
mysql_close($cnx);
echo $resultat;
 
?>

ça fait plusieurs heures que je cherche pourquoi mon code ne fonctionne pas mais je ne trouve pas d'erreurs :cry:

Merci de votre aide, éclairez moi un peu s'il vous plait

07/03/2011, 17h59
andry.aime

Bonsoir,

Citation:

requeteHttp.open('POST','url',true);

Code:

requeteHttp.open('POST',url,true);

Sinon, on a besoin du code HTML généré de la page qui appelle la fonction ajax mais pas son code php.

A+.

ça ne fonctionne toujours pas avec cette rectification

voici le code HTML de la page qui appelle la fonction

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="content-language" content="fr" /> 
  <link href="style.css" title="defaut" rel="stylesheet" type="text/css" media="screen" />
  <title>Gestion d'une Vidéothéque</title>
  <script type="text/javascript">
  function getRequeteHttp()
  {
    var requeteHttp;
    if (windows.XMLHttpRequest)
    { //Mozilla
      requeteHttp=new XMLHttpRequest();
      if (requeteHttp.overrideMimeType)
      {  //problème firefox
        requeteHttp.overrideMimeType('text/xml');
      }
    }
    else
    {
      if (window.ActiveXObject)
      {  //C'est Internet explorer < IE7
        try
        {
          requeteHttp=new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch(e)
        {
          try
          {
            requeteHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch(e)
          {
            requeteHttp=null;
          }
        }       
      }
    }
    return requeteHttp;
  }
    function envoyerRequete(url, debut)
  {
    var requeteHttp=getRequeteHttp();
    if (requeteHttp==null)
    {
      alert("Impossible d'utiliser Ajax sur ce navigateur");
    }
    else
    {
      requeteHttp.open('POST',url,true);
      requeteHttp.onreadystatechange=function(){recevoirReponse (requeteHttp);};
      requeteHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      requeteHttp.send('debutLib=' + debut);
    }
    return;
  }
  function recevoirReponse(requeteHttp)
  {
     if(requeteHttp.readyState==4)
     {
      if (requeteHttp.status==200)
      {
        traiterReponse(requeteHttp.responseText);
      }
      else
      {
        alert("La requête ne s'est pas correctement exécutée");
      }
     }
  }
  function traiterReponse(reponse)
  {
     var i,nb,selectClt;
     var clients=reponse.split('/');
     nb=clients.length;
     selectClt=document.getElementById("listeClients");
     selectClt.length=nb;
     for (i=0; i<nb; i++)
     {
      selectClt.option[i].text=clients[i];
     }
  }
  </script>
  </head>
 
  <body>
 
<h1>Liste de tous les Clients</h1><p><label>Recherche d'un client : </label><input type="text" onkeyup="javascript:envoyerRequete('getClient.php',this.value)"><br />
<select id="listeClients" size="6">
</select></p>
</body>
</html>

07/03/2011, 18h39
andry.aime

Citation:

onkeyup="javascript:envoyerRequete('getClient.php',this.value)

1- onkeyup attend déjà un évènement javascript --> inutile de mettre le motif "javascript:"
2-à chaque keyup, une nouvelle requête sera lancée, annule d'abord l'ancienne requête avec abord avant de lancer un nouveau.

Et quand tu dis ça ne fonctionne pas, que se passe t-il?

A+
07/03/2011, 18h50
italiano1360

Citation:

2-à chaque keyup, une nouvelle requête sera lancée, annule d'abord l'ancienne requête avec abord avant de lancer un nouveau.

???

Je tape une lettre et rien ne s'affiche ... pourtant il y a des clients qui commence par ces lettres dans ma base de donnée.

Citation:

Envoyé par italiano1360

???

Parce qu'à chaque keyup tu appelles la fonction en mode asynchrone.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
var requeteHttp;
function getRequeteHttp()
  {
    if (windows.XMLHttpRequest)
    { //Mozilla
      requeteHttp=new XMLHttpRequest();
    }
    else
    {
      if (window.ActiveXObject)
      {  //C'est Internet explorer < IE7
        try
        {
          requeteHttp=new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch(e)
        {
          try
          {
            requeteHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch(e)
          {
            requeteHttp=null;
          }
        }       
      }
    }
  }
    function envoyerRequete(url, debut)
  {
    if (requeteHttp==null)
    {
      alert("Impossible d'utiliser Ajax sur ce navigateur");
    }
    else
    {
      try {requeteHttp.abord();} catch(e){};
	  requeteHttp.open('POST',url,true);
      requeteHttp.onreadystatechange=function(){recevoirReponse (requeteHttp);};
      requeteHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      requeteHttp.send('debutLib=' + debut);
    }
  }
  function recevoirReponse(requeteHttp)
  {
     if(requeteHttp.readyState==4)
     {
      alert(requeteHttp.responseText) ;//test
      if (requeteHttp.status==200)
      {
        traiterReponse(requeteHttp.responseText);
      }
      else
      {
        alert("La requête ne s'est pas correctement exécutée");
      }
     }
  }
  function traiterReponse(reponse)
  {
     var i,nb,selectClt;
     var clients=reponse.split('/');
     nb=clients.length;
     selectClt=document.getElementById("listeClients");
     selectClt.length=nb;
     for (i=0; i<nb; i++)
     {
      selectClt.option[i].text=clients[i];
     }
  }
  </script>

07/03/2011, 19h12
italiano1360

Je fais comment pour le abort ? je le met ou stp ?
07/03/2011, 19h17
andry.aime

Citation:

Envoyé par italiano1360

Je fais comment pour le abort ? je le met ou stp ?

Je ne sais pas, le code que j'ai proposé est peut-être pour une autre discussion.
07/03/2011, 19h20
italiano1360

Avec ton code il me marque : "Impossible d'utiliser Ajax sur ce navigateur"

J'ai oublié d'appeler la fonction getRequeteHttp().

Code:

1
2
3
4
5
6
7
8
getRequeteHttp();
 function envoyerRequete(url, debut)
  {
    if (requeteHttp==null)
    {
      alert("Impossible d'utiliser Ajax sur ce navigateur");
    }
.......

07/03/2011, 19h26
italiano1360

ça m'affiche toujours l'alerte comme quoi mon navigateur supporte pas l'Ajax :cry:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script type="text/javascript">
var requeteHttp;
function getRequeteHttp()
  {
    if (window.XMLHttpRequest)
    { //Mozilla
      requeteHttp=new XMLHttpRequest();
    }
    else
    {
      if (window.ActiveXObject)
      {  //C'est Internet explorer < IE7
        try
        {
          requeteHttp=new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch(e)
        {
          try
          {
            requeteHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch(e)
          {
            requeteHttp=null;
          }
        }       
      }
    }
  }
  getRequeteHttp();
    function envoyerRequete(url, debut)
  {
    if (requeteHttp==null)
    {
      alert("Impossible d'utiliser Ajax sur ce navigateur");
    }
    else
    {
      try {requeteHttp.abord();} catch(e){};
	  requeteHttp.open('POST',url,true);
      requeteHttp.onreadystatechange=function(){recevoirReponse (requeteHttp);};
      requeteHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      requeteHttp.send('debutLib=' + debut);
    }
  }
  function recevoirReponse(requeteHttp)
  {
     if(requeteHttp.readyState==4)
     {
      alert(requeteHttp.responseText) ;//test
      if (requeteHttp.status==200)
      {
        traiterReponse(requeteHttp.responseText);
      }
      else
      {
        alert("La requête ne s'est pas correctement exécutée");
      }
     }
  }
  function traiterReponse(reponse)
  {
     var i,nb,selectClt;
     var clients=reponse.split('/');
     nb=clients.length;
     selectClt=document.getElementById("listeClients");
     selectClt.length=nb;
     for (i=0; i<nb; i++)
     {
      selectClt.option[i].text=clients[i];
     }
  }
  </script>

window.XMLHttpRequest mais pas windows.XMLHttpRequest.
Et moi qui a fait un copier coller bêtement. Tu as eu ce script?

07/03/2011, 19h39
italiano1360

Bon, maintenant il me traite la requête merci, mais il m'affiche le résultat dans une boite d'alerte alors que je veux l'afficher dans la liste deroulante ...

Ben vire ça maintenant

Citation:

alert(requeteHttp.responseText) ;//test

C'est seulement pour le test.
selectClt.options[i]

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function traiterReponse(reponse)
  {
     var nb,selectClt;
     var clients=reponse.split('/');
     nb=clients.length;
     selectClt=document.getElementById("listeClients");
     selectClt.length=0;
     for (var i=0; i<nb; i++)
     {
		var option = new Option(clients[i],clients[i],false);
		selectClt.options[i]=option;
     }
  }

A+.

08/03/2011, 07h12
italiano1360

ça fonctionne je vous remercie :ccool: