Activer une fonction javascript d'une page dans une autre page

bonjour,

Voila, j'ai 2 pages une permettant de faire une sélection d'un élément avec une liste de choix et l'autre permettant d'afficher un graphique (HighCharts) dans une deuxième page.

Je souhaite via ajax mettre à jour le graph en fonction de l'element selectionné de la liste et intégrer la page 2 dans la page une .

je dois lancer une fonction javascript de la page 2 pour générer le graph mais apparemment la fonction ne se lance pas et je ne sais pas trop comment faire...

Voici les codes de mes 2 pages :

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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<script>
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("GET", 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() {
 
      if (xhr.readyState == 4){ 
 
      if (xhr.status == 200) // 200
 
          {
 
              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);   
}
 
function Request_Data(id)
{
     return ("http://sig.valenciennes-metropole.fr/OutilsCAVM/Finance_Taxe/DataReport.php?lst_Parcelle="+escape(id)+"&nocache="+Math.random());
 
}
 
 
 
function Select_Data()
{
 
    i = document.FinanceTaxe.lst_Parcelle.selectedIndex;
    id = document.FinanceTaxe.lst_Parcelle.options[i].value;
 
    url_data = Request_Data(id);
 
    Asynchrone(url_data,"divData");
 
}
 
</script>
 
 
 
 
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<LINK REL=stylesheet HREF="cssFormulaireReport.css" TYPE="text/css">
</HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../Highcharts/js/highcharts.js"></script>
<script src="../Highcharts/js/modules/exporting.js"></script>
 
<BODY>
<FORM  METHOD='GET' ACTION='Report.php' NAME='FinanceTaxe'>
 
<TABLE  class='table'  width='1270px' >
<TH colspan =1 CLASS='entete'>
Valeur locative par année pour les bâtiments d'une parcelle
</TH>
<TR  valign='top' >
<TD>
Choix d'une commune : <SELECT NAME='lst_Commune' id=''  SIZE='1' CLASS='listCommune' title=''  onchange='this.form.submit()'>
 <OPTION style="" VALUE="- -">- - </OPTION>
<OPTION style="" VALUE="014" SELECTED>Anzin </OPTION>
<OPTION style="" VALUE="019">Artres </OPTION>
<OPTION style="" VALUE="027">Aubry du Hainaut </OPTION>
<OPTION style="" VALUE="032">Aulnoy lez Valenciennes </OPTION>
<OPTION style="" VALUE="079">Beuvrages </OPTION>
<OPTION style="" VALUE="112">Bruay sur l'Escaut </OPTION>
<OPTION style="" VALUE="153">Conde sur l'Escaut </OPTION>
<OPTION style="" VALUE="160">Crespin </OPTION>
<OPTION style="" VALUE="166">Curgies </OPTION>
<OPTION style="" VALUE="215">Estreux </OPTION>
<OPTION style="" VALUE="221">Famars </OPTION>
<OPTION style="" VALUE="253">Fresnes sur Escaut </OPTION>
<OPTION style="" VALUE="301">Hergnies </OPTION>
<OPTION style="" VALUE="369">Maing </OPTION>
<OPTION style="" VALUE="383">Marly </OPTION>
<OPTION style="" VALUE="407">Monchaux sur Ecaillon </OPTION>
<OPTION style="" VALUE="444">Odomez </OPTION>
<OPTION style="" VALUE="447">Onnaing </OPTION>
<OPTION style="" VALUE="459">Petite Foret </OPTION>
<OPTION style="" VALUE="471">Preseau </OPTION>
<OPTION style="" VALUE="475">Prouvy </OPTION>
<OPTION style="" VALUE="479">Quarouble </OPTION>
<OPTION style="" VALUE="480">Querenaing </OPTION>
<OPTION style="" VALUE="484">Quievrechain </OPTION>
<OPTION style="" VALUE="505">Rombies et Marchipont </OPTION>
<OPTION style="" VALUE="515">Rouvignies </OPTION>
<OPTION style="" VALUE="530">Saint Aybert </OPTION>
<OPTION style="" VALUE="544">Saint Saulve </OPTION>
<OPTION style="" VALUE="557">Saultain </OPTION>
<OPTION style="" VALUE="559">Sebourg </OPTION>
<OPTION style="" VALUE="591">Thivencelle </OPTION>
<OPTION style="" VALUE="606">Valenciennes </OPTION>
<OPTION style="" VALUE="610">Verchain Maugre </OPTION>
<OPTION style="" VALUE="613">Vicq </OPTION>
<OPTION style="" VALUE="616">Vieux conde </OPTION>
</SELECT>
 Choix d'une parcelle : <SELECT NAME='lst_Parcelle' id=''  SIZE='1' CLASS='listParcelle' title='' OnChange=javascript:Select_Data() >
 <OPTION style="" VALUE="- -">- - </OPTION>
<OPTION style="" VALUE="59014000AC0226">AC226 </OPTION>
<OPTION style="" VALUE="59014000AD0107">AD107 </OPTION>
<OPTION style="" VALUE="59014000AD0013">AD13 </OPTION>
<OPTION style="" VALUE="59014000AE0243">AE243 </OPTION>
<OPTION style="" VALUE="59014000AE0268">AE268 </OPTION>
<OPTION style="" VALUE="59014000AE0272">AE272 </OPTION>
<OPTION style="" VALUE="59014000AE0274">AE274 </OPTION>
<OPTION style="" VALUE="59014000AE0342">AE342 </OPTION>
<OPTION style="" VALUE="59014000AE0386">AE386 </OPTION>
<OPTION style="" VALUE="59014000AE0408">AE408 </OPTION>
<OPTION style="" VALUE="59014000AO0542">AO542 </OPTION>
<OPTION style="" VALUE="59014000AO0582">AO582 </OPTION>
<OPTION style="" VALUE="59014000AO0635">AO635 </OPTION>
</SELECT>
 
</TD>
 
</TR>
<TR >
<TD>
<div id='divData'></div>
</TD>
 
</TR>
 
</TABLE>
</FORM>
</BODY>
</HTML>

Page 2

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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
 
$(function(){
    $(document).ready( function(){
            groupBar();
    });
});
 
function groupBar() {  
    $('#bar_project').highcharts({
        chart: {
            type: 'column',
            height : 500,
            width: 700
        },
        title: {
            text: 'Valeur locative des bâtiments pour une parcelle sélectionnée'
        },
        subtitle: {
            text: 'Source: Valenciennes Métropole 2014'
        },
        xAxis: {
            categories: ['593830304617','593830304618','593830309546'],
            title: {
                text: null
            },
            labels: {
                rotation: -45,
                style: {
                    fontSize: '11px'
                }
            }
        },
        yAxis: [{
            min: 0,
            //max: 200,
            labels: {
                style: {
                    color: 'red'
                }
            },
            title: {
                    align: 'middle'
            },
            labels: {
                overflow: 'justify'
            },               
            opposite: true
        },
        // second yAxis
        {
            min: 0,
            //max: 15,
            labels:{
                style :{
                    color: 'red'
                }
            },
            title: {
                text: 'k€',
                align: 'middle'
            },
            labels: {
                overflow: 'justify'
            }
        }],
        tooltip: {
            valueSuffix: ' euros'
        },
        legend: {
            layout: 'vertical',
            align: 'center',
            verticalAlign: 'top',
            x: 0,
            y: 40,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true,
            layout: 'horizontal',
            //width : 250,
            itemStyle: {
                color: 'black',
                fontSize: '10px'
            }
        },
        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
                    }
            }
        },
        series: [{name : '2012', type :'column' , yAxis : 1 ,data : [8482,11344,7287]},{name : '2013', type :'column' , yAxis : 1 ,data : [8635,11549,7419]},{name : '2014', type :'column' , yAxis : 1 ,data : [8712,11653,7485]}]      
    });
};
 
</script>
<script src="../Highcharts/js/highcharts.js"></script>
<script src="../Highcharts/js/modules/exporting.js"></script>
 
    <HTML>
  <TABLE  class='table'  width='1270px' >
<TR >
<TD>
<div id='bar_project' style='min-width: 800px; height: 500px; margin: 0 auto'></div>
</TD>
 
</TR>
<TR >
<TD>
<TABLE  class='table_shadow'  CELLSPACING='0'  width='700px'  style='font-size:9px' >
<TH colspan =5 CLASS='enteteGris'>
Valeur localive des bâtiments par année pour une parcelle
</TH>
<TR >
<TD>
Année/Bâtiment
</TD>
<TD>
&nbsp;
</TD>
<TD>
&nbsp;
</TD>
<TD>
&nbsp;
</TD>
<TD>
Total
</TD>
 
</TR>
<TR >
<TD>
2012
</TD>
<TD>
8482
</TD>
<TD>
11344
</TD>
<TD>
7287
</TD>
<TD>
27113
</TD>
 
</TR>
<TR >
<TD>
2013
</TD>
<TD>
8635
</TD>
<TD>
11549
</TD>
<TD>
7419
</TD>
<TD>
27603
</TD>
 
</TR>
<TR >
<TD>
2014
</TD>
<TD>
8712
</TD>
<TD>
11653
</TD>
<TD>
7485
</TD>
<TD>
27850
</TD>
 
</TR>
 
</TABLE>
 
</TD>
 
</TR>
 
</TABLE></HTML>

Le contenu de la page 2 sera dans "divData"

SI je lance la page 2 toute seule ,le graph s'affiche. Peut être faut-il lancer de la page 1 la fonction groupBar() mais je ne vois pas comment .

Merci pour votre aide !