topic Re: IE8 error in ArcGIS JavaScript Maps SDK Questions

IE8 error

DavidMurray — Wed, 03 Aug 2011 12:50:34 GMT

Hi,

I am currently developing an application which displays the map without errors in Firefox, Safari, and Chrome, but when I open it in IE8 I get the following message:

Webpage error details

Message: Invalid argument.
Line: 14
Char: 56639
Code: 0
URI: http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4

I have added the <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> at the top of the ASP file so compatibility should be ok.

Any ideas on what the cause maybe?

Mnay thanks
David

Re: IE8 error

derekswingley1 — Wed, 03 Aug 2011 21:56:14 GMT

IE's JS errors are notoriously cryptic/bad. Can you post your code?

Re: IE8 error

DavidMurray — Sat, 11 Dec 2021 20:23:03 GMT

Hi Swingley,

Thank you for replying. Here is the code within the initialise function:

function init() {

 //create extent and set spatial ref use factory code 27700 for BNG
 var urlObject = esri.urlToObject(document.location.href);
 xMin = Number(urlObject.query.StartX) - 1000;
 yMin = Number(urlObject.query.StartY) - 1000;
 xMax = Number(urlObject.query.StartX) + 1000;
 yMax = Number(urlObject.query.StartY) + 1000;
//alert(xMin + ", " + yMin + ", " + xMax + ", " + yMax);

 var startExtent = new esri.geometry.Extent({"xmin":xMin,"ymin":yMin,"xmax":xMax,"ymax":yMax,"spatialReference":{"wkid":27700}});

 //get url containing initial parameters
 //map = new esri.Map("map",{extent:startExtent});
 map = new esri.Map("map",{extent:startExtent, slider:true, logo:false,infoWindow:popup});
 esriConfig.defaults.map.slider = { left:"48px", top:"120px", width:null, height:"200px" };
 
//set map extent and centre point
 popup=new esri.dijit.Popup({
         fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
        }, dojo.create("div"));
 
//add base and aerial mapping layers
 maplayer = new esri.layers.ArcGISTiledMapServiceLayer(mapServiceURL);
 aeriallayer=new esri.layers.ArcGISTiledMapServiceLayer(aerialServiceURL);
 map.addLayer(maplayer);
 map.addLayer(aeriallayer);
 
//set default visibility of aerial mapping to false
 aeriallayer.setVisibility(false);
 
//add custom popup
 dojo.place(popup.domNode,map.root);
 dojo.addClass(map.infoWindow.domNode, "sccTheme");
 
//capture extent change event to display zoom level and copyright text
 dojo.connect(map,"onExtentChange", function(extent,delta, outLevelChange, outLod){
  dojo.byId("mapscale").innerHTML="<b style='background-color:#C9E0D8'>scale: 1:" + outLod.scale + "</b>";
  maplayer.refresh;
  setCopyright(outLod.scale);
  mapscale=outLod.scale;
 });
 
//create and add marker layer
 markerLayer = new esri.layers.GraphicsLayer();
 map.addLayer(markerLayer);
 
//create marker symbol and add initial marker to mapp
 symbol = new esri.symbol.PictureMarkerSymbol('./images/defectmarker.png', 30,60).setOffset(0,30)
 markerLayer.add(new esri.Graphic(pt,symbol));
 
//set centre coord and zoom level
 map.centerAt(new esri.geometry.Point(urlObject.query.StartX,urlObject.query.StartY));
 dojo.connect(map,"onLoad",function(){
  
//setCopyright(urlObject.query.Scale);
  if(urlObject.query.Scale=="1000"){
   map.setLevel(8);
  }else if(urlObject.query.Scale=="2000"){
   map.setLevel(7);
  }else if(urlObject.query.Scale=="4000"){
   map.setLevel(6);
  }else if(urlObject.query.Scale=="8000"){
   map.setLevel(5);
  }
 });
 
        qTaskAuth=new esri.tasks.QueryTask(mapServiceURL+"/1");
 qAuth=new esri.tasks.Query();
 qAuth.returnGeometry=false;
 qAuth.outFields=["WEBSITE","NAME","AREA_DESC"];

 //create query task task for buffer layer 
 qTaskBuffer = new esri.tasks.QueryTask(mapServiceURL+"/2");
 qBuffer = new esri.tasks.Query();
 qBuffer.returnGeometry=false;
 qBuffer.outFields=["ROADNAME","VILLAGE","POSTTOWN","ESU","ROAD_TYPE","USRN","ROADCLASS","TRUNK","SPNTYPE"];

 dojo.connect(map,"onClick",clickEventHandler);

}

Thanks,
David

Re: IE8 error

derekswingley1 — Sat, 11 Dec 2021 20:23:06 GMT

I can't point to one specific thing in your code but here are a few to check:
-make sure your query string has all the parameters you're using to get an extent
-define popup before you reference it in your map constructor
-why are you setting the slider width to null?
-are mapServiceURL and aerialServiceURL defined when this function runs?
-you can specify your aerial layer as not visible when you define it using the optional options object:

aeriallayer=new esri.layers.ArcGISTiledMapServiceLayer(aerialServiceURL, { visible: false });

Re: IE8 error

DavidMurray — Thu, 04 Aug 2011 15:04:12 GMT

Thank you for spending some time on topic. I have been through the points you listed and checked or amended my code, but still getting the same IE javascript error. I since debugged the site using the IE developer tools (probably should have done this before posting) and the debug stops at the following code:

return op?d._setOpacity(n,_1c0):n.style[_1bf]=_1c0;

I know in the map service I am calling there is a layer containing a series of images that have a transparency. Maybe this could be the cause of the error?

Unfortunately my colleague who administrates the map services is on holiday until next, so I can't test my theory just yet 😞

Thanks
David

Re: IE8 error

KellyHutchins — Sat, 11 Dec 2021 20:23:09 GMT

Along with the things Derek mentioned,here are a few more things to check. Firefox and Chrome will deal with things like trailing commas and missing semi-colons at the end of lines but IE will not. In your posted code (around line 54) this line is missing a semi-colon at the end:

symbol = new esri.symbol.PictureMarkerSymbol('./images/defectmarker.png', 30,60).setOffset(0,30)

JSLint is a good tool to use to identify potential issues. The tool will point out lots of issues in the code including missing semicolons and trailing commas.
http://www.jslint.com/

Re: IE8 error

DavidMurray — Sat, 11 Dec 2021 20:23:11 GMT

Hi Kelly,

I have added the missing semi-colon and checked the code you any other syntax errors, but still getting the same error, it seems to be crashing when I try to initialise the map object.

var startExtent = new esri.geometry.Extent({"xmin":480000, "ymin":131000, "xmax":544000, "ymax":176000, "spatialReference":{"wkid":27700}});

map = new esri.Map("map",{extent:startExtent, slider:true, logo:false,infoWindow:popup});

I have tried using just

map = new esri.Map("map");

and still get the map will not display in IE8.

Any suggestions?

Many thanks
David

Re: IE8 error

KellyHutchins — Sat, 11 Dec 2021 20:23:14 GMT

Can you zip up your whole app and post it?

Hi Kelly,

I have added the missing semi-colon and checked the code you any other syntax errors, but still getting the same error, it seems to be crashing when I try to initialise the map object.
var startExtent = new esri.geometry.Extent({"xmin":480000, "ymin":131000, "xmax":544000, "ymax":176000, "spatialReference":{"wkid":27700}});

map = new esri.Map("map",{extent:startExtent, slider:true, logo:false,infoWindow:popup});
I have tried using just
map = new esri.Map("map");
and still get the map will not display in IE8.

Any suggestions?

Many thanks
David

Re: IE8 error

AxelSchaefer — Fri, 12 Aug 2011 07:56:02 GMT

My 2 cent: Check if all variables are declared with var. Sometime IE has side-effects if the declaration is missing. If you have declared your map object somewhere else, check if you did it with "var map...". If you once have declared it, don't do it a second time.

HTH. Axel

Re: IE8 error

DavidMurray — Mon, 15 Aug 2011 12:25:34 GMT

I may have isolated the cause.

I copied the code for the World Topographic sample into a blank page and it worked in IE7 (compatablity mode), IE8 and IE9. When I replaced the URL with the map service I am using and initial extent values it worked in FF, Chrome, and Safari but not IE. So it's possible a setting or layer in my map service is causing the map not to display in IE. One of the layers has a transparency effect but all the others contain map tiles (jpg format). Has anyone come across a map service not displaying because of the settings or the data within it?

I am going to create a simple map service with just one layer or map data and see if that works. I'll update the post once this has been done.

Thanks
David

Re: IE8 error

DavidMurray — Fri, 02 Sep 2011 07:24:32 GMT

After some testing and head scratching the error was being caused by a <div> tag in the html. Not sure why it was causing an issue but once removed the site now works in IE.

Thank you to everyone for your advice.

David

Re: IE8 error

MichaelGinzburg — Sun, 25 Sep 2011 14:38:21 GMT

Hello David!

I have a similar problem.
Where was your <div> located?
Can you post this part of the HTML?

Thanks!

Re: IE8 error

DavidMurray — Sat, 11 Dec 2021 20:23:17 GMT

It was the <div> located before <div> containing the map. Also there was a transparent style attached to the <div> which may have caused the problem.

Here is HTML code in my page:

   <div id="resultsContainer" style="display: block; position:absolute; width:750px;left:3px;top:160px;z-index:999999;padding:0px;background:url(images/resultsBG.png) repeat;"> 
   
   <!--<div id="resultsHeader" style="display: block; position:absolute; width:100%;left:0px;top:2px;height:20px;z-index:999999;padding:0px;background:url(images/headerbar.png) repeat;">
   <img src='images/cancel.jpg' alt='Close Results' style='position:absolute;right:10px;top:3px;cursor:pointer;' onclick='closeResults();'/>
   </div>-->
   
   </div>
    
   <div id="map"></div>
   <div id="panbuttoncontrols" style="position:absolute;left:10px;top:170px;"  >
    <img id="panup" style="position:absolute;left:34px;top:7px" src="images/panUp_off.png" onClick="javascript:panMap('n')" onMouseOver="togglePanImage('panUp_on')" onMouseOut="togglePanImage('panUp_off')" >
    <img id="panright" style="position:absolute;left:58px;top:42px" src="images/panRight_off.png" onClick="javascript:panMap('e')" onMouseOver="togglePanImage('panRight_on')" onMouseOut="togglePanImage('panRight_off')" >    
    <img id="pandown" style="position:absolute;left:34px;top:62px" src="images/panDown_off.png" onClick="javascript:panMap('s')" onMouseOver="togglePanImage('panDown_on')" onMouseOut="togglePanImage('panDown_off')" >
    <img id="panleft" style="position:absolute;left:0px;top:42px" src="images/panLeft_off.png" onClick="javascript:panMap('w')" onMouseOver="togglePanImage('panLeft_on')" onMouseOut="togglePanImage('panLeft_off')" >    
   </div>

Hope this helps

David

Re: IE8 error

BlairShaman — Thu, 19 Apr 2012 21:27:28 GMT

For what it's worth, I was getting the same error with the following line in IE 8:
[INDENT]map.infoWindow.resize(135, 35);[/INDENT]

I changed it to this to fix it:
[INDENT]dojo.style(dojo.byId('map_infowindow'), "height", "35px");[/INDENT]
[INDENT]dojo.style(dojo.byId('map_infowindow'), "width", "135px");[/INDENT]

Blair

Re: IE8 error

AndrewBrown1 — Thu, 20 Dec 2012 14:22:59 GMT

I'm running into a similar issue. The weird thing is that this error only occurs when the page is loaded from the website. If I run the code locally on my machine, and connect via localhost, the page loads and no errors are thrown.

Once the page is uploaded to the web machine and I try to view it from my browser, I receive these errors on IE's console:

'this._div' is null or not an object
Error: Invalid argument.
Error: Invalid argument.

The map layers never load, but the basic layout does. I checked all of my <div> tags and there aren't any extras, nor are any missing.

What's the best method to try and figure this out? I've been using JSLint to find any errors, including missing semicolons, but using IE's debugger is a pain.

Thanks.