[AJAX] Remplir des cases de tableau suivant valeur choisie dans liste déroulante

**Medenor** · 11/04/2010, 12h54

Bonsoir

J'ai créé avec l'aide de membres de ce forum le tableau de fin de cette page:
http://warhammer-jdr.com/genprez/presentation.php

J'aurai souhaité y ajouter une option:
En lieu et place du 4e champs "Race", il y aurait un menu déroulant où l'utilisateur devrait choisir une option (sa race). Suivant celle-ci, des valeurs spécifiques seraient introduites dans les cases de la première ligne du tableau, 'Profil de base'. Bien sûr, chaque option de la liste induirait des valeurs différentes.

Les valeurs du menu déroulant seraient stockées dans la BDD

Merci d'avance et bon dimanche

**supersnail** · 11/04/2010, 13h13

Bonjour,

Et qu'est-ce qui te pose problème au juste? Tu as quelques bases en "ajax" ?

**Medenor** · 11/04/2010, 14h16

Bonjour

Et bien je ne sais pas comment mettre ça en place ^^ Je maitrise XHTML et CSS, un peu PHP, pas du tout Javascript ni Ajax :s

**supersnail** · 11/04/2010, 17h51

Bah apprends ^^.

Sinon,le principe: tu as une page PHP (ou autre) qui va te générer les bonnes valeurs en fonction de ce que tu lui envoies, et cette page est appelée par javascript lors d'un changement de sélection (pour faire simple).

Sinon,renseigne-toi sur l'objet XMLHttpRequest en javascript après avoir lu un bon tuto expliquant les bases

**Medenor** · 11/04/2010, 18h45

Bonsoir

Je n'aurai malheureusement pas le temps de m'atteler à apprendre ça car je suis déjà plongé dans mes études personnelles actuellement, et j'essaie d'apprendre le PHP correctement quand j'ai le temps :s Et mon site ne pourra pas attendre que je me penche sur Javascript et Ajax

Je comprend la partie SQL:
http://siddh.developpez.com/articles/ajax/#LIV-A

Mais je ne vois pas comment appliquer à ce que je recherche moi, ni la partie Ajax, c'est ça le problème

Y aurait-il donc moyen que l'on m'explique ce que je dois mettre comme code ?

Merci d'avance

**Medenor** · 14/04/2010, 11h04

Bonjour

J'ai essayé diverses manière mais aucune ne marche

Pourriez-vous m'aider à concevoir ce système ?

Merci d'avance

**supersnail** · 14/04/2010, 14h50

Bonjour,

Peux-tu nous montrer ce qui marche pas?

**Medenor** · 14/04/2010, 23h46

Bonsoir

J'arrive à faire la partie SQL de la page (en même temps..) qu'on m'avait envoyé, mais ca s'arrête là. Après je ne sais pas quoi faire

J'ai essayé en Javascript, n'en parlons pas..

En gros, je suis largué. Heureusement c'est un truc optionnel, mais bon

En gros c'est la partie du code à faire dans la page que je bloque

**LyonM** · 18/04/2010, 16h08

javascript:

la fonction go(list1,IdDiv) en parametre tu met l'id de la liste déroulante, et l'id de la div
en gros dans ta page tu a ta liste déroulante et une div qui ne contient rien du tout, et en fonction tu choix dans la liste déroulante ca va mettre le contenu du fichier "./tableau.php" dans la div, sachant que la fonction envoi en POST la valeur de l'élément choisis dans la liste déroulante et pour le récupérer dans tableau.php tu fait $_POST['idList']

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 getXhr(){
	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) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
		}else { // XMLHttpRequest non supporté par le navigateur 
		   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		   xhr = false; 
		} 
	}
	return xhr;
}
 
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(list1,IdDiv){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById(IdDiv).innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","./tableau.php",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, l'id du choix selectionné dans la liste déroulante, à envoyer en post
	sel = document.getElementById(list1);
	idlist = sel.options[sel.selectedIndex].value;
	xhr.send("idList="+idlist);
}

exemple pour ta page contentant la liste déroulante :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<span>Choix du fruit : </span>
	<select name="fruit" id="table" onchange="go('fruit','div_fruit')">
		<OPTION value="" selected>--- Choisissez le fruit ---</OPTION>
		<option value='banane'>banane</option>
		<option value='pomme'>Pomme</option>
		<option value='poire'>Poire</option>
		<option value='raisin'>Raisin</option>
		<option value='kiwi'>Kiwi</option>
	</select>
	<div id='div_fruit'>
		<center>
			Aucune données
		</center>
	</div>

**Medenor** · 21/04/2010, 13h33

Bonjour

Merci de ton aide

Comment adapter cela au tableau du profil:
http://warforum-jdr.com/genprez/presentation.php

?

En gros, le choix du menu déroulant enverrait les valeurs correspondant aux différentes caractéristiques du tableau

Merci d'avance