[AJAX] Menu déroulant sans redirection

**clementdevelop** · 23/05/2013, 09h21

Bonjour à tous !
Alors voila j'ai plusieurs pages php. et dans ma page principale j'ai des liens vers ces pages php mais aussi un tableau dynamique.
Sauf que j'aimerais rendre ce tableau dynamique en fonction des années (pour l'instant les variables changent juste pour 2013).

Donc il me faudrait un menu déroulant où on choisit la date (2011, 2012, 2013, 2014,etc...) mais je ne veux pas que quand il y a une sélection ca me redirige sur une autre page. j'aimerais que les valeurs du tableau change c'est tout. (D'ailleurs j'ai oublié de précisé que les valeurs du tableau changent en fonction des données de ma BDD, et moi je veux que ce soit en fonction des données, mais que ces données soient aussi en fonction de l'année. Pour ne pas que mon tableau soit dynamique uniquement pour 2013...).

Voici mon code: enfin plus précisément la partie de mon code qui nous intéresse:

Code php :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<?php include "connexion_database.php";?>
<?php
 
//=============================================================================
// requête SQL qui compte le nombre d enregistrement voulu dans la table et qui
//récupère tous les enregistrements
//=============================================================================
$selectcalvados = 'SELECT mise_en_service_date FROM suivi_omt_calvados WHERE mise_en_service_date >= "2013-01-01" AND mise_en_service_date <= "2013-12-31" ';
$resultcalvados = mysql_query($selectcalvados,$link) or die ('Erreur : '.mysql_error() );
$totalcalvados = mysql_num_rows($resultcalvados);
 
$selectmanche = 'SELECT mise_en_service_date FROM suivi_omt_manche WHERE mise_en_service_date >= "2013-01-01" AND mise_en_service_date <= "2013-12-31" ';
$resultmanche = mysql_query($selectmanche,$link) or die ('Erreur : '.mysql_error() );
$totalmanche = mysql_num_rows($resultmanche);
 
$selectorne = 'SELECT mise_en_service_date FROM suivi_omt_orne WHERE mise_en_service_date >= "2013-01-01" AND mise_en_service_date <= "2013-12-31" ';
$resultorne = mysql_query($selectorne,$link) or die ('Erreur : '.mysql_error() );
$totalorne = mysql_num_rows($resultorne);
 
 
$selectmexpcalvados = 'SELECT mex_prevue_date FROM suivi_omt_calvados WHERE mex_prevue_date >= "2013-01-01" AND mex_prevue_date <= "2013-12-31" AND (mex_reelle_date >= "2013-01-01" OR mex_reelle_date IS NULL) ';
$resultmexpcalvados = mysql_query($selectmexpcalvados,$link) or die ('Erreur : '.mysql_error() );
$totalmexpcalvados = mysql_num_rows($resultmexpcalvados);
 
$selectmexpmanche = 'SELECT mex_prevue_date FROM suivi_omt_manche WHERE mex_prevue_date >= "2013-01-01" AND mex_prevue_date <= "2013-12-31" AND (mex_reelle_date >= "2013-01-01" OR mex_reelle_date IS NULL) ';
$resultmexpmanche = mysql_query($selectmexpmanche,$link) or die ('Erreur : '.mysql_error() );
$totalmexpmanche = mysql_num_rows($resultmexpmanche);
 
$selectmexporne = 'SELECT mex_prevue_date FROM suivi_omt_orne WHERE mex_prevue_date >= "2013-01-01" AND mex_prevue_date <= "2013-12-31" AND (mex_reelle_date >= "2013-01-01" OR mex_reelle_date IS NULL) ';
$resultmexporne = mysql_query($selectmexporne,$link) or die ('Erreur : '.mysql_error() );
$totalmexporne = mysql_num_rows($resultmexporne);
 
 
$selectmexrcalvados = 'SELECT mex_reelle_date FROM suivi_omt_calvados WHERE mex_reelle_date >= "2013-01-01" AND mex_reelle_date <= "2013-12-31" ';
$resultmexrcalvados = mysql_query($selectmexrcalvados,$link) or die ('Erreur : '.mysql_error() );
$totalmexrcalvados = mysql_num_rows($resultmexrcalvados);
 
$selectmexrmanche = 'SELECT mex_reelle_date FROM suivi_omt_manche WHERE mex_reelle_date >= "2013-01-01" AND mex_reelle_date <= "2013-12-31" ';
$resultmexrmanche = mysql_query($selectmexrmanche,$link) or die ('Erreur : '.mysql_error() );
$totalmexrmanche = mysql_num_rows($resultmexrmanche);
 
$selectmexrorne = 'SELECT mex_reelle_date FROM suivi_omt_orne WHERE mex_reelle_date >= "2013-01-01" AND mex_reelle_date <= "2013-12-31" ';
$resultmexrorne = mysql_query($selectmexrorne,$link) or die ('Erreur : '.mysql_error() );
$totalmexrorne = mysql_num_rows($resultmexrorne);
 
//=============================================================================
// requête SQL qui compte le nombre d enregistrement voulu dans la table et qui
//récupère tous les enregistrements
//=============================================================================
 
echo '<center>'."\n";
echo '<table>'."\n";
echo '<tr>'."\n";
echo '<td>'."\n";
 
echo '<table border="1" rules=rows bordercolor="silver">'."\n";
echo '<tr>';
echo '<th align=center colspan="5" bgcolor="#FFD700">Avancement programme OMT BN</th>';
echo '</tr>'."\n";
 
echo '<tr>';
echo '<th bgcolor="#DCDCDC" width="150">Année</th>';
echo '<th bgcolor="#DCDCDC" width="150">Calvados 024</th>';
echo '<th bgcolor="#DCDCDC" width="150">Manche 025</th>';
echo '<th bgcolor="#DCDCDC" width="150">Orne 026</th>';
echo '<th bgcolor="#DCDCDC" width="150">Basse Normandie</th>';
echo '</tr>'."\n";
 
echo '<tr>';
echo '<th bgcolor="#DCDCDC">Objectif minimum</th>';
$objmini024=40;
$objmini025=34;
$objmini026=26;
$objminibn = $objmini024 + $objmini025+ $objmini026;
echo '<td align=center>'.$objmini024.'</td>';
echo '<td align=center>'.$objmini025.'</td>';
echo '<td align=center>'.$objmini026.'</td>';
echo '<td align=center>'.$objminibn.'</td>';
echo '</tr>'."\n";
 
$omtprgcalvados = $totalmexpcalvados - $totalmexrcalvados;
$omtprgmanche = $totalmexpmanche - $totalmexrmanche;
$omtprgorne = $totalmexporne - $totalmexrorne;
$omtprgbn = $omtprgcalvados + $omtprgmanche + $omtprgorne;
echo '<tr>';
echo '<th bgcolor="#DCDCDC">OMT programmés</th>';
echo '<td align=center><font color="dodgerblue">'.$omtprgcalvados.'</font></td>';
echo '<td align=center><font color="dodgerblue">'.$omtprgmanche.'</font></td>';
echo '<td align=center><font color="dodgerblue">'.$omtprgorne.'</font></td>';
echo '<td align=center><font color="dodgerblue">'.$omtprgbn.'</font></td>';
echo '</tr>'."\n";
 
echo '<tr class="bordure1">';
echo '<th bgcolor="#DCDCDC" rowspan="2">OMT ingénierie</th>';
echo '<td align=center class="bordure1">'.$totalmexrcalvados.'</td>';
echo '<td align=center class="bordure1">'.$totalmexrmanche.'</td>';
echo '<td align=center class="bordure1">'.$totalmexrorne.'</td>';
$omtingenierie = $totalmexrcalvados + $totalmexrmanche + $totalmexrorne;
echo '<td align=center class="bordure1">'.$omtingenierie.'</td>';
echo '</tr>'."\n";
echo '<tr class="bordure2">';
$pourcentmexr024 = ($totalmexrcalvados / $objmini024) *100;
$pourcentmexr025 = ($totalmexrmanche / $objmini025) *100;
$pourcentmexr026 = ($totalmexrorne / $objmini026) *100;
$pourcentmexrBN = ($omtingenierie / $objminibn) *100;
echo '<td align=center class="bordure2"><font color="#CC5500">'.round($pourcentmexr024).'%</font></td>';
echo '<td align=center class="bordure2"><font color="#CC5500">'.round($pourcentmexr025).'%</font></td>';
echo '<td align=center class="bordure2"><font color="#CC5500">'.round($pourcentmexr026).'%</font></td>';
echo '<td align=center class="bordure2"><font color="#CC5500">'.round($pourcentmexrBN).'%</font></td>';
echo '</tr>'."\n";
 
echo '<tr class="bordure1">';
echo '<th bgcolor="#DCDCDC" rowspan="2">OMT en service</th>';
echo '<td align=center class="bordure1">'.$totalcalvados.'</td>';
echo '<td align=center class="bordure1">'.$totalmanche.'</td>';
echo '<td align=center class="bordure1">'.$totalorne.'</td>';
$omtameps = $totalcalvados + $totalmanche + $totalorne;
echo '<td align=center class="bordure1">'.$omtameps.'</td>';
echo '</tr>'."\n";
echo '<tr class="bordure2">';
$pourcent024 = ($totalcalvados / $objmini024) *100;
$pourcent025 = ($totalmanche / $objmini025) *100;
$pourcent026 = ($totalorne / $objmini026) *100;
$pourcentBN = ($omtameps / $objminibn) *100;
echo '<td align=center class="bordure2"><font color="#CC5500">'.round($pourcent024).'%</font></td>';
echo '<td align=center class="bordure2"><font color="#CC5500">'.round($pourcent025).'%</font></td>';
echo '<td align=center class="bordure2"><font color="#CC5500">'.round($pourcent026).'%</font></td>';
echo '<td align=center class="bordure2"><font color="#CC5500">'.round($pourcentBN).'%</font></td>';
echo '</tr>'."\n";
 
echo '</table>'."\n"; 
 
echo '</td>'."\n";
echo '</tr>'."\n";
echo '</table>'."\n";
echo '</center>'."\n";
?>

Donc en fait dans mes requêtes SQL, j'aimerais remplacer les dates "2013-MM-JJ" par un truc genre $année (qui sera choisi avec le menu déroulant).

Et comme ca avnt mes requêtes je tape un truc du genre:

if ($année)
{mes requêtes SQL mais à la place de mise_en_service_date >= "2013-01-01" et mise_en_service_date <= "2013-12-31", un truc du genre 
mise_en_service_date =  $année

Est-ce possible? Si oui, comment?

Merci d'avance pour vos réponses !

**andry.aime** · 23/05/2013, 09h57

Salut,

Le tutoriel

http://siddh.developpez.com/articles/ajax/.

A+.

**clementdevelop** · 23/05/2013, 11h52

j'ai pas pigé grand chose... jsui débutant

**Periah** · 23/05/2013, 13h26

Le code php fourni etant celui qui permet de générer ton tableau, il faut le déporter dans une page php dédiée. Dans cette page, tu fais un $_GET['annee'] et tu utilises cette variable dans tes requêtes.

Pour l'appel, c'est sur le onchange de ta liste déroulante que ça se passe, il faut que tu ajoutes quelque chose comme ça :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function gereChoixAnnee
{
var annee = annee_de_ta_liste_deroulante ;
 
xmlhttp = new XMLHttpRequest();
 
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById('la_div_qui_contient_le_tableau').innerHTML = xmlhttp.responseText ;
}
xmlhttp.open("GET", "_php_de_generation_du_tableau.php?annee=" + annee + "&random=" + Math.random(), true);
xmlhttp.send();
}

Et bien sûr il faut inclure le tableau de résultat de ta page principale dans une DIV

**clementdevelop** · 23/05/2013, 15h43

Je n'ai pas bien compris, mais ta solution m'a l'air accessible...

1) En fait tout le code php qui est posté dans cette discussion, je dois le supprimer de ma page principale.php et le mettre dans une autre page.php?

2) Ensuite, je dois faire un truc du genre:

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
echo '<center>'."\n";
echo '<div>'."\n";
echo '<table>'."\n";
echo '<tr>'."\n";
echo '<td>'."\n";
 
le tableau de mon code...
 
echo '</td>'."\n";
echo '</tr>'."\n";
echo '</table>'."\n";
echo '</div>'."\n";
echo '</center>'."\n";

Dis moi si je me trompe!

3) Et après ca, dans la nouvelle page.php avec le code php, il faut que je fasse un $_GET['annee'] et que je change mes requêtes SQL du type

Code sql :

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

SELECT mise_en_service_date FROM suivi_omt_calvados WHERE mise_en_service_date >= "2013-01-01" AND mise_en_service_date <= "2013-12-31"

par

Code sql :

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

SELECT mise_en_service_date FROM suivi_omt_calvados WHERE l'année de mise_en_service_date  = $annee

C'est bien ca?

4) Ensuite, dans ma page principale.php, j'écris ce code :

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
function gereChoixAnnee
{
var annee = annee_de_ta_liste_deroulante ;
 
xmlhttp = new XMLHttpRequest();
 
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById('la_div_qui_contient_le_tableau').innerHTML = xmlhttp.responseText ;
}
xmlhttp.open("GET", "_php_de_generation_du_tableau.php?annee=" + annee + "&random=" + Math.random(), true);
xmlhttp.send();
}

Le problème c'est que je n'ai pas de champs annee dans ma table.
Comment l'utilisateur va t-il pouvoir choisir une année?

Et aussi, je ne comprends pas ce qu'il faut remplacer ici:

Code :

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

var annee = annee_de_ta_liste_deroulante ;

et ici:

Code :

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

document.getElementById('la_div_qui_contient_le_tableau').

comment je nomme une div ?

et enfin la:

Code :

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

xmlhttp.open("GET", "_php_de_generation_du_tableau.php?annee=" + annee + "&random=" + Math.random(), true);

Je remplace par quoi le

Code :

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

"_php_de_generation_du_tableau.php

Merci de t'intéresser à mon post!

**Periah** · 23/05/2013, 16h12

1) C'est une façon de faire (et il y en a plusieurs, comme toujours). L'essentiel est que tu penses bien à mettre une div dans ta page principale qui accueillera ton tableau dynamique.

2) Non, il faut que tu aies quelque chose du genre :

Code php :

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

1
2
3
4
5
/*tout ce qu'il y a avant ton tableau dynamique */
echo "<DIV id='div_dynamique'>" ;
/* ici rien pour l'instant */
echo "</DIV>" ;
/*tout ce qu'il y a après ton tableau dynamique */

Si tu déportes tout le code php du 1er post dans un nouveau fichier, tu n'as pas besoin de remettre le code :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
echo '<center>'."\n";
echo '<div>'."\n";
echo '<table>'."\n";
echo '<tr>'."\n";
echo '<td>'."\n";
 
le tableau de mon code...
 
echo '</td>'."\n";
echo '</tr>'."\n";
echo '</table>'."\n";
echo '</div>'."\n";
echo '</center>'."\n";

sinon, ça va doublonner.

3) Remplace par :

Code php :

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

'SELECT mise_en_service_date FROM suivi_omt_calvados WHERE mise_en_service_date >= "' . $annee . '01-01" AND mise_en_service_date <= "' . $annee . '-12-31"'

4.1) L'utilisateur choisit l'année par le moyen que tu veux : une liste déroulante, un menu... Et tu utilises son choix pour construire ta requête comme au 3)

4.2)

Envoyé par clementdevelop

Et aussi, je ne comprends pas ce qu'il faut remplacer ici:

Code :

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

var annee = annee_de_ta_liste_deroulante ;

Il faut que tu mettes la valeur qu'aura choisi l'utilisateur.

43.)

Envoyé par clementdevelop

et ici:

Code :

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

document.getElementById('la_div_qui_contient_le_tableau').

comment je nomme une div ?

Tu lui donnes un id.

4.4)

Envoyé par clementdevelop

et enfin la:

Code :

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

xmlhttp.open("GET", "_php_de_generation_du_tableau.php?annee=" + annee + "&random=" + Math.random(), true);

Je remplace par quoi le

Code :

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

"_php_de_generation_du_tableau.php

Par le nom de ton 2ème fichier php, celui qui fabrique ton tableau.

[AJAX] Menu déroulant sans redirection

AJAX

Vue hybride

Discussions similaires

Partager

Partager