Error Encountered with Google Chart in Internet Explorer 8 - CODE70: Access denied format+en,default+en,ui+en,corechart+en.I.js, at line 86, position

Question

Error Encountered with Google Chart in Internet Explorer 8 - CODE70: Access denied format+en,default+en,ui+en,corechart+en.I.js, at line 86, position

Encountering a persistent error when using Google Charts in IE8:

SCRIPT70: Permission denied format+en,default+en,ui+en,corechart+en.I.js, line 86 character 16

The issue arises while working with a parent page where the drawChart() function and global chartDatas array variable are utilized. Upon calling a child page through an ajax request and updating the chartDatas array, calling the drawChart() function triggers the aforementioned error in IE8, particularly when hovering over the page. This continuous error significantly impacts the functionality of the application. The following is a sample code snippet to replicate this problem in IE8 (works fine in modern browsers like Chrome, Firefox, IE10).

parentPage.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages: ["corechart"]});
            google.setOnLoadCallback(drawChart);
            var year = 2008;
            var chartDatas = [
                ['Year', 'Sales', 'Expenses'],
                ['2004', 1000, 400],
                ['2005', 1170, 460],
                ['2006', 660, 1120],
                ['2007', 1030, 540]
            ];
            function drawChart() {
                var data = google.visualization.arrayToDataTable(chartDatas);

                var options = {
                    title: 'Company Performance',
                    vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
                };

                var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }
            function callChild() {
                $.ajax({
                    url: "childJsp.jsp",
                    complete: function(res, textStatus) {
                        $('#childPage').html(res.responseText);                        
                    }
                });
            }
        </script>
    </head>
    <body>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
        <br>
        <input type="button" onclick="callChild();" value="call child page">
        <div id="childPage"> </div>
    </body>
</html>

childJsp.jsp

<script>       
    chartDatas.push([''+(year++), 900, 400]);
    drawChart();
</script>

Upon loading the child page via ajax call, the error is logged in the console.

javascript ajax charts internet-explorer-8 google-visualization

Answer 1

Answer №1

It appears that a simple adjustment to your code might be beneficial in order to optimize the reuse of the chart object, rather than creating multiple instances unnecessarily.

You may consider implementing the following modification:

Revise your JavaScript as follows:

function drawChart() {
    var data = google.visualization.arrayToDataTable(chartDatas);

    var options = {
        title: 'Company Performance',
        vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    function retrieveChildData() {
        $.ajax({
            url: "childJsp.jsp",
            complete: function(response, status) {
                $('#childPage').html(response.responseText);
                var data = google.visualization.arrayToDataTable(chartDatas);
                chart.draw(data, options);
            }
        });
    }

    var button = document.querySelector('#callChild');
    if (document.addEventListener) {
        el.addEventListener('click', retrieveChildData);
    }
    else {
        el.attachEvent('onclick', retrieveChildData);
    }
}

Remove the retrieveChildData function call from your response. Update the button element in your HTML to this:

<input type="button" id="callChild" value="Retrieve child data">

(You can opt for a different ID as long as it matches with the button element reference in the JavaScript).

To mitigate potential timing issues, you could enhance the output of your childData.jsp page by formatting it into a JSON string like so:

["<year>",<sales>,<expenses>]

. Subsequently, modify the retrieveChildData function within drawChart to:

function retrieveChildData() {
    $.ajax({
        url: "childJsp.jsp",
        dataType: 'json',
        complete: function(response, status) {
            data.addRow(response);
            chart.draw(data, options);
        }
    });
}

Answer 2

It appears that a simple adjustment to your code might be beneficial in order to optimize the reuse of the chart object, rather than creating multiple instances unnecessarily.

You may consider implementing the following modification:

Revise your JavaScript as follows:

function drawChart() {
    var data = google.visualization.arrayToDataTable(chartDatas);

    var options = {
        title: 'Company Performance',
        vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    function retrieveChildData() {
        $.ajax({
            url: "childJsp.jsp",
            complete: function(response, status) {
                $('#childPage').html(response.responseText);
                var data = google.visualization.arrayToDataTable(chartDatas);
                chart.draw(data, options);
            }
        });
    }

    var button = document.querySelector('#callChild');
    if (document.addEventListener) {
        el.addEventListener('click', retrieveChildData);
    }
    else {
        el.attachEvent('onclick', retrieveChildData);
    }
}

Remove the retrieveChildData function call from your response. Update the button element in your HTML to this:

<input type="button" id="callChild" value="Retrieve child data">

(You can opt for a different ID as long as it matches with the button element reference in the JavaScript).

To mitigate potential timing issues, you could enhance the output of your childData.jsp page by formatting it into a JSON string like so:

["<year>",<sales>,<expenses>]

. Subsequently, modify the retrieveChildData function within drawChart to:

function retrieveChildData() {
    $.ajax({
        url: "childJsp.jsp",
        dataType: 'json',
        complete: function(response, status) {
            data.addRow(response);
            chart.draw(data, options);
        }
    });
}

Error Encountered with Google Chart in Internet Explorer 8 - CODE70: Access denied format+en,default+en,ui+en,corechart+en.I.js, at line 86, position

Answer №1

Similar questions

The HTTP POST function of the controller is failing to trigger when attempting to use the AJAX method

Insert data into Ajax using a dialog box

"Create a set of arrays within an object that are duplicates four times, and then dynamically manipulate the first item within each array

Executing search bar capability through the use of AJAX and HTTP requests in JavaScript

Error message in Prestashop console: "jsonData is null, causing a TypeError"

javascript, contrasting functions and variables

Notify the chat when a new record is added to the database

What is the proper method for implementing a scrollable effect to the <v-bottom-sheet> element within the Vuetify framework?

Is there a problem with the alignment of

Despite reaching a video readystate of 4 in HTML5, the video still hangs and does not play smoothly

The behavior of the select menu is erratic when interacting with AJAX

Is Consistency Possible with CSS Transition Direction?

Guide on pre-selecting an option in a select control using Angular

Discover the method for retrieving the upcoming song's duration with jplayer

What is the best way to stringify a JavaScript object that contains a blob as its data?

What is the best way to incorporate an input id value (based on iteration) into a while loop that points to a specific piece of html located outside of the loop

Preset for Typescript in Babel 6

Animate a three.js object moving towards the front of the camera

Tips for efficiently handling multiple form inputs using PHP

What is the best way to utilize functions from different JavaScript files?