Discussion :

[Mat67]

Bonjour, je réalise une application qui permet de gérer les courrier, et pour faciliter le travail de la personne qui utilisera l'appli.



j'aimerai que lorsque l'utilisateur clique dans un des champs de saisie (nom, servce, organisation ...) un script AJAX affiche dans le menu a droite la liste des personnes, service, organisation.

Puis lorsqu'il séléctionnera dans cette liste un attribut, cela l'affichera dans le champ de saisie.

Je ne sais absolument pas par ou commencer !

Merci !

[Deadern]

Je suis assez débutant en ajax mais voilà ce que je te conseille, comme moi j'aurai fait :
1) définit ton menu de droite par un champ div (avec une id "menu_content" par exemple)
2) dans tes champs de formulaires, met une option onfocus="menu_search('nom_du_champ')"
remplace 'nom_du_champ' par 'nom' pour tes champs noms, ou par 'service', etc ...
3) dans ton javascript, déclare une fonction comme suit :

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
function menu_search(nom_du_champ)
{
	var xmlhttp = getHTTPObject();
	if ( xmlhttp )
	{
		xmlhttp.open("GET","menu_content.php?type="+nom_du_champ,true);
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState == 4) /* 4 : état "complete" */
			if (xmlhttp.status == 200) /* 200 : code HTTP pour OK */
			{
				var retour = xmlhttp.responseText;
				//alert(xmlhttp.responseText);
				document.getElementById("menu_content").innerHTML = retour;
			}
		}
	}
	xmlhttp.send(null);
}

avec à côté la déclaration de la fonction suivante (toujours en 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
function getHTTPObject()
{
  var xmlhttp = false;
 
  /* Compilation conditionnelle d'IE */
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
 
  // on essaie de créer l'objet si ce n'est pas déjà  fait 
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
  {
     try
     {
        xmlhttp = new XMLHttpRequest();
     }
     catch (e)
     {
        xmlhttp = false;
     }
  }
 
  return xmlhttp;
}

4) Créer une page menu_content.php. Dans ce fichier, fait quelquechose de ce genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
if (isset($_GET['type'])) {
	if ($_GET['type'] == "nom") {
		//actions à réaliser
		echo "tu mets ici ce que tu veux voir apparaitre pour nom";
	} elseif ($_GET['type'] == "service") {
		//autres actions, affichage différent dans ton menu
		echo "ce que tu passe en echo apparaitra dans ton menu";
	}
}

Ce que tu mets en "echo" sera récupérer par ton javascript et affiché dans ta div. Pour que ce contenu intéragisse avec ta page "mère", il te suffit d'y déclarer du javascript

Après tu peux optimiser ton code, faire des requêtes SQL, etc ... Si dans "menu_content.php" tu fais des echo de formulaires et/ou javascript, tu pourra faire agir ton contenu dynamique avec ton contenu primaire.

[Mat67]

Nickel sa marche ! Exactement ce qu'il me fallait

Merci !

J'ai encore une question, suivant les différents champs selectionner je veux afficher dans ma liste des noms, service, ...

Je suis obligé a chaque fois d'interroger le serveur j'imagine ?

[jojosbiz]

Salut,

par forcément, tu pourrais aussi tout charger d'un coup dans des objets / tableaux javascript et te servir de ça pour faire évoluer ton affichage.

Après, il faut voir s'il y a peu d'infos ou énormément.

Avec peu, tu peux faire comme je le dis plus haut, s'il y en a vraiment bcp, il vaut mieux aller chercher ce qu'il faut à l'instant T par Ajax (ou autre technique qui lui ressemble).

[Mat67]

Merci pour ta réponse, je pense que je vais interroger le serveur a chaque nouvelle interraction.

Par contre il y a un défault avec la méthode de Deadern

=> si une information contient un accent, cela provoque des erreurs, j'essai actuellement de modifier le code pour ne pas utiliser la methode GET, mais la methode POST.

Je posterai une fois la solution trouvée, mais si quelqu'un l'a déja, je suis prenneur !

[Deadern]

Ah effectivement j'ai développé très peu de modules AJAX à ce jour, mais c'est vrai que j'ai cette erreur d'accents et tout ...
transformé GET en POST peut changer le problème ? ça ça m'intéresse ...

[Mat67]

J'ai trouvé une solution il suffit d'insérer ce code

Code :

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

1
2
3
<?php
header('Content-Type: text/html; charset=ISO-8859-15');
?>

dans la page appelée et hop ! le tour est joué !

[Deadern]

J'ai trouvé une solution il suffit d'insérer ce code

Code :

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

1
2
3
<?php
header('Content-Type: text/html; charset=ISO-8859-15');
?>

dans la page appelée et hop ! le tour est joué !

Erf chez moi ça marche pas ... :/ juste par info c'est quoi le charset de ta page appelant ? Moi en mettant ISO-8859-15 ou ISO-8859-1 ça bug

[Mat67]

Ma page appelante à le charset :

Code :

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

charset=iso-8859-15" />

C'est quoi ton message d'erreur ?

le header moi je l'ai placé en tout début de page, il n'y a rien avant.

[Deadern]

En fait quand je dis que ça bug, c'est que certains caractères sont foireux (� au lieu de ’ ou de • par exemple)
Je pense que ça pourrait venir de la config de mon EasyPHP (serveur Apache et php.ini), mais je m'y connais pas assez pour toucher à ça :p

[Mat67]

Ben moi j'avais le même problème mais en rajoutant

Code :

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

1
2
3
<?php
header('Content-Type: text/html; charset=ISO-8859-15');
?>

je n'ai plus eu de problème. Mais il faut faire tres attention à ou tu va placer ce code, il doit etre sur la page qui sera appelée par AJAX, et non pas sur une autre, sinon sa ne marchera pas.