dojo.create("div") does not work with IE8

691
4
06-23-2011 02:39 PM
EricBregant1
New Contributor
dojo.create("div") does not work with IE8. Does anyone know a way around this problem?

I need my website to work in all browsers but IE hates the dojo stuff.
0 Kudos
4 Replies
KellyHutchins
Esri Frequent Contributor
I ran a quick test using one of the samples that uses dojo.create and it worked for me in IE8.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/widget_popupfl.html

Can you post the code snippet that isn't working or more details about the error or problems you are seeing in IE?
0 Kudos
TimothyWilcoxon
New Contributor
this example shows up blank on IE8
http://help.arcgis.com/EN/webapi/javascript/arcgis/demos/widget/widget_infowindowchart.html
here is our basic code that does not work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>Info Window with Chart</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css">

    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{padding:0;}
    </style>

    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>

    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dojo.number");
      dojo.require("dijit.layout.TabContainer");



      var map;

      function init() {
      var initialExtent = new esri.geometry.Extent({"xmin":-12464806.28,"ymin":3997513.10,"xmax":-12460506.70,"ymax":4000379.49,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", { extent: initialExtent});

        //Add the world imagery 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);

   var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://1XX.XX.169.197/ArcGIS/rest/services/Lone/Parcels/MapServer");
        map.addLayer(landBaseLayer);
 
        var template = new esri.InfoTemplate();
        //flag icons are from http://twitter.com/thefella, released under creative commons
        template.setTitle("<b>${APN}</b>");
        template.setContent(getWindowContent);

        var parcelsLayer= new esri.layers.FeatureLayer("http://1XX.XX.169.197/ArcGIS/rest/services/Lone/Parcels/MapServer/0",{
         infoTemplate:template,
         outFields:["*"]
        });
 
        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
new dojo.Color([255,0,0,0.0]), 2),new dojo.Color([255,255,0,0.0]));
  parcelsLayer.setRenderer(new esri.renderer.SimpleRenderer(symbol));

        map.addLayer(parcelsLayer);
        map.infoWindow.resize(300,275);
        //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
        //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
        var resizeTimer;
        dojo.connect(map, 'onLoad', function(theMap) {
          dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout( function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });
      }

      function getWindowContent(graphic) {
        //make a tab container
        var tc = new dijit.layout.TabContainer({
         style:"width:100%;height:100%;",
        }, dojo.create("div"));

        //display attribute information
        var cp1 = new dijit.layout.ContentPane({
          title: "Details",
          content: "<b>Plan Status: </b>" + graphic.attributes.PlanStatus +
          "<br /><b>Version: </b>" + graphic.attributes.Version +
    "<br /><b>Lot #: </b>" + graphic.attributes.LotNumber +
    "<br /><b>APN: </b>" + graphic.attributes.APN +
    "<br /><b>Phase: </b>" + graphic.attributes.Phase_No +
    "<br /><b>Product Size: </b>" + graphic.attributes.ProductSz +
    "<br /><b>Lot SqFt: </b>" + graphic.attributes.Shape_Area

        });
        tc.addChild(cp1);


        var cp2 = new dijit.layout.ContentPane({
          title: "PDF's",
         content: "<a target='_blank' href='http://en.wikipedia.org/wiki/" + graphic.attributes.APN + "'>Web PDF</a><br /><a target='_blank' href='http://en.wikipedia.org/wiki/" + graphic.attributes.APN + "'>Local PDF</a><br /><a target='_blank' href='http://en.wikipedia.org/wiki/" + graphic.attributes.APN + "'>Web CAD</a>"

        });

        tc.addChild(cp2);

          var cp3 = new dijit.layout.ContentPane({
          title: "Related Plans",
         content: "<b>Onsite Paving:</b>" +
     "<br><b>Onsite Paving:</b>"

        });

        tc.addChild(cp3);


        return tc.domNode;
      }

      dojo.addOnLoad(init);
    </script>
  </head>

  <body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
      </div>
    </div>
  </body>

</html>
0 Kudos
KellyHutchins
Esri Frequent Contributor
There is an extra comma in the sample after setting the style. If you replace the code in the sample with this the map will display.

//make a tab container
var tc = new dijit.layout.TabContainer({
style:"width:100%;height:100%;"
}, dojo.create("div"));
0 Kudos
TimothyWilcoxon
New Contributor
Thank you so much, The WORKED!!! I am so excited
0 Kudos