PHP Script and HTML - This works in Firefox and Chrome, but not IE

Question

below is what I'm attempting to use for my site, this php page shows up without any issues in Firefox, and Chrome.

For some reason it doesn't appear to be working up in IE(tested on 8 and 9) I dont really know what is wrong here.

The error I am getting in IE8 is "Not a valid 2d Array" this appears to be coming from the google hosted .js

I'm wondering why this is occuring in IE8 only and not Chrome or Firefox?

<?php
  // Top snippet of code comes from:
  // www.ip2nation.com/ip2nation/Sample_Scripts/Output_Full_Country_Name
  // and adapted as necessary.

    $server   = 'sanitized'; // MySQL hostname
    $username = 'sanitized'; // MySQL username
    $password = 'sanitized'; // MySQL password
    $dbname   = 'sanitized'; // MySQL db name

    // 1 address per line, or feed with a DB if you're feeling clever.        
    $lines = file('blocklist.txt'); 

    $db = mysql_connect($server, $username, $password) or die(mysql_error());
          mysql_select_db($dbname) or die(mysql_error());

    $bans = array();
    foreach ($lines as $lnum => $line) 
    {
            $l=rtrim($line);
            $sql = 'SELECT 
                        c.country 
                    FROM 
                        ip2nationCountries c,
                        ip2nation i                                                                                                                                             
                    WHERE                                                                                                                                                       
                        i.ip < INET_ATON("'.$l.'")                                                                                                                              
                        AND                                                                                                                                                     
                     c.code = i.country                                                                                                                                         
                    ORDER BY                                                                                                                                                    
                    i.ip DESC                                                                                                                                                   
                    LIMIT 0,1';                                                                                                                                                 
            list($cc) = mysql_fetch_row(mysql_query($sql));                                                                                                                     

            if ($cc != "")                                                                                                                                                      
                    if(empty($bans["$cc"]))                                                                                                                                     
                    {                                                                                                                                                           
                            $bans["$cc"] = 1;                                                                                                                                   
                    }                                                                                                                                                           
                    else                                                                                                                                                       
                    {                                                                                                                                                           
                            $bans["$cc"]++;                                                                                                                                     
                    }                                                                                                                                                           

    }                                                                                                                                                                           

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see     www.w3.org">
<script type='text/javascript' src='https://www.google.com/jsapi'>
</script>
<script type='text/javascript'>

 google.load('visualization', '1', {'packages': ['geochart']});                                                                                                                 
 google.setOnLoadCallback(drawRegionsMap);                                                                                                                                      

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
    ['Country','Blocks'],
  <?php
    foreach ($bans as $key => $value)
                print"['$key', $value],\n";
    ?>
    ]);

    var options = {
                    backgroundColor : '#baecfd',
                    colors : ['#FFFFFF', '#FF0000']
                    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
};
</script>
<title></title>

<style type="text/css">
 div.c1 {width: 900px; height: 500px;}
</style>
</head>
<body>
<div id="chart_div" class="c1"></div>
</body>
</html>

The code when compiled in IE is:

<html>                                                                                                                                                                              
  <head>                                                                                                                                                                            
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>                                                                                                     
    <script type='text/javascript'>                                                                                                                                                 
     google.load('visualization', '1', {'packages': ['geochart']});                                                                                                                 
     google.setOnLoadCallback(drawRegionsMap);                                                                                                                                      

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
    ['Country','Blocks']
  ['Japan', 11]
['United States', 45]
['Argentina', 1]
['Brazil', 1]
['Bosnia and Herzegovina', 1]
['Germany', 4]
['France', 2]
['Russia', 5]
['China', 24]
['Thailand', 1]
['New Zealand (Aotearoa)', 1]
['Turkey', 1]
['Korea (South)', 6]
['Panama', 2]
['Taiwan', 6]
['Canada', 14]
['Luxembourg', 1]
['United Kingdom', 1]
['Philippines', 1]
['Singapore', 3]
['Switzerland', 2]
['Hong Kong', 2]
    ]);

    var options = {
                    backgroundColor : '#25383c',
                    colors : ['#FFFFFF', '#FF0000']
                    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

The code when compiled in Chrome is:

<html>                                                                                                                                                                              
  <head>                                                                                                                                                                            
<script type='text/javascript' src='https://www.google.com/jsapi'></script>                                                                                                     
<script type='text/javascript'>                                                                                                                                                 
 google.load('visualization', '1', {'packages': ['geochart']});                                                                                                                 
 google.setOnLoadCallback(drawRegionsMap);                                                                                                                                      

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
    ['Country','Blocks'],
  ['Japan', 11],
['United States', 45],
['Argentina', 1],
['Brazil', 1],
['Bosnia and Herzegovina', 1],
['Germany', 4],
['France', 2],
['Russia', 5],
['China', 24],
['Thailand', 1],
['New Zealand (Aotearoa)', 1],
['Turkey', 1],
['Korea (South)', 6],
['Panama', 2],
['Taiwan', 6],
['Canada', 14],
['Luxembourg', 1],
['United Kingdom', 1],
['Philippines', 1],
['Singapore', 3],
['Switzerland', 2],
['Hong Kong', 2],
    ]);

    var options = {
                    backgroundColor : '#25383c',
                        colors : ['#FFFFFF', '#FF0000']
                        };

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Presents a white page in IE, but presents a world map as it should in Firefox and Chrome, no errors in IE just a blank white page. — user1848130, Nov 23 '12 at 17:20
Can you also paste the compiled code, to make it easier to understand. This isn't a PHP error, it's javascript, and will be easier to debug without the PHP — rickyduck, Nov 23 '12 at 17:27
I looked at the page source in both Chrome and IE, and IE appears to ignore those commas, but Chrome does not. — user1848130, Nov 23 '12 at 17:51

score 5 · Accepted Answer · edited May 23 '17 at 11:48

var data = google.visualization.arrayToDataTable([
    ['Country','Blocks'],
  <?php
    foreach ($bans as $key => $value)
                print"['$key', $value],\n";
    ?>
    ]);

Will return:

var data = google.visualization.arrayToDataTable([
    ['key1', value1],
    ['key2', value2],
]);

The extra comma at the end of the second one will break it. See this:

http://www.openjs.com/articles/ie/array_comma_problem.php

var sample = {
    'hello':'world',
    'foo':'bar', //This is 'the last comma'
}

alert("Hello World");

http://jsfiddle.net/A5VMW/

In most browsers, the final ',' is optional - its presence will not make any difference in the script. But IE will decide to do something that defies explanation - it just ignores everything after that bit of code. The 'Hello World' alert will never be seen in an IE browser.

Also see: https://stackoverflow.com/a/5139395/504299 :

Historically speaking, ES3 disallowed having a trailing comma when defining an object literal. This was one thing that IE did get right, but most other bowser vendors went south and did allow the trailing comma. So technically it was a bug in the other browsers that supported it.

When I remove that extra comma it presents a white page in all 3 browsers. — user1848130, Nov 23 '12 at 17:44
I have just done a test on JSfiddle - with the comma: http://jsfiddle.net/nPUER/ - without the comma: http://jsfiddle.net/nPUER/1/ and tested it in all browsers. the former works in everything but IE8, the latter works in every single one — rickyduck, Nov 26 '12 at 09:09
Ahhh, I see the problem now, thanks. That looks like the solution for sure, now to figure out how to remove the last trailing comma in the line.... — user1848130, Nov 26 '12 at 19:16

PHP Script and HTML - This works in Firefox and Chrome, but not IE

1 Answers1