[AJAX] Afficher le résultat d'une requête après un onChange

**baggie** · 14/05/2008, 14h22

Bonjour,

tout d'abord je tiens à vous préciser que je suis méga débutante en Ajax.
Et secundo, je pense que mon problème peut se résoudre grâce à Ajax mais je n'en ai pas la certitude.

Je vous explique.
J'ai un champ "Mail" où l'on tape une adresse et on a des solutions proposées pour ce qu'on a tapé (autocomplétion faite).

Code :

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

1
2
3
4
5
6
7
 
// Champ pour entrer le mail
$divlogma = <<<END
<div id='liste' style='width:300px;position:relative;'>
<input type='text' name='reclogm' id='reclogm' onChange="infodomaine();">
</div>
END;

Une fois que la personne a sélectionné dans la liste le mail qu'elle veut, il faudrait que sur l'évènement onChange de ce champ "Mail", j'affiche un tableau contenant les informations relatives au mail sélectionné.
Que ma fonction infodomaine(); écrite dans le code javascript, m'affiche le tableau de ma requête.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// Requête et tableau à afficher une fois qu'on a sélectionné le bon mail
$tabinfo[] = array(labels => ",Login,Destination");
$SQLinfo = "SELECT source,destination FROM emails WHERE source LIKE '% ... %'";
$Q = mysql_db_query($SQLinfo);
$i=1;
while ($R = mysql_fetch_array($Q))
{
	$tabinfo[$i] = array(descD => $i,
	                          valC1 => $R['source']
		);
       $i++; 
	}

Code :

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

1
2
3
4
5
6
7
8
 
// Ce à quoi ressemble ma fonction en JS infodomaine()
function infodomaine()
{
        // Ca c'était une tentative, afin qu'une fois dans ce code, le php détecte $declench à 1 et exécute ainsi la requête
	var declench = 1;
	document.getElementById('info').style.display="block";
}

Si je le fais en PHP-JS, ma requête sera déja effectuée alors que je n'aurai pas encore fait de sélection dans mon champ "Mail".
J'ai tenté de mettre un if (var = 1) { faire requête }, en mettant la variable à 1 dans le javascript, mais ça c'est foireux totalement.
Je sais que PHP est côté serveur et JS côté client, donc apparement j'ai lu à quelques endroits qu'Ajax était la meilleure solution, mais comme je n'y connais rien j'aurai besoin d'aide ... =)

**E.Bzz** · 14/05/2008, 16h34

Bonjour,

Envoyé par baggie

j'ai lu à quelques endroits qu'Ajax était la meilleure solution, mais comme je n'y connais rien j'aurai besoin d'aide ... =)

tu as donc fais un script d'autocompletion d'adresse mail.

Le tuto Ajax de D.Cabasson "Ajax - une autocomplétion pas à pas" semble donc particulièrement adapté

A+

**baggie** · 14/05/2008, 16h41

Mais je l'ai déja faite mon autocomplétion (et je l'avais vu ce tuto mais ce n'est pas celui ci qui m'a servi ^^).

Mon problème est d'afficher les données correspondantes au mail tapé, à droite du champ.

Apparement je devrais tester avec xmlhttprequest si j'ai bien lu, mais bon, je ne sais pas vraiment comment que ça fonctionne ...

Envoyé par Le tutoriel

Le premier script que nous allons mettre en place est celui permettant de créer un objet xmlHttpRequest (ou XHR pour les intimes). Cet objet va nous permettre d'effectuer des requêtes vers notre serveur, sans avoir à recharger entièrement la page.

Bah oui ça c'est intéréssant, mais quand il dit requête, dit-il requête SQL ? :/

**E.Bzz** · 14/05/2008, 16h47

Envoyé par baggie

Mon problème est d'afficher les données correspondantes au mail tapé, à droite du champ.

Et qu'est-ce qui te bloques ?

Le fonctionnement est le même qu'au § 1-B-7 du tuto.
Sauf que tu dois générer un tableau au lieu d'une liste ...

A+

**baggie** · 14/05/2008, 16h54

Ben je n'arrive pas à saisir où je suis censée mettre ma requête en fait dans ce tuto :/ les suggestions du tuto sont déja dans un fichier php qui est appelé.

**E.Bzz** · 14/05/2008, 17h09

Envoyé par baggie

Ben je n'arrive pas à saisir où je suis censée mettre ma requête en fait dans ce tuto :/ les suggestions du tuto sont déja dans un fichier php qui est appelé.

Tes requêtes SQL seront forcément dans ton fichier PHP appelé par Ajax.

Ajax (JS) appelle ta page PHP qui lance la requête SQL. La page PHP génère ensuite la réponse en fonction du résultat de la requête (via des "echo").
Ta page PHP doit donc générer le code HTML que tu récupéreras simplement via la propriété responseText de ton objet xhr ....

A+

**baggie** · 14/05/2008, 17h15

Hum, est-ce que cela signifie que je suis obligée d'avoir une autre page à part où il y aura ma requête pour que ce que je veux fonctionne ?

Ou alors, est-il possible que dans mon fichier .php où j'ai tout mon code Ajax/JS et tout, je définisse une fonction et que mon code Ajax appelle cette fonction au lieu d'une page php ?

En gros que j'ai ceci :

function toutlecode()
{
code ajax, appel fonctionpour la requete
}

function requete()
{
requête à exécuter
}

**E.Bzz** · 14/05/2008, 17h26

Heu ... tu structures tes fichiers comme tu veux

Mais Javascript ne peut pas lancer une requête SQL sur ton serveur.
... PHP, si !
Et Ajax lui permet de transmettre ce résultat à ta page (sans rechargement).
C'est ensuite la code Javascript de ta page qui récupère ce résultat pour l'afficher.
Par contre, Ajax ne peut qu'appeler une page PHP, et non une fontion PHP. (voir côté PHP pour la manière d'organiser tes pages côté serveur)

Comme dans tous les tutos associés à ce forum quoi ...

A+

**baggie** · 14/05/2008, 17h29

Heu ... tu structures tes fichiers comme tu veux

Comme l'entreprise veut ... ^^

Bn ben je vais tester avec une page à part alors, je verrai ça demain, merci de ton aide =)

**E.Bzz** · 14/05/2008, 17h39

Envoyé par baggie

Bn ben je vais tester avec une page à part alors

Au moins pour tes tests, c'est mieux

A+

**baggie** · 15/05/2008, 10h21

Bon alors le tuto avec l'autocomplétion pas à pas, je n'arrive pas bien à le comprendre celui-là :/ Donc j'ai tenté avec autre chose (uniquement la requête php de fin qui est dans un autre fichier) :

L'input où est tapé le mail :

Code :

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

1
2
3
<div id='liste'>
        <input type='text' name='reclogm' id='reclogm' onChange="infodomaine();">
</div>

La fonction infodomaine() :

Code :

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

1
2
3
4
function infodomaine()
	{
		document.getElementById('info').style.display="block";
	}

Le div 'info' :

Code :

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

1
2
3
4
5
6
<DIV class="divinfo" name='info' id='info' style="display:none">
	<form action="get">
	  Infos :
	  <input type="text" name="infotab" id="infotab" onkeypress="ajaxinfo();" />
         </form>
</DIV>

La fonction ajaxinfo() :

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
function ajaxinfo() 
{
  var ajaxin = document.getElementById("reclogm").value;
  http.open("GET", url + escape(ajaxin), true);
  http.onreadystatechange = handleHttpResponse;
  http.send(null);
}
var url = "$_SERVER[PHP_SELF]?Action=cpt&Etape=ajax_info&recherche="; 
	
function handleHttpResponse()
{
	if (http.readyState == 4) 
	{
            results = http.responseText.split(",");
	    document.getElementById('plop').value = results[0];
    	}
}

Sachant que dans Etape=ajax_info, j'appelle une fonction qui appelle la page php où se trouve ma requête :

Code :

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

1
2
3
4
5
function cptInfoAjax()
{
	require("mod-cpt_ajaxinfo.php");
	cptInfo();
}

Et dans cptInfo(); , j'ai ma requête :

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
function cptInfo()
{
	$tabinfo[] = array(labels => ",Login,Destination");
	$SQLinfo = "SELECT source,destination FROM emails WHERE source LIKE '%$_REQUEST['recherche']%'";
	$Q = mysql_db_query($SQLinfo);
	$i=1;
	while ($R = mysql_fetch_array($Q))
	{
		$tabinfo[$i] = array(descD => $i,
							valC1 => $R['source'],
							val2  => $R['destination']
							);
		$i++; 
	}
}

Et en fait, j'obtiens cette erreur là avec FireBug:

http is not defined
ajaxinfo()start.php3 (line 173)
onchange(change )start.php3 (line 1)
[Break on this error] http.open("GET", url + escape(ajaxin), true);

Mais euh en fait je ne vois pas comment je suis censée définir http ?!? oO

**E.Bzz** · 15/05/2008, 10h42

Ben il est déclaré où, ton objet http ???

... et déclarer ta variable url avant de l'utiliser serait plus ... judicieux

A+

**baggie** · 15/05/2008, 10h44

... et déclarer ta variable url avant de l'utiliser serait plus ... judicieux

Ah ouai c'est possible x)

Ben il est déclaré où, ton objet http ???

Comment que ça se déclare ce truc ?
var http ? :/

[EDIT] J'ai fait var http; mais faut que je sache quelles propriétés mettre parce que maintenant j'ai cette erreur là : http has no properties [/EDIT]

[EDIT 2] Bon, j'ai résolu ce petit problème de http, maintenant il faut que je parvienne à afficher les résultats de ma requête ![/EDIT]

**E.Bzz** · 15/05/2008, 11h07

Envoyé par baggie

Ah ouai c'est possible x)

C'était plus pour la logique/lisibilité, car ça ne risquait pas de générer d'erreur (url n'est utilisée qu'à l'exécution de la fonction, et non à sa déclaration) ...

A+

**baggie** · 15/05/2008, 12h23

Bon, je n'arrive toujours pas à récupérer les résultats de ma requête ... ><

Une fois sélectionné le mail, un div s'affiche à droite, et dans ce div il me faudrait les résultats de ma requête.

Pour le moment j'ai ceci :
- on tape le mail
- un div s'affiche
- dans ce div on tape une lettre au hasard
- un autre div s'affiche mais le mail tapé est récupéré à ce moment là ET la requête est bien effectuée (c'est FireBug qui l'a dit et qui affiche les résultats dans la console FireBug)

J'ai testé deux solutions, mais rien n'y fait, ça ne fonctionne pas :/

Voici ce que j'ai fait :

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
 
// Ici on tape le mail
<div id='liste'>
        <input type='text' name='reclogm' id='reclogm' value='$reclogm'  onChange="infodomaine();">
    </div>
 
// Div qui s'affichera dès que le mail sera choisi, là où il faudrait avoir les résultats de la requête
    <DIV class="divinfo" name='info' id='info' style="display:none">
		<form action="get">
		  Infos :
		  <input type="text" name="infotab" id="infotab" value="$_REQUEST[query]" onkeypress="ajaxinfo();"/>
		</form>
	</DIV>	
        // Div qui s'affiche quand on a écrit un truc dans celui ci-dessus, mais ne servira pas quand tout marchera, cad quand la requete s'affichera dans le div ci dessus
	<DIV id='tralala' name='tralala' style="display:none">
		tab requete a afficher ici
	</DIV>

et la partie Ajax qui se trouve sous le code HTML dans le même fichier :

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
 
	function infodomaine()
	{
		document.getElementById('info').style.display="block";
	}
 
function getXMLHTTP()
	{
	  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) 
	    {
	      try 
	      {
	        xhr = new ActiveXObject("Microsoft.XMLHTTP");
	      } 
	      catch (e1) 
	      {
	        xhr = null;
	      }
	    }
	  }
	  else 
	  { // XMLHttpRequest non supporté par le navigateur
	    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	  }
	  return xhr;
	}
 
	var http = getXMLHTTP();
	var url = "start_ajax.php?Action=cpt&Etape=ajax_info&recherche=";
 
	function ajaxinfo() 
	{
          // Récupération du mail tapé dans le input 'reclogm'
	  var ajaxin = document.getElementById("reclogm").value;
	  http.open("GET", url + escape(ajaxin), true);
	  http.onreadystatechange = handleHttpResponse;
	  http.send(null);
	}
 
 
	function handleHttpResponse()
	{
  		if (http.readyState == 4) 
  		{
		    document.getElementById('tralala').style.display="block";
    	        }
	}

Et franchement je ne vois pas comment faire pour récupérer les résultats de la requête ET les afficher dans le bon div ...

**E.Bzz** · 15/05/2008, 12h27

Envoyé par baggie

Et franchement je ne vois pas comment faire pour récupérer les résultats de la requête ET les afficher dans le bon div ...

A aucun moment tu ne récupères le http.responseText

Dommage car c'est lui qui contient la réponse d'Ajax

Regarde de nouveau les tutos sur ce point ...

A+

**baggie** · 15/05/2008, 12h39

J'ai tenté ceci :

Code :

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

1
2
3
4
5
6
7
8
9
function handleHttpResponse()
	{
  		if (http.readyState == 4) 
  		{
		    document.getElementById('tralala').style.display="block";
		    var response = http.responseText;
		    document.getElementById('tralala').value = response; 
    	}
	}

mais ça n'a rien changé. C'est mal écrit ? infaisable ?

**E.Bzz** · 15/05/2008, 13h47

Un div n'a pas de value =>

Code :

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

document.getElementById('tralala').innerHTML = response;

A+

**baggie** · 15/05/2008, 13h56

Merciiii E.Bzz =D ça s'affiche dans mon second div ^^

Maintenant il ne me reste plus qu'à voir comment l'afficher directement dans le premier div !

[EDIT] Ayé problème résolu ^^ [/EDIT]

[AJAX] Afficher le résultat d'une requête après un onChange

JavaScript

Discussions similaires

Partager

Partager