解決できない問題に遭遇しました。実際、私は apex 変数を含む JS を持っており、新しい値を取得する方法でこのブロックを再レンダリングしたいと考えています。出力パネルを使用していますが、残念ながら再レンダリングは行われません。私のコードは以下のようなものです
<apex:commandButton value="button" id="theButton" action="{!setDataSet}" oncomplete="refreshMyChart()" rerender="jstorerender"/>
<apex:outputpanel id="jstorerender">
<script type="text/javascript" >
$j = jQuery.noConflict();
var innerVar = '{!innerString}';
var covVar = '{!coverageAsCategorie}';
console.log("want to refreshINIT"+innerVar+covVar);
</script>
</apex:outputpanel>
グラフの更新機能は少し複雑なので、oncomplete の前に再レンダリングが発生する必要があるため、これが問題の原因であるとは思わない限り、別のブロックに入れます。
<script type="text/javascript">
function refreshMyChart(){
console.log("want to refreshINIT2"+innerVar+covVar);
var chart;
var colors = Highcharts.getOptions().colors;
var categories = ['{!coverageAsCategorie}'];
var name = 'Browser brands';
var data = ['{!innerString}'];
function setChart(options) {
chart.series[0].remove(false);
chart.addSeries({
type: options.type,
name: options.name,
data: options.data,
color: options.color || 'white'
}, false);
chart.xAxis[0].setCategories(options.categories, false);
chart.redraw();
};
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted:true
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
var options;
if (drilldown) { // drill down
options = {
'name': drilldown.name,
'categories': drilldown.categories,
'data': drilldown.data,
'color': drilldown.color,
'type': 'columnrange',
};
} else { // restore
options = {
'name': name,
'categories': categories,
'data': data,
'type': 'pie'
};
}
setChart(options);
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'% market share</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' versions';
} else {
s += 'Click to return to browser brands';
}
return s;
}
},
series: [{
type: 'pie',
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
}
});
};</script>
とにかく、ボタンをクリックするとどうなりますか? :
- リフレッシュ機能内のconsole.logが表示されます（oncompleteイベントがトリガーされたと思います）
- outputpanel ブロック内の console.log が表示されません。次に、再レンダリングに問題があると思います。さらに、ページの読み込み時に console.log が表示されるので、コードに問題があるとは思いません...
さらに、トリガーされる JS エラーはありません。次に、再レンダリングが動作したくない理由が本当にわかりません。
ここで何が起こるか分かりますか？
Thxみんな:)