[AJAX] Rafraîchir deux div à des intervals différents

Bonjour,

J'ai beaucoup cherché sur internet, comment raffraîchir un div automatiquement en ajax, et j'ai trouvé !

Mais mon problème est que je n'arrive pas a trouver un code où je puisse raffraîchir deux div différents (qui pointes sur deux pages différents) à des intervals différents !

D'avance merci,

Grégoire

slt,

exactement de la même maniere !

soit tu fais deux bloc ajax (un pour chaque div) soit un seul bloc avec prise de parametre lui spécifiant le div concerné par la requête (et donc la page à interroger).

quels sont les intervalles de rechargement et le décalage entre les deux div ?

Bonsoir :)

C'est pas sensé jouer grâce aux id des divs ?

Lex

Citation:

Envoyé par jeje13009

slt,

exactement de la même maniere !

soit tu fais deux bloc ajax (un pour chaque div) soit un seul bloc avec prise de parametre lui spécifiant le div concerné par la requête (et donc la page à interroger).

quels sont les intervalles de rechargement et le décalage entre les deux div ?

Bonjour,

merci de votre réponse !
J'ai déjà essayé avec deux fichiers javascript (deux blocs ajax) différents mais je n'y arrive pas car je déclare les deux liens dans le <head> et je fait l'appel dans le <div> mais il n'y en a jamais que 1 sur les 2 qui fonctionne ! je pense que c'est a cause qu'il ne sait pas quel lien correpond a quel div ?

voici l'exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Tableau affichage</title>
  <LINK rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="message.js"></script>
  <script type="text/javascript" src="tableau.js"></script>
	</head>
  <body> 
 
  <div id="refresh_message"> </div>
  <div id="refresh_tableau"> </div>
 
 </body>
</html>

et voici le contenu d'un fichier script (refresh_tableau -> tableau.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
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
138
 
var oO =
{
	'tempoXHR': 5000,
	'tempoRefresh': 5000,
	'url': 'tableau.php',
 
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},
 
	aTag: function(oEl, sTag)
	{
		return oEl.getElementsByTagName(sTag);
	},
 
	bXHRSupport: (typeof XMLHttpRequest != "undefined"),
 
	bActiveXSupport: (window.ActiveXObject),
 
	aMSXML: ["Microsoft.XMLHTTP",
		"MSXML2.XMLHTTP", "MSXML2.XMLHTTP.3.0",
		"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.5.0",
		"MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.7.0"],
 
	createXHR: function()
	{
		if(oO.bXHRSupport)
			return new XMLHttpRequest;
		else if(oO.bActiveXSupport)
		{
			var iI;
 
			iI = oO.aMSXML.length;
 
			do
			{
				try
				{
					return new ActiveXObject(oO.aMSXML[--iI]);
				}
				catch(oError) { };
			}
			while(iI > 0);
 
			throw new Error("L'objet oXHR n'a pas été créé");
		}
	},
 
	getXHR: function(oReq)
	{
		var oXHR, oTimer;
 
		oXHR = oO.createXHR();
		oO.oReq = oReq;
 
		oXHR.open(oO.oReq['method'], oO.oReq['url'], true);
 
		oTimer = setTimeout(
			function()
			{
				if(oXHR)
					return oXHR.abort();
			},
			oO['tempoXHR']
		);
 
		oXHR.onreadystatechange = function()
		{
			if(oXHR.readyState === 4)
				if(oXHR.status && /200|304/.test(oXHR.status))
				{
					clearTimeout(oTimer);
 
				oO.oReq['response'] = oXHR.responseText;
 
				if(oO.oReq['callback'])
					(oO.oReq['callback'])();
				}
		}
 
		oXHR.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
 
		if(oO.oReq['method'] === 'post')
			oXHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 
		return oO.oReq['method'] === 'get' ?
			oXHR.send(null):
			oXHR.send(oO.oReq['param']);
	},
 
	control: function(oEl)
	{
		return setInterval(
			function()
			{
				return oO.getXHR(
					{
						'cible': oEl,
						'url': oO['url'],
						'method': 'get',
						'callback': function()
						{
							return oO.refresh_tableau(oO.oReq['cible'], oO.oReq['response']);
						}
					}
				);
			},
			oO['tempoRefresh']
		);
	},
 
	refresh_tableau: function(oEl, sResponse)
	{
		return oEl.innerHTML = sResponse;
	},
 
	init: function()
	{
		var aDivs, iDiv;
 
		aDivs = oO.aTag(document, 'div');
		iDiv = aDivs.length;
 
		do if(aDivs[--iDiv].className === 'refresh_tableau')
			oO.control(aDivs[iDiv]);
		while(iDiv > 0);
 
		return true;
	}
};
 
oO.connect(window, 'load', oO.init, false);

Les intervals pour le refresh_message=60 sec, et le refresh_tableau= 5 sec

J'espère que c'est assez claire et compréhensible !

Merci,

Grégoire

Solution trouvée

Bonjour,

voila j'ai trouvé la solution:

Code:

1
2
3
4
5
6
7
8
9
 
new Ajax.PeriodicalUpdater(
	'monDiv',
	'http://mon-domaine.com/ma/page.php',
	{
		insertion: Insertion.Bottom,
		frequency: 5
	}
);

Grégoire