Discussion :

[mcdelay]

Bonjour,

J'ai un petit souci que je ne maîtrise pas bien concernant l'appel d'une page php (via httpRequest) contenant une fonction javascript.

J'ai une page php contenant une fonction javascript permettant d'afficher un graph via HightChart (librairie javascript permettant de faire des graphs). En appelant cette page seule, j'affiche bien mon graph qui est lancé via une fonction javascript :

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script src="../ClassFonctionJS/js/jQuery.js"></script>
<script type="text/javascript">
 
 
$(document).ready( function(){
    alert ('oi');
    groupBar();
});
 
function groupBar() {
alert('oui');
            $('#bar_liaison').highcharts({
                chart: {
                    type: 'column',
                    height : 400,
                    width: 1000
                },
                title: {
                    text: 'Nombre de liaisons utilisées',
                    style: {
                        fontSize : '12px'
                    }
                },
                subtitle: {
                    text: 'Source: Valenciennes Métropole',
                    style: {
                            fontSize : '9px'
                        }
                },
                xAxis: {
                    categories: [<?php echo join($legend_bar,',') ?>],
                    title: {
                        text: null
                    },
                    labels: {
                        rotation: -20,
                        style: {
                            fontSize: '9px'
                        }
                    }
                },
                yAxis: [{
                    min: 0,
                    //max: 120,
                    labels: {
                        style: {
                            color: 'red'
                        }
                    },
                    title: {
                        text: 'Nombre total de liaison',
                        align: 'middle'
                    },
                    labels: {
                        overflow: 'justify'
                    },               
                    opposite: true
                },
                // second yAxis
                {
                    min: 0,
                   // max: 80,
                    labels:{
                        style :{
                            color: 'red'
                        }
                    },
                    title: {
                        text: 'Nombre de liaison',
                        align: 'middle'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                }],
                tooltip: {
                    pointFormat:  "{series.name} : {point.y:.0f} fois"
                    //valueSuffix: ' ha'
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 60,
                    y: 35,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF',
                    shadow: true,
                    layout: 'horizontal', // permet de mettre la legende en horizontal
                    //width : 150, // en fixant une largeur on peut jouer sur le nombre de colonne à afficher
                    itemStyle: {
                        color: 'black',
                        fontSize: '9px'
                    }
                },
 
                plotOptions: {
                    series: {
                        animation: false,
                        marker: {
                            radius: 2,
                            fillColor : 'black'
                        }
                    },
                    spline: {
                            dataLabels: {
                                enabled: true,
                                crop : false, // permet de ne pas bloquer l'affichage d'un label si hot
                                format: '{point.y:.0f}',
                                style: {
                                        fontSize: '12px' 
                                    }
                            }
                    }
                },
                series: [<?php echo $series_bar ?>,<?php echo $line_data?>]   
            });
        };
</script>

avec le page php suivante :

..../FO_Location/StatLiaison.php?id_Liaison=36

Par contre si je veux ouvrir cette page via httpRequest , la page se charge (avec le contenu écrit en php) mais pas le graph car apparemment la fonction javascript n'est pas appelée. (j ai mis un alerte au moment f de l'appel mais rien ne se passe).

Je pense que je ne dois pas très maitriser tout le mécanisme du httprequest :

Voici mon code :

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
function Select_StatLiaison(id)
{
    var bal=document.createElement("div");
 
    url = Request_StatLiaison(id);
    Asynchrone(url,"divStatLiaison");
}
 
function Request_StatLiaison(id)
{
     return ("http://..../fo_location/StatLiaison.php?id_Liaison="+escape(id)+"&nocache="+Math.random());
}
 
function Asynchrone(v_url,div)
{
 
     if(window.XMLHttpRequest) // FIREFOX
     {      
        try
        {
            xhr = new XMLHttpRequest();
        }
 
        catch (e){
            try{
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e){
                try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    alert("XHR not created");
                }          
            }
         } // end catch (e)
     }// end if
 
     else if(window.ActiveXObject) // IE
     {        
        xhr = new ActiveXObject("Microsoft.XMLHTTP");      
     }
 
     else
     {
          alert("Fonction non supportée par le navigateur");
          xhr = false;
 
        return(false);
     }
 
      xhr.open("POST", v_url, true);
      xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded; charset=iso-8859-1');
      //xhr.setRequestHeader('Cache-Control','no-cache');
 
      xhr.onreadystatechange = function() {
          //alert(xhr.readyState);
          //alert(v_url);
 
 
      if (xhr.readyState == 4){ 
 
 
      //if (xhr.status == 200) // 200 : requete réussie
          if (xhr.status != 404 && xhr.status != 500) // 200 : requete réussie // 0 : requete vide  !!
          {            
            var element = document.getElementById(div);
 
            try
            {            
                  //alert(xhr.responseText);                 
              element.innerHTML = xhr.responseText;
              return false;
 
            }
 
            catch(e)
            {
                try
                {        
                    var wrappingElement = document.createElement('div');
                    wrappingElement.innerHTML = xhr.responseText;
 
                    while (element.firstChild) {
                      element.removeChild(element.firstChild);
                    }
                    element.appendChild(wrappingElement);
 
                } // end of catch
                catch (e)
                {
                    //alert('3');
                } // end fo catch
              } // end of catch
           }    // end if xhr.status == 200
 
           if (xhr.status == 404)
           {
                html = 'Fichier non trouvé 404 : <br/>';
                html += xhr.responseText;
           }
 
           if (xhr.status == 500)
           {
                html = 'Erreur 500 serveur : <br/>';
                html += xhr.responseText;
           }
 
           // on affiche le fragment HtML
            //$('contenu')innerHTML = html;
      } // end if xhr.readyState == 4
 
      else
      {
          return false;
      }    
  } // end of function
  xhr.send(null);   
}

(j'ai supprimé une partie de l'adresse url volontairement , mais l'adresse en bonne)

Quand je fais appel à ma page php , la fonction javascript n'est donc pas appelée. Y a t-il un processus particulier ou un ajout de code supplementaire à mettre pour enclencher l'appel des fonctions javascript ? J'ai aussi essayé de mettre un OnLoad dans le body mais cela ne fonctionne pas non plus.

En pièce jointe j'ai fait un imprime écran de la page appelée.

Merci pour votre aide !