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

t'affichera Bonjour du BODY puis Bonjour vous!.

**thecatz** · 28/01/2013, 09h38

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?

**andry.aime** · 28/01/2013, 18h25

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?

Envoyé par NoSmoking

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

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

A+.

**thecatz** · 29/01/2013, 09h33

"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

**NoSmoking** · 29/01/2013, 20h53

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

ça c'est limite insulte

Bon reprenons...
lorsque l'on écrit

Code :

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

1
2
3
 window.onload = function(){
  alert('première affectation.');
};

et que par la suite on écrit

Code :

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

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 :

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

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 :

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

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

.

**thecatz** · 04/02/2013, 10h49

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 :

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

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

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.

**NoSmoking** · 04/02/2013, 22h40

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

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

AJAX

Discussions similaires

Partager

Partager