Faire des listes liées

4 octobre 2009 à 15:48:36

Salut à tous,

Je tiens à dire que j'ai cherché sur le fofo avant de poster, et le fait d'écrire dans le forum javascript est délibéré car cela concerne à la fois php et javascript.

Il y a un tuto sur le SdZ qui explique comment faire une liste liée en utilisant une XHR, javascript, et php/mysql. Le seul problème, c'est que j'ai rien pigé, et que c'est exactement ce que je veux faire !

Je vous expose mon besoin :

J'ai 3 tables :

Players :
==> ID
==> name
==> ally

Ally :
==> ID
==> name

Villages :
==> ID
==> player
==> x
==> y

Donc trois tables, une avec le nom des joueurs, une avec leur alliance, et une autre avec les coordonnées de tous les villages.

Ce que je voudrais faire, c'est faire une liste déroulante où on peut sélectionner l'ally, qui va, en fonction du nom choisi, remplir la deuxième liste contenant les noms de l'alliance en question.

Le problème, c'est que je n'ai rien compris au code proposé dans le tuto, et que je sais absolument pas le modifier pour qu'il colle à mon besoin.

Si une âme charitable voulait bien m'aider, j'en serait infiniment reconnaissant

Je balance quand même le code que j'ai trouvé si ça peut servir (y'a tellement de langages différents que je sais même pas l'afficher sur le fofo lol, et moi je comprends que le php :x) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carte Monde 3</title>
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
function request(oSelect) {
var value = oSelect.options[oSelect.selectedIndex].value;
var xhr = getXMLHttpRequest();

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
readData(xhr.responseXML);
document.getElementById("loader").style.display = "none";
} else if (xhr.readyState < 4) {
document.getElementById("loader").style.display = "inline";
}
};

xhr.open("POST", "carte.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("IdEditor=" + value);
}

function readData(oData) {
var nodes = oData.getElementsByTagName("item");
var oSelect = document.getElementById("softwaresSelect");
var oOption, oInner;

oSelect.innerHTML = "";
for (var i=0, c=nodes.length; i<c; i++) {
oOption = document.createElement("option");
oInner = document.createTextNode(nodes[i].getAttribute("name"));
oOption.value = nodes[i].getAttribute("id");

oOption.appendChild(oInner);
oSelect.appendChild(oOption);
}
}
</script>
</head>

<body>
<fieldset>
<legend>Programmes</legend>
<div id="programBox">
<p id="editors">
<select id="editorsSelect" onchange="request(this);">
<option value="none">Selection</option>
<?php
$query = mysql_query("SELECT * FROM ally ORDER BY name");
while ($back = mysql_fetch_assoc($query)) {
echo "<option value=\"" . $back["id"] . "\">" . urldecode($back["name"]) . "</option>";
}
?>
</select>
<span id="loader" style="display: none;"><img src="images/loader.gif" alt="loading" /></span>
</p>
<p id="softwares">
<select id="softwaresSelect"></select>
</p>
</div>
</fieldset>
</body>
</html>

xavierm02

4 octobre 2009 à 15:53:25

Utilise la balise <code> pour que ton code soit lisible.

Jerebenz

4 octobre 2009 à 15:55:32

J'ai essayer, mais ça marche pas :x

xavierm02

4 octobre 2009 à 16:02:05

Sélectionne le code dans ton post et utilise la liste déroulante -.-

Jerebenz

4 octobre 2009 à 17:21:57

Tout à l'heure ça ne fonctionnait pas, et maintenant ça marche. Par contre, y'a du html, du javascript, et du php, donc je peux pas vraiment choisir un langage.

xavierm02

4 octobre 2009 à 17:56:41

Choisis PHP.
Et il faudrait le code de carte.php.

Jerebenz

4 octobre 2009 à 18:16:42

En fait, je sens que je me noie avec tout ce code.

Je vais juste re-expliquer ce que je souhaite faire, c'est très simple.
Je suis entrain de créer une carte pour le jeu Guerre Tribale. J'ai les coordonnées de tous les joueurs et le nom de leur alliance :

J'ai une bdd mysql. Dedans, trois tables :

1 - ally :
- id
- name

2 - players
- id
- name
- ally

3 - villages
- player
- x
- y

Ce que je veux, c'est avoir une liste déroulante avec le nom de toutes les alliances (de la table "ally"). Quand on sélectionne une alliance, je veux que la deuxième liste ne montre que les joueurs de cette alliance (le champ "ally" de la table "player" correspond au champ "id" de la table "ally").

Ensuite, la personne qui utilise la page peut sélectionner certains joueurs, et appuyer sur un bouton.

Moi je veux récupérer les données du formulaire et afficher la carte avec les coordonnées des villages.

Remarque, c'est pas si simple que ça ce que je veux faire.

Ce que je sais faire, c'est créer la carte dès que j'ai les coordonnées des villages.

Ce que je ne sais pas faire, c'est un formulaire qui va mettre à jour une deuxième liste en fonction de ce que l'on sélectionne dans la première, et je ne sais pas non-plus récupérer les données si la technique utilisée est en AJAX.

Autant dire que je suis mal barré

Tillertan

4 octobre 2009 à 18:20:42

<HS> Xavierm, pas la peine de lui gueuler dessus

Il était impossible de poster avec des balises code ou minicode de toute l'après midi, c'est revenu y'a même pas une heure.