Salesforce：Javascript 不想重新渲染（经过 Chrome 测试）

Posted 2023-02-22

【中文标题】Salesforce：Javascript 不想重新渲染（经过 Chrome 测试）

【英文标题】：Salesforce: Javascript do not want to rerender (chrome tested)

【发布时间】：2014-02-23 23:45:27

【问题描述】：

我遇到了一个我无法解决的问题。确实，我有带有 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事件） 我的输出面板块中的console.log 不显示。然后我认为重新渲染存在问题。加上页面加载时 console.log IS 显示所以我认为这里的代码没有任何问题......

而且没有触发JS错误。那我真的不明白为什么rerender不想操作。

知道这里发生了什么吗？

谢谢各位 :)

【参考方案1】：

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