AnsweredAssumed Answered

dojo undefined in IE

Question asked by jpacosta on Mar 22, 2013
I have a small app that is running on Amazon EC2 in VPC. From my desktop IE gives me an error dojo undefined, and no features draw. the only thing that shows up is the name of the app in window tab. But everything works great with FireFox. I really need to get this app running on IE, but I cant figure out the issue. Im using the feature hover sample with a few modifications, but when I look and compare the dojo calls everything looks fine. The forum has lots of topics regarding this error but most are from previous years and versions. I ran it through JSlint, but the only error I got back was "Expected an identifier and instead saw '<!'." on <!DOCTYPE html>


Here's my code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Carlsbad Traffic Conditions</title>
 
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
 
    <script type="text/javascript">
     // type="text/javascript" to <script> for dojo undefined error on kvons pc
   dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dijit.TooltipDialog");
      dojo.require("dojo.number");
   
   //required to format date in popup
   dojo.require("dojo.date.locale");
   
   //add Bing map
   dojo.require("esri.virtualearth.VETiledLayer");
      
      var map, dialog, veTileLayer;
   
 function init(){
   
   var initExtent = new esri.geometry.Extent({
     "xmin": -13073942.51,
     "ymin": 3898938.00,
     "xmax": -13039545.85,
     "ymax": 3921869.10,
     "spatialReference": {"wkid":102100}
   });  
    
      map = new esri.Map("mapDiv",{ 
              extent: initExtent
      }); 
    //map = new esri.Map("mapDiv");
    //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service     
        //var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); 
        //map.addLayer(basemap);
    
  //Create Bing map to add to map
  veTileLayer = new esri.virtualearth.VETiledLayer({
    bingMapsKey: 'Aq6wyAehkpyMoyml9DNUcKN3YDVZ5oRbNwK0O--vJ2WJ7fAb0pC7VBX1VeRA6U9V',
       mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD
           
     });
  map.addLayer(veTileLayer);
    
  esri.config.defaults.io.proxyUrl = "http://50.18.218.190/proxypage_net/proxy.ashx";
     esri.config.defaults.io.alwaysUseProxy = true;
   
  var dynamicTraffic = new esri.layers.ArcGISDynamicMapServiceLayer("http://50.18.218.190/arcgis/rest/services/publicAGS/trafficStatus/MapServer"); 
        map.addLayer(dynamicTraffic);
   
        var carlsbadTraffic = new esri.layers.FeatureLayer("http://50.18.218.190/arcgis/rest/services/publicAGS/trafficStatus/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
  });
        
  carlsbadTraffic.setDefinitionExpression("1=1");

        //var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));
    var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([168,0,0,0.1]),3);
        carlsbadTraffic.setRenderer(new esri.renderer.SimpleRenderer(symbol));
        map.addLayer(carlsbadTraffic);

        map.infoWindow.resize(225,125);

        //close the dialog when the mouse leaves the highlight graphic
        dojo.connect(map, "onLoad", function(){
          map.graphics.enableMouseEvents();
          dojo.connect(map.graphics,"onMouseOut",closeDialog);        
        });
                
        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        dojo.connect(carlsbadTraffic, "onMouseOver", function(evt) {
    closeDialog();
       showDialog(evt);  
        });
      }
   
    function showDialog(evt) {  
     dialog = new dijit.TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 225px; font: normal normal normal 8pt Helvetica;z-index:100"
          });
          dialog.startup();
    
    var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,0,1]),4);
    
    var t = "<b>${ProjectName}</b><hr><font color=#5C5C5C>Road: </font>${Road}<br/>"
                + "<font color=#5C5C5C>Start: </font>${StartDate:DateFormat(selector: 'date', fullYear: true)}<br/>"
                + "<font color=#5C5C5C>End: </font>${EndDate:DateFormat(selector: 'date', fullYear: true)}<br/>"
                + "<font color=#5C5C5C>Phone: </font>${ContactPhone}<br/>"
       + "<font color=#5C5C5C>Email: </font>${ContactEmail}<br/>"
             + "<font color=#5C5C5C>Traffic Impact: </font>${TrafficImpact}<br/>"
          + "<font color=#5C5C5C>Type: </font>${Type}<br/>"
    + "<font color=#5C5C5C>Addl Info: </font>${AddlInfo}<br/>";
 
          var content = esri.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
          map.graphics.add(highlightGraphic);
          
          dialog.setContent(content);
    
    //dojo.style(dialog.domNode, "opacity", 0.85);
    dojo.style(dialog.domNode);
    
    dijit.popup.open({popup: dialog, x:evt.pageX,y:evt.pageY});
   }

    function closeDialog() {
          map.graphics.clear();
    map.infoWindow.onHide();
        var widget = dijit.byId("tooltipDialog");
        if (widget) {
             widget.destroy();
        }
      }
   
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv"></div>
  </body>
</html>

Outcomes