Salesforce: Javascript do not want to rerender (chrome tested)

Question

I ran into a problem that I do not manage to solve. Indeed I have JS with apex variable in it and I want to rerender this block in the way to get the fresh values back. I am using the outputpanel but unfortunatly no rerender happen. My code is like below

<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>

The refresh my chart function is a little bit complex so I put it in another block as far as I do not think that this is the source of the problem because the rerender should happen befor the 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>

Anyway what happen when I click on my button? :

• The console.log inside my refresh function appear (then I guess that oncomplete event has been triggered)
• The console.log inside my outputpanel block IS NOT display. Then I think that there is an issue with the rerender.Plus the console.log IS diplay when the page load so I do not think that here is any issue with the code...

Moreover there are not JS error triggered. Then I really do not the why the rerender do not wanna operate.

Any idea of what happens here?

Thx guys :)

Answer 1

Invoke refreshMyCart from inside the re rendered ouputpanel.