[AJAX] Actualisation d'une DIV

**NarOneR** · 27/01/2012, 13h23

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 :

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
 
<!-- 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 :

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

1
2
 
<!-- Requête avec if en fonction du tri le tout mis dans un tableau

FunctionAjax.js

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
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

**NoSmoking** · 28/01/2012, 14h17

Bonjour,

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.

il te suffit de relancer la fonction via un setTimeout et prenant soin de récupérer les bonnes données au sein de la fonction et non plus en passage de paramètres.

**NarOneR** · 30/01/2012, 13h01

Bonjour alors c'est bon résolu avec la fonction suivante

Code :

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

1
2
3
4
function executeListeGet(){
    envoyerRequeteListeGet('Get_Tableau.php', document.GetElementById('"Lst_Classement').value, 'tableau');
    setTimeout("executeListeGet()",300000);
}