[AJAX] Aide pour ajax

Version imprimable

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:

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:

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:

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:

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.

26/01/2013, 17h53
NoSmoking

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.
27/01/2013, 11h03
thecatz

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

Citation:

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

Ce bout de code

Code:

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:

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:

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>

t'affichera Bonjour du BODY puis Bonjour vous!.

28/01/2013, 09h38
thecatz

tu essaye de me dire que le on load ici ne sert a rien donc ? mais je pense pas que mon problème vienne de la , si?
28/01/2013, 18h25
andry.aime

Citation:

Envoyé par thecatz

tu essaye de me dire que le on load ici ne sert a rien donc ? mais je pense pas que mon problème vienne de la , si?

Citation:

Envoyé par NoSmoking

2/ deux événements sur le onload, le 1st est passé aux pertes et profits.

:roll:.
Au moins tu aurais du tester le code proposé pour vérifier au lieu de perdre le temps à poser de nouvelles questions.

A+.
29/01/2013, 09h33
thecatz

"au lieu de perdre le temps à poser de nouvelles questions." Très sincèrement je trouve ta phrase assez blessante, je viens sur ce forum pour trouver de l'aide peut être que la forme n'y ai pas, mais je ne voie pas trop l’intérêt de limite m’insulter car ma démarche n'es pas celle que tu aurais faite. J'essayai juste de dire que la réponse était assez abstraite pour quelqu’un comme moi qui débute. Désolé de vous avoir fait perdre votre temps Messieurs les experts
29/01/2013, 20h53
NoSmoking
:pastaper:

Citation:

Désolé de vous avoir fait perdre votre temps Messieurs les experts

ça c'est limite insulte :mouarf:

Bon reprenons...
lorsque l'on écrit
Code:

1 2 3 window.onload = function(){ alert('première affectation.'); };
et que par la suite on écrit
Code:

1 2 3 window.onload = function(){ alert('deuxième affectation.'); };
c'est cette dernière qui sera exécuté et non plus la première déclaration qui a été remplacée par la seconde.

Il faut également se rendre compte que body.onload ou window.onload c'est la "même chose".

Maintenant voici ce que l'on peut lire dans ton code
Code:

1 2 3 4 5 6 7 <body onload='refresh_div();'> <script> var gaugeTop; window.onload = function(){ // les instructions }; </script>
dans ce cas l'affectation faite sur le BODY est purement et simplement ignorée.

La solution qui existe, du moins une des solutions, est de TOUT mettre dans le window.onload.
Code:

1 2 3 4 5 6 7 8 <body> <script> var gaugeTop; window.onload = function(){ refresh_div(); // 1st fonction // les instructions suivantes }; </script>
c'est ceci que montrent les exemples mis et qui sont nullement du travail d'experts imbus, et dire que je les croyais pédagogique :lol:.

Bonjour,

j'ai lu la documentation présente sur le site pour essayer de comprendre mieux les choses, j'ai réussi donc a faire marcher mon script cela affiche bien mon canvas et récupère bien ma donnée mais cela ne se "rafraichie" pas comme le prévoit la fonction httprequest. J'ai relu des centaines de fois mon code et je n'ai pas réussi à trouver l'origine de ce problème.

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
    function refresh_div(){
        var xhr_object = null, 
            method = 'GET',
            filename = 'compt.php';
 
        if(window.XMLHttpRequest){
            // Firefox
            xhr_object = new XMLHttpRequest();
        } else if(window.ActiveXObject){
            // Internet Explorer
            xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
        }
 
        xhr_object.open(method, filename, true);
        xhr_object.onreadystatechange = function(){
            if(xhr_object.readyState == 4){
                var tmp = xhr_object.responseText;
                creerGauge(tmp);
            }
        }
        xhr_object.send(null);
    }
 
    function creerGauge(val){
        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(val);
        gaugeTop.animationSpeed = 32;
    }

Code:

1
2
3
<body onload='refresh_div();'>
<canvas id="nbr" width="200" height="120"></canvas> 
</body>

Qu'en pensez vous ?

PS : Je m’excuse d'avoir réagis peut être trop rapidement dans mon dernier message.

04/02/2013, 22h40
NoSmoking

Citation:

... donnée mais cela ne se "rafraichie" pas comme le prévoit la fonction httprequest.

j'ai du mal à comprendre ce que cela signifie

Ta fonction refresh_div() met à jour/crée ta Gauge au chargement de ta page point final!