0

我遇到了一个我无法解决的问题。确实,我有带有 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 IS 显示所以我认为这里的代码没有任何问题......

而且没有触发JS错误。然后我真的不知道为什么重新渲染不想操作。

知道这里会发生什么吗?

谢谢大家:)

4

1 回答 1

1

从重新渲染的输出面板中调用 refreshMyCart。

于 2014-01-31T15:46:35.853 回答