Afficher un tableau dynamiquement selon une liste déroulante [Résolu]

[nico_loin]

Bonjour,
Je ne sais pas si je suis dans le bon forum car j'ai besoin de PHP, de HTML et (je pense) de AJAX.

Alors, je veux afficher un tableau dynamiquement, c'est à dire selon le choix fait dans une liste déroulante.
Pour cela, j'ai ça comme liste déroulante :

Code HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<p class="p0">
       Afficher depuis :
       <form>
            <select name="afficher">
                  <option selected value ="0">Toujours</option>
                  <option value="1">1 an</option>
                  <option value="2">2 ans</option>
                  <option value="3">3 ans</option>
                  <option value="4">4 ans</option>
                  <option value="5">5 ans</option>
             </select>
         </form>
</p>

Ensuite, le tableau correspondant au choix doit s'afficher directement à coté sans avoir besoin de cliquer sur un bouton Valider ni de changer de page.
J'aimerais également que le tableau s'affiche par défaut pour "Toujours", puis qu'il change lorsque qu'il choisi l'année.

J'aimerais savoir comment faire pour que le tableau varie selon le choix fait par l'utilisateur, je pense qu'il faut passer par ajax mais si y'a un autre moyen, je prends !

Merci

[guillaume40]

Bonjour,
Tu peux utiliser jQuery pour faire ça assez simplement.

Tu ajoute après ton formulaire un

Code :

<div id="resultat"></div>

et dedans tu y met le code par défaut, c'est à dire pour la valeur Toujours.

Ensuite avec jQuery tu utilises

Code :

$("#tonChamp").onChange();

pour détecter un changement de valeur. Et dans le corps de onChange() tu met ta requette Ajax qui va récupérer et remplacer le contenu dans ton div #resultat.

[sabotage]

Ici un exemple pour des listes liées :
http://siddh.developpez.com/articles/ajax/

Ce que tu veux faire suit le meme principe sauf que ton resultat au lieu d'alimenter un autre liste, va alimenter un tableau.

Pour le problème de valeur par défaut, tu ne l'auras plus puisque tu ne recharges plus la page.

[Bovino]

Envoyé par guillaume40

Tu peux utiliser jQuery pour faire ça assez simplement.

Pourquoi toujours vouloir utiliser jQuery même quand c'est inutile ?

Envoyé par guillaume40

Ensuite avec jQuery tu utilises

Code :

$("#tonChamp").onChange();

pour détecter un changement de valeur.

onChange() est devenu une méthode jQuery ?

[guillaume40]

Oups désolé le "on" est en trop.

Tu trouve que c'est inutile ? Moi je trouve que ça réduis le code utilisé.
Et puis si par la suite il veut rajouter des effets lors du changement ça sera déjà en place.

[Bovino]

Je trouve inutile d'utiliser jQuery dès qu'on veut faire quelque chose sur son site.
Pour des listes liées, contrairement à ce que tu crois, ça augmente considérablement le nombre de lignes de code car il faut prendre en compte l'importation de jQuery pour un truc qui se fait en 100 LOC maxi en gérant tous les cas dont tu as besoin et non tous ceux dont d'autres pourraient avoir besoin mais pas toi.

Ensuite, bien entendu, si tu as de nombreux besoins différents, jQuery (ou autre) reste une option, mais pas juste pour un truc que t'as la flemme de coder.

[nico_loin]

Ok merci pour votre aide, je vais essayer ça demain, je vous tient au courant.

[nico_loin]

Alors, j'ai fait un truc du genre :

Code HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form>
    <label>Afficher depuis :</label>
    <select name='annee' id='annee' onchange='go()'>
        <option value='-1'>Toujours</option>
        <option value='12'>1 an</option>
        <option value='24'>2 ans</option>
        <option value='36'>3 ans</option>
    </select>
    <div id='resultat' style='display:inline'>
        <p class="p1">
            Nom de la société: <?php echo $nomSocieteGlobal; ?> <br/>
            Depuis toujours<br/>
            Note moyenne de la société: <b><?php echo $noteGlobal; ?></b> <em>(<?php echo $compteur; ?> notes)</em>
        </p>
    </div>
</form>

Ma fonction go() :

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
            function go(){
                var xhr = getXhr();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && xhr.status == 200){
                        leselect = xhr.responseText;
                        document.getElementById('resultat').innerHTML = leselect;
                    }
                }
 
                xhr.open("POST","tableau.php",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                sel = document.getElementById('annee');
                idsociete = sel.options[sel.selectedIndex].value;
                xhr.send("idSociete="+idSociete);
            }

Et dans mon tableau.php j'ai :

Code php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?php
$res = $_POST["idSociete"];
$query1 = 'SELECT avg(note) as noteMoyenne,nomSociete, count(nomSociete) as compteur, avg(conseil) as conseilMoyenne 
    FROM benchmarking_societes_notes 
    WHERE nomSociete= "' . mysql_escape_string($_POST['nomSociete']) . '"
    AND STR_TO_DATE(dateNotation, \'%Y-%m-%d\') 
    BETWEEN STR_TO_DATE(DATE_FORMAT(DATE_SUB(CURRENT_DATE, INTERVAL ' . $res . ' MONTH), \'%Y-%m-%d\'), \'%Y-%m-%d\') 
    AND STR_TO_DATE(DATE_FORMAT(CURRENT_DATE, \'%Y-%m-%d\'), \'%Y-%m-%d\')';
$result1 = mysql_query($query1) or die('Erreur SQL !<br />' . $query1 . '<br />' . mysql_error());
 
$row1 = mysql_fetch_array($result1);
$nomSocieteGlobal1 = $row1['nomSociete'];
$noteGlobal1 = number_format($row1['noteMoyenne'], 1);
$compteur1 = number_format($row1['compteur'], 0);
$conseilMoyenne1 = number_format($row1['conseilMoyenne'], 2);
?>
        <p class="p1">
            Nom de la société: <?php echo $nomSocieteGlobal; ?> <br/>
            Depuis toujours<br/>
            Note moyenne de la société: <b><?php echo $noteGlobal; ?></b> <em>(<?php echo $compteur; ?> notes)</em>
        </p>

Pour m'expliquer, je voudrais afficher le résultat selon l'année choisie : 12 mois pour 1 an d'où la value="12", ou pour 2 ans d'où value="24" ...
Lorsque je clique sur 1 an j'ai aucune valeur qui apparait. Et je vois aucun message d'erreur ni rien ... Je vois pas comment faire

[nico_loin]

C'est bon j'ai réussi, ça bloquait car le nom de la société n'était pas renvoyé sur la 2e page.