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 :
avec le page php suivante :
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>
..../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 :
(j'ai supprimé une partie de l'adresse url volontairement , mais l'adresse en bonne)
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); }
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 !
Partager