[AJAX] Aide pour ajax [Débutant(e)]

**thecatz** · 25/01/2013, 15h51

Bonjour,
je viens de découvrir aujourd'hui même l'ajax. Et j'ai besoin de votre aide. Voilà j'essaye de mettre a jour des données sans avoir a faire un refresh de la page.

J'arrive assez facilement avec des données numeric ou text mais la j'essaye de mettre a jour un canvas qui est une gauge du site gauge.js. Ce petit graphique me permet d'afficher le nombre de visiteur en ligne.

Voici mon code qui fonctionne parfaitement si je n'utilise pas ma fonction ajax :

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
 <html>
<head>
<script src="http://chart.lesechos.fr/js/gauge.js" type="text/javascript" language="javascript"></script>
</head>
 
<body>
<?php
$sxml = simplexml_load_file('api/xml/compteurvisite15.xml');
foreach ($sxml->Row as $row) {$Visite =$row['Metric4'];}
 ?>
<script>
var gaugeTop;
window.onload = function(){
 
var gaugeTopTarget = document.getElementById('nbr');
var gaugeTop = new Gauge(gaugeTopTarget);
 
gaugeTop.setOptions({
    lines: 12,
    angle: 0.15,
    lineWidth: 0.44,
    colorStart: '#6FADCF',
    colorStop: '#8FC0DA',
    strokeColor: '#E0E0E0'
 
 });
 
gaugeTop.maxValue = 15000;
gaugeTop.set(<?php echo $Visite ?>);
gaugeTop.animationSpeed = 32;
 
};
 
</script>
 
<canvas id="nbr" width="200" height="120"></canvas> 
 
</body>
</html>

ici j'appel un xml qui a comme donné le nombre de visiteurs, ce code marche parfaitement et le canvas s'affiche correctement.

Ensuite je passe a l'ajax juste pour afficher dynamiquement le nombre de visiteurs sans afficher le canvas et là aussi tout fonctionne parfaitement :

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
<html>
<head>
 
<script>
function refresh_div()
{
var xhr_object = null;
if(window.XMLHttpRequest)
{ // Firefox
xhr_object = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{ // Internet Explorer
xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
}
var method = 'GET';
var filename = 'compt.php';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
var tmp = xhr_object.responseText;
document.getElementById('nbr').innerHTML = tmp;
refresh_div();
}
}
xhr_object.send(null);
}
 
</script>
<link rel="stylesheet" type="text/css" href="css/dashv-1.5.css"/>
 
</head>
<body onload='refresh_div();'>
 
<div id="nbr"><?php echo $Visite ?></div>
 
</body>
</html>

Et voici maintenant mon code pour mon canvas la partie qui ne marche pas et c'est ici que j'ai besoin d'aide :

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
<html>
<head>
<script src="http://chart.lesechos.fr/js/gauge.js" type="text/javascript" language="javascript"></script>
<script>
 
function refresh_div()
{
var xhr_object = null;
if(window.XMLHttpRequest)
{ // Firefox
xhr_object = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{ // Internet Explorer
xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
}
var method = 'GET';
var filename = 'compt.php';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
var tmp = xhr_object.responseText;
document.getElementById('nbr').innerHTML = tmp;
refresh_div();
}
}
xhr_object.send(null);
}
 
</script>
 
 
</head>
 
<body onload='refresh_div();'>
 
<script>
var gaugeTop;
window.onload = function(){
 
var gaugeTopTarget = document.getElementById('nbr');
var gaugeTop = new Gauge(gaugeTopTarget);
 
gaugeTop.setOptions({
    lines: 12,
    angle: 0.15,
    lineWidth: 0.44,
    colorStart: '#6FADCF',
    colorStop: '#8FC0DA',
    strokeColor: '#E0E0E0'
 
 });
 
gaugeTop.maxValue = 15000;
gaugeTop.set(<?php echo $Visite ?>);
gaugeTop.animationSpeed = 32;
 
};
 
</script>
 
<canvas id="nbr" width="200" height="120"></canvas> 
 
 
</body>
</html>

et compt.php

Code php :

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

1
2
3
4
5
6
7
<?php
$sxml = simplexml_load_file('api/xml/compteurvisite15.xml');
foreach ($sxml->Row as $row) {$Visite =$row['Metric4'];}
 
 echo $Visite;
 
 ?>

Merci si quelqu'un pourrait m'aider, car je pige pas depuis plusieurs heures.

**NoSmoking** · 26/01/2013, 17h53

Bonjour,
1/ je ne vois pas où tu redessines ton canvas après avoir reçu la réponse.
2/ deux événements sur le onload, le 1st est passé aux pertes et profits.

**thecatz** · 27/01/2013, 11h03

bonjour,
je comprends pas trop ce que tu m'explique mais le code marche bien si je ne fais pas d'ajax, la ligne en html canvas affiche bien l’élément. Pour le onload, je comprends pas trop désolé.

**NoSmoking** · 27/01/2013, 17h26

Pour le onload, je comprends pas trop désolé.

Ce bout de code

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="fr">
<head>
<script>
window.onload = function(){
  alert('Bonjour vous!');
}
</script>
</head>
<body onload="alert('Bonjour du BODY');">
</body>
</html>

t'affichera Bonjour du BODY.

Celui ci

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="fr">
<head>
</head>
<body onload="alert('Bonjour du BODY');">
<script>
window.onload = function(){
  alert('Bonjour vous!');
}
</script>
</body>
</html>

t'afficheras Bonjour vous!.

Et celui ci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="fr">
<head>
<script>
window.onload = function(){
  alert('Bonjour du BODY');
  alert('Bonjour vous!');
}
</script>
</head>
<body>
</body>
</html>