2

I have a slider which contains iframes. The slider is based on bxslider and the iframes each contain a separate highcharts chart. Now I want to achieve something which sounded simple: I want to redraw the chart once the slide changes.

After some searching, I found a helpful question which explained the redrawing. That works fine inside the frame. Actually I have created a button inside the frame, which redraws it. So far so good. However, whenever I try to call the redraw function from the main page, that contains the slider, then nothing happens. I have tried setting alerts (these are shown), logging variables (all seems fine) and even sending a click event to the button that redraws the chart (the event is triggered, but the chart is not redrawn). What am I missing here?

UPDATE:

I looked at this from different angles and also read a lot of similar questions. The point is that the call is actually working, but it seems like the Highcharts methods are not executed. All the data seems to be there, so it is not a scope problem. Is there maybe a security policy that might prevent code in an external js file from running or such (without generating any errors)?

main code:

<body>
<ul class="bxslider">
  <li><iframe src="/xcid/dashboard/index_project_budget" width="100%" height="800px" id="iframe1" marginheight="0" frameborder="0"></iframe></li>
  <li><iframe src="/xcid/dashboard/index_utilization" width="100%" height="800px" id="iframe2" marginheight="0" frameborder="0"></iframe></li>
</ul>
<script>
function callChild () {
    var el = document.getElementById("iframe2");
    el.contentWindow.redraw(); //tried this first
    $("#iframe2").contents().find("#button").trigger("click"); //tried this, too

}

$(document).ready(function(){
    $(".bxslider").bxSlider({
        auto: true,
        pause: 8000,
        onSlideAfter: function(){
            callChild();
        }
    });
});
</script>
</body>

iframe2 main code:

    <div id="main-panel">
        <div id="main">
            <h1><?php echo $title; ?></h1>
            <div id="chart-container" style="width: 800px; height: 400px; margin: 0 auto"><!-- Chart container --></div>
            <div id="button">WHY?</div>
        </div>
    </div>
    <script>
        var data = <?php echo $chart['series']; ?>;
        var options = <?php echo $chart['options']; ?>;
        renderto ('#chart-container', data, options);
        var chart = $('#chart-container').highcharts();

        function clearChart() {
            while(chart.series.length > 0) {
                chart.series[0].remove(false);
            }
            chart.redraw();
        }
        function redrawChart() {
            for (i=0;i < data.length; i++) {
                chart.addSeries(data[i], false);
            }
            chart.redraw();
        }
        function redraw() {
            clearChart();
            redrawChart();              
        }
        $("#button").click(function(){
            console.log ("button clicked");
            redraw();
        });
    </script>
titusn
  • 1,201
  • 1
  • 12
  • 43
  • Have you seen this: http://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page ? – Paweł Fus May 14 '14 at 10:57
  • Yes, I did see that. Having a look again to see if I missed anything, but the thing remains that I can actually access the function and it does execute. If I let the redraw() function log or alert, it works. – titusn May 14 '14 at 11:20
  • Well, do you have any errors in console? I think that line: `var chart = $('#chart-container').highcharts();` should produce an error, because isn't executed after DOM is loaded. – Paweł Fus May 14 '14 at 12:30
  • Nope, no errors at all and the line you mention executes just fine. Otherwise clicking the button would not work, but it does. I do agree of course that using that line in a .ready() function would be neater. Right now I am just trying to get a PoC to work. – titusn May 14 '14 at 12:47
  • @PawełFus there will be no error in this case - empty jQuery collection will be returned and `highcharts()` is a `noop` in that case. – ElmoVanKielmo May 14 '14 at 13:03
  • I checked that chart actually points to an object. If you click the button inside the iframe, it actually redraws the chart. If I call the function from the outside the reference to the object still looks the same in an inspector or the console, so what do you mean? – titusn May 14 '14 at 13:12
  • Why there would by ane jQuery collection if jQuery may not be loaded? – Paweł Fus May 14 '14 at 14:10

0 Answers0