Discussion :

[amestoche]

Bonjour,
je suis en train de créer un formulaire, d'abord je demande le secteur d'activité et je voudrais qu'en suite s'affiche en fonction du secteur, les types d'infrastructure possible. Ce problème est étrangement ressemblant aux listes liées sur le fond mais sur la forme, je me demandais comment faire ca sous forme d'image ?
Merci d'avance pour votre aide

[Djakisback]

Salut,
effectivement le principe reste le même :
Sur la page principale tu fais ta boucle qui récupèrent tous les infos et lien des images des secteurs que t'affiches comme ca (en PHP) :

Code :

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

1
2
3
4
5
6
...
while($row = mysql_fetch_assoc($res)) {
...
echo '<img src="'.$row['chemin_image'].'" onClick="traitementAjax(\''.$row['id_du_secteur'].'\')">';
...
}

Tu récupères l'id du secteur dans ta fonction et tu l'envoies :

Code :

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

1
2
3
4
5
6
7
8
<script>
function traitementAjax(id) {
...
xhr.open("GET", "ajax.php?id=" + id, true);
 
...
}
</script>

et sur ta page ajax.php tu récupères ton id de secteur avec $_GET['id'] avec lequel tu construis ta requête et ta boucle.

Bye

[amestoche]

J'ai un petit problème maintenant, après avoir fait des tests, dans ma fonction "traitementAjax" l'exécution rencontre un bug juste avant la fin. Voilà mon code

function traitementAjax(id) {
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('livre').innerHTML = leselect;
}
}
// on envoie
xhr.open("GET", "ajax.php?id=" + id, true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('sousdomaine');
idDomaine = sel.options[sel.selectedIndex].value; // apparamment ca rentre pas ici !
xhr.send("idDomaine="+idDomaine);
}

Merci d'avance pour votre aide

[amestoche]

Ca y est, j'ai trouvé !
En fait, comme il ne s'agissait pas d'une liste déroulante, dans "traitementAjax", il ne fallait pas envoyer l'id mais null !

xhr.send(null);


... et le tour est joué !

[Djakisback]

En fait ca n'a rien à voir avec la liste, ca dépend de la méthode d'envoi que t'utilises POST ou GET.

[amestoche]

Bon j'ai vraiment des soucis avec ces listes liées je ne vois vraiment pas où peut être mon erreur alors voilà mon code :

<label>Secteur</label>
<select name='secteur' onchange='go()'>
<option value='-1'>Aucun</option>
<?
connexionBD("localhost","root","","mysql");
$res = mysql_query("SELECT * FROM secteur ORDER BY nom");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
}
?>
</select>

<label>Activités</label>
<select name='activites'>
<option value='-1'>Choisir un secteur</option>
</select>

function go(){
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('activites').innerHTML = leselect;
}
}

xhr.open("POST","ajaxActivites.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('secteur');
idSecteur = sel.options[sel.selectedIndex].value;
xhr.send("idSecteur="+idSecteur);
}

<?php
echo "<select name='activites'>";
if(isset($_POST['idSecteur'])){
mysql_connect("localhost","root","");
mysql_select_db("mysql");
$res = mysql_query("SELECT * FROM activites WHERE idSecteur=".$_POST['idSecteur']." ORDER BY nom");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
}
}
echo "</select>";
?>

D'avance merci pour votre aide car là, je sature !!