IE8 TypeError Object doesn't support this property of method

Question

I encounter TypeError Object doesn't support this property of method msg on IE8.

I'm using protovis of javascript to draw nodes and links (ie, graphs)

The source is the following and I am ansolutely clueless.

Any hints?

<h2>Topology</h2>


<!--<script src="/static/media/js/jquery.tipsy.js"></script>-->
<script src="/static/media/js/tooltip.topology.js"></script>
<link rel="stylesheet" type="text/css" href="/static/media/css/tooltip.topology.css" />
<link rel="stylesheet" type="text/css" href="/static/media/css/tooltip.css" />

</script>

<script type="text/javascript+protovis">
/* ProtoVIS data */   

var data = {
    nodes: [

        {nodeValue:"31", nodeName:"00:0a:00:26:f1:3c:9d:40", group:"0", 


            nodeConnections:[{'target_datapath': '00:0a:00:26:f1:3d:a5:40', 'src_port': '21', 'target_port': '22'}, {'target_datapath': '0a:90:c0:91:34:35:ef:00', 'src_port': '23', 'target_port': '47'}, {'src_port': '22', 'target_datapath': '00:0a:00:26:f1:45:1d:c0', 'target_port': '21'}]

         },

        {nodeValue:"38", nodeName:"00:0a:00:26:f1:3d:a5:40", group:"0", 


            nodeConnections:[{'src_port': '22', 'target_datapath': '00:0a:00:26:f1:3c:9d:40', 'target_port': '21'}]

         },

        {nodeValue:"25", nodeName:"00:0a:00:26:f1:45:1d:c0", group:"0", 


            nodeConnections:[{'target_datapath': '00:0a:00:26:f1:45:3c:c0', 'src_port': '23', 'target_port': '21'}, {'target_datapath': '00:0a:00:26:f1:3c:9d:40', 'src_port': '21', 'target_port': '22'}]

         },

        {nodeValue:"20", nodeName:"00:0a:00:26:f1:45:3c:c0", group:"0", 


            nodeConnections:[{'src_port': '21', 'target_datapath': '00:0a:00:26:f1:45:1d:c0', 'target_port': '23'}]

         },

        {nodeValue:"1", nodeName:"0a:90:c0:91:34:35:ef:00", group:"0", 


            nodeConnections:[{'src_port': '47', 'target_datapath': '00:0a:00:26:f1:3c:9d:40', 'target_port': '23'}]

         },

        {nodeValue:"b3036750-27ab-49b6-8f69-abc4e75dcd58", nodeName:"smartx-node-1", group:"1", 

            nodeVms: ['VM6'],
            nodeVmInterfaces: [{'switch': '0a:90:c0:91:34:35:ef:00', 'port': '39', 'name': 'eth1'}]


         },

        {nodeValue:"e79fb114-7dd7-4164-8eb7-364afa303ee9", nodeName:"smartx-jeju", group:"1", 

            nodeVms: ['VMJeju1'],
            nodeVmInterfaces: []


         }

    ],
    links: [

        {source:1, target:0, value:"rsc_id_42-rsc_id_34"},

        {source:3, target:2, value:"rsc_id_23-rsc_id_29"},

        {source:4, target:0, value:"rsc_id_17-rsc_id_36"},

        {source:0, target:2, value:"rsc_id_35-rsc_id_28"},

        {source:0, target:4, value:"rsc_id_36-rsc_id_17"},

        {source:2, target:3, value:"rsc_id_29-rsc_id_23"},

        {source:0, target:1, value:"rsc_id_34-rsc_id_42"},

        {source:2, target:0, value:"rsc_id_28-rsc_id_35"},

        {source:5, target:4, value:"br_eth2:39"}


    ],
}


/* Useful functi ns*/

function get_node_info_formated(d){
    type = get_node_type(d);
        if(type == "openflow") {
            var nameString = "<b>Switch Datapath ID: "+d.nodeName+"</b><br><br>";
            if(d.nodeConnections.length>0){
                connectionsString = "<b>Connections:</b><br>";
                for (i=0;i<d.nodeConnections.length;i++){
                    connectionsString = connectionsString + "<b>·Port "+d.nodeConnections[i]['src_port']+"</b> to Switch "+d.nodeConnections[i]['target_datapath']+" at Port "+d.nodeConnections[i]['target_port']+"<br>";
                }
            }
            else{
                connectionsString = "";
            }
            return nameString+connectionsString ;
        } else if(type == "planetlab") {
            return nameString;
        } else if(type == "vtserver") {
            var nameString = "<b>Server: "+d.nodeName+"</b><br><br>";           
            if (d.nodeVms.length > 0){
                var vmListString = "<b>VMs ("+d.nodeVms.length+"):</b><br clear=left>";
                for (i=0;i<d.nodeVms.length;i++){
                    vmListString = vmListString + d.nodeVms[i];
                    if (i < d.nodeVms.length-1){
                        vmListString = vmListString + ", ";
                    }
                    else{
                        vmListString = vmListString +"<br clear = left><br clear=left>";
                    }
                }
            }
            else{
                vmListString =  "<b>No VMs in this Server </b></br><br clear=left>"  
            } 
            var vmInterfacesString = "<b>VMs Interfaces:</b><br clear=left>"
            for (i=0;i<d.nodeVmInterfaces.length;i++){
               vmInterfacesString = vmInterfacesString + "· "+"<b>"+d.nodeVmInterfaces[i]['name']+"</b> to Switch: "+d.nodeVmInterfaces[i]['switch']+ " at port: "+d.nodeVmInterfaces[i]['port']+"<br clear=left>"; 
             }
            return nameString + vmListString+vmInterfacesString;
        }


}

function get_node_type(d) {
    var of_groups_len = 1;
    var pl_groups_len = 0;
    var vt_aggs_len = 1;
    if(d.group < of_groups_len) {
        return "openflow";
    } else if(d.group < of_groups_len + pl_groups_len) {
        return "planetlab";
    } else if (d.group <(of_groups_len + pl_groups_len+vt_aggs_len)){
    return "vtserver"
    }else{
        return "unknown";
    }
}
/* On Click event functions */
function clickSwitchOrLink(d){
     /* if all are selected then unselect all */
        selected_len = $(":checkbox:checked.node_id_"+d.nodeValue).length
        all_len = $(":checkbox:.node_id_"+d.nodeValue).length
        if(selected_len == all_len) {
            $(":checkbox:checked.node_id_"+d.nodeValue).click();
        }
        /* else, select all */
        else {
            $(":checkbox:not(:checked).node_id_"+d.nodeValue).click();
        }
}

function clickServer(d){

}


/* Zooming routines */

cur_zoom = 1;

function zoomIn(zoom) {
        cur_zoom = cur_zoom + zoom;
    vis.transform(pv.Transform.identity.scale(cur_zoom).translate((Math.round(w/
cur_zoom) - w)/2, (Math.round(h/cur_zoom) - h)/2));
        vis.render();
        return false;
}

function zoomOut(zoom) {
    if(cur_zoom-zoom >0)
            cur_zoom = cur_zoom - zoom;
    else
        return false;
    vis.transform(pv.Transform.identity.scale(cur_zoom).translate((Math.round(w/
cur_zoom) - w)/2, (Math.round(h/cur_zoom) - h)/2));
        vis.render();
        return false;
}

function zoomReset() {
    // value is 0.99 due to Firefox bug when it is 1
   cur_zoom=0.99;
    vis.transform(pv.Transform.identity.scale(cur_zoom).translate((Math.round(w/
cur_zoom) - w)/2, (Math.round(h/cur_zoom) - h)/2)); 
    vis.render();
    return false;
}


/* Instansiation General parameters*/
var w = 740,
    h = 400,
    colors = pv.Colors.category20();

var vis;
vis = new pv.Panel().canvas('target') 
    .width(w)
    .height(h)
    .fillStyle("white")

var force = vis.add(pv.Layout.Force)
    .bound(true)
    .nodes(data.nodes)
    .links(data.links)
    .iterations(90);

force.springLength(100);
force.chargeConstant(0.1);
force.chargeTheta(0.9);

force.link.add(pv.Line)
    .strokeStyle(function(d, p) {
        /* if any resources on the link are selected */
        rsc_ids = p.value.split("-");
        if($(":checkbox#"+rsc_ids[0]+":checked").length) {
            return "#990000";
        }
        if($(":checkbox#"+rsc_ids[1]+":checked").length) {
            return "#990000";
        }
        return "black";
    });

//force.label.add(pv.Label);
    //.top();

/*
force.node.add(pv.Dot)
    .size(function(d) (50))
    .fillStyle(function(d) d.fix ? "brown" : colors(d.group))
    .strokeStyle(function() this.fillStyle().darker())
    .lineWidth(1)
    .title(function(d) d.nodeName)
    .event("mousedown", pv.Behavior.drag())
    .event("drag", force);
*/

//$("#selected_node_info").hide()

force.node.add(pv.Image)
    .url(function (d) {
        type = get_node_type(d);
        if(type == "openflow") {
            return "/static/media/img/switch-tiny.png";
        } else if(type == "planetlab") {
            return "/static/media/img/host-tiny.png";
        } else if(type == "vtserver") {
            return "/static/media/img/server-tiny.png";
        } else {
            return "/static/media/img/inactive.png";
        }
    })
    .def("i", -1)
    .width(20)
    .height(20)
    .fillStyle(function (d) {
    if (this.i() == this.index)
        return "brown";
        type = get_node_type(d);
        if(type == "openflow") {
            return "#999999"; 
        } else if(type == "planetlab") {
            return "#333333"; 
        } else if(type == "vtserver") {
            return "#006699"; 
        } else {
            return "#CCCCCC"; 
        }
    }/*function(d) {
        if (this.i() == this.index) {
            return "brown";
        }
    if(get_node_type(d)=="openflow")
            return "#999999"; 
    else
        return "#CCCCCC";
    }*/)
    .strokeStyle(function(d) {
        /* if any ports are selected */
        if($(":checkbox:checked.node_id_"+d.nodeValue).length) {
            return "#990000";
        }
        return this.fillStyle().darker();
    })
    .cursor("pointer")
//    .title(function(d) d.nodeName)
    .event("mousedown", pv.Behavior.drag())
    .event("mouseover", function(d) {
//      pv.Behavior.tipsy({ gravity: "w", fade: true })
        /* display info on the selected node in the div */ 
        type = get_node_type(d);
        desc = "Unknown"
        if(type == "openflow") {
            desc = "OpenFlow switch";
        } else if(type == "planetlab") {
            desc = "PlanetLab node";
        } else if(type == "vtserver") {
            desc = "Virtualized server";
        }
        tooltip.show(get_node_info_formated(d));

        $("#selected_node_info").html("Selected " + desc + ": " + d.nodeName);
        $("#selected_node_info").show();
        /* store the info about the selected node and highlight it */
        this.i(this.index);
    })
    .event("click", function(d) {
        type = get_node_type(d);
        if(type == "openflow") {
        clickSwitchOrLink(d);
        } else if(type == "planetlab") {
            return; 
        } else if(type == "vtserver") {
            clickServer(d); 
        }
    })
    .event("mouseout", function() this.i(-1))
    .event("mouseout", function() {
            tooltip.hide();
        })
    .event("drag", force)
    //.anchor("bottom").add(pv.Label).text(function(d) d.nodeName);

vis.render();

</script>

<div style="border:1px solid #CCCCCC;padding:0px;overflow:hidden;margin-bottom:20px;">
<div id="selected_node_info" style="height:14px;background-color:#DDDDDD;">Tip: Move cursor over the icons to get extra information...</div>

<div id="target">
</div>
<div style="width:100%;text-align:right;padding-top:2px;margin-top:2px;background-color: #333333">

    <a href="#" onClick="return zoomIn(0.25)"/><img src="/static/media/img/zoomin.png" style="height:16px;text-align:middle"/></a>&nbsp;
   <a href="#" onClick="return zoomOut(0.5)"/><img src="/static/media/img/zoomout.png" style="height:16px;"/></a>&nbsp;
   <a href="#" onClick="return zoomReset()"/><img src="/static/media/img/zoom.png" style="height:16px;"/></a>&nbsp;
</div>
</div>

Answer 1

The script type text/javascript+protovis" is not a valid MIME type. It causes IE 8 (and other browsers I suspect) to completely ignore the content of the related script block, so the error must be coming from either topology.js or something else in the page that is trying to access an identifier declared or initialised in the ignored script.

Error messages in IE are accompanied by a line number. Please advise what that is, where it's from and identify where in your script or HTML file it references with a suitable placed comment.