[AJAX] Actualisation d'une DIV
Salut les professionnels ;)
Alors voila je suis en train de développer un tableau de bord avec un affichage de donner sur une même page. C'est donné peuvent être trié par statues grâce à une liste déroulante utilisant AJAX. Ce que j'aimerai faire c'est que la DIV contenant le tableau de données soit actualisé toutes les 5 minutes mais en gardant le paramètre choisi dans la liste déroulante.
Donc voila un extrait simplifier du code :
Index.PHP
Code:
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
|
<!-- Ici une liste déroulante permettant de définir un critère de tri -->
<div id="bandeau">
<table width=100%>
<TR>
<td width=33%>
<form name="Classement" method="POST" >
<fieldset>
Choisir un type de classement :
<select name="Lst_Classement" id="Lst_Classement" onchange="envoyerRequeteListeGet('Get_Tableau.php', this.value, 'tableau')" >
<option value='-1'>Closed exclu</option>
<option value='1'>Seulement New</option>
<option value='2'>Seulement Inprog</option>
<option value='3'>Seulement resolved</option>
<option value='4'>Seulement Closed</option>
</select>
</fieldset>
</form>
</td>
<td width=33%>
<img id="dcns" src="DCNS.jpg" HEIGHT="50px" />
</td>
<td>
</td>
</tr>
</table>
</div>
<div id="tableau">
<!-- Ici est afficher le tableau avec les données -->
</div> |
Get_Tableau.php
Code:
1
2
|
<!-- Requête avec if en fonction du tri le tout mis dans un tableau |
FunctionAjax.js
Code:
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
|
function getreqHttp()
{
var reqHttp = null ;
if(window.XMLHttpRequest)
{
// pour Firefox (Mozilla) et autres
reqHttp = new XMLHttpRequest();
}
else
{
if(window.ActiveXObject)
{
// pour Internet Explorer
try
{
reqHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
reqHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else
{
// XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
reqHttp = false;
}
}
return reqHttp;
}
// pour la methode POST
function envoyerRequeteListePost(url , Classement, CodeId )
{
// récupération d'un objet XMLHttpRequest
var reqHttp = getreqHttp() ;
if ( reqHttp == null)
{
alert("Impossible d'utiliser Ajax sur ce navigateur");
}
else
{
// appel d'une fonction anonyme (définie à la volée)
reqHttp.onreadystatechange = function()
{ // tester si tout s'est bien passé
if (reqHttp.readyState == 4 && reqHttp.status == 200)
{ // tout est ok
// le résultat est récupéré via la propriété responseText
LesLivres = document.getElementById(CodeId);
LesLivres.innerHTML = reqHttp.responseText;
}
}
// ouverture de la connexion avec le serveur
reqHttp.open("POST", url, true) ;
// obligatoire pour la méthode post
reqHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// recupération de l'objet correspondant à la catégorie selectionnée
LesClassements = document.getElementById(Classement);
//alert (LesClassements) ;
CodeClassement = LesClassements.options[LesClassements.selectedIndex].value;
// envoi de la requête
reqHttp.send("CodeClassement=" + CodeClassement);
//alert(CodeClassement) ;
}
return ;
}
// pour la méthode GET
function envoyerRequeteListeGet(url, idClassement, CodeId)
{
//alert(idClassement + CodeId) ;
// récupération d'un objet XMLHttpRequest
var reqHttp = getreqHttp() ;
if ( reqHttp == null)
{
alert("Impossible d'utiliser Ajax sur ce navigateur");
}
else
{
// appel d'une fonction anonyme (définie à la volée)
reqHttp.onreadystatechange = function()
{
// tester si tout s'est bien passé
if (reqHttp.readyState == 4 && reqHttp.status == 200)
{
// la requête s'est correctement déroulée
// le résultat est récupéré via la propriété responseText
LesPdt = document.getElementById(CodeId) ;
LesPdt.innerHTML= reqHttp.responseText;
}
}
// ouverture de la connexion avec le serveur - méthode GET - asynchrone
// escape permet de s'affranchir des problèmes liés aux caractères spéciaux
//alert(idClassement) ;
reqHttp.open("GET",url + "?CodeClassement=" + escape(idClassement), true);
// envoi de la requête
reqHttp.send(null);
}
return ; |
Voila si quelqu'un pouvais m'aidée parce que je galère un peu en JavaScript !
Merci d'avance pour l'aide :ccool:
