Code won't run in IE8

755
6
Jump to solution
05-03-2013 10:28 AM
JHayes
by
Occasional Contributor
Hello,

For some reason my code wil not run in our version of IE8.  I combined the Find and Identify code samples to make this app.  Both the Find and Identify samples will work by themselves in IE8, but not my code that combines the two.  Any help would be great since most of our employees use IE.

Here's the version info for IE:
[ATTACH=CONFIG]24011[/ATTACH]

And 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=8, IE=9, IE=10">     <!--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>Pending Case Files</title>      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/grid/resources/Grid.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/grid/resources/claroGrid.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">           <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }     </style>      <script>var dojoConfig = { parseOnLoad:true }</script>          <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>          <script>       dojo.require("esri.map");       dojo.require("dojox.grid.DataGrid");       dojo.require("dojo.data.ItemFileReadStore");       dojo.require("esri.tasks.find");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("dijit.form.Button");       dojo.require("esri.dijit.Popup");       dojo.require("esri.dijit.InfoWindow");              var findTask, findParams;       var map, center, zoom;       var grid, store;       var identifyTask, identifyParams;        function init() {                      //setup the popup window          var 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"));                  dojo.connect(grid, "onRowClick", onRowClickHandler);          center = [-123.000, 45.487];         zoom = 11;                  map = new esri.Map("map",          {            basemap: "streets",           center: center,           zoom: zoom,           infoWindow: popup,         });                    var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://mtbachelor.co.washington.or.us/arcgis/rest/services/joe/caseFiles_poly/MapServer",          {opacity:.7});          map.addLayer(landBaseLayer);          //Create Find Task using the URL of the map service to search         findTask = new esri.tasks.FindTask("http://mtbachelor.co.washington.or.us/arcgis/rest/services/joe/caseFiles_poly/MapServer/");          dojo.connect(map, "onLoad", function() {           //Create the find parameters           findParams = new esri.tasks.FindParameters();           findParams.returnGeometry = true;           findParams.layerIds = [0];           findParams.searchFields = ["CPO","NUMBER_KEY","FIRST_NAME"];           findParams.outSpatialReference = map.spatialReference;           console.log("find sr: ", findParams.outSpatialReference);           mapReady(map);         });       }        function doFind() {         //Set the search text to the value in the box         findParams.searchText = dojo.byId("caseFile").value;         findTask.execute(findParams,showResults);       }        function showResults(results) {         //This function works with an array of FindResult that the task returns         map.graphics.clear();         var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5]));          //create array of attributes         var items = dojo.map(results,function(result){           var graphic = result.feature;           graphic.setSymbol(symbol);           map.graphics.add(graphic);           return result.feature.attributes;         });                  //Create data object to be used in store         var data = {           identifier: "NUMBER_KEY",  //This field needs to have unique values.  Change to NUMBER_KEY after dissolved.           label: "NUMBER_KEY", //Name field for display. Not pertinent to a grid but may be used elsewhere.           items: items         };           //Create data store and bind to grid.         store = new dojo.data.ItemFileReadStore({ data:data });         var grid = dijit.byId('grid');         grid.setStore(store);          //Zoom back to the initial map extent         map.centerAndZoom(center, zoom);       }        //Zoom to the parcel when the user clicks a row       function onRowClickHandler(evt){         var clickedTaxLotId = grid.getItem(evt.rowIndex).NUMBER_KEY;         var selectedTaxLot;          dojo.forEach(map.graphics.graphics,function(graphic){           if((graphic.attributes) && graphic.attributes.NUMBER_KEY === clickedTaxLotId){             selectedTaxLot = graphic;             return;           }         });         var taxLotExtent = selectedTaxLot.geometry.getExtent().expand(7);         map.setExtent(taxLotExtent);       }       function mapReady(map)       {        dojo.connect(map,"onClick",executeIdentifyTask);        //create identify tasks and setup parameters         identifyTask = new esri.tasks.IdentifyTask("http://mtbachelor.co.washington.or.us/arcgis/rest/services/joe/caseFiles_poly/MapServer");                identifyParams = new esri.tasks.IdentifyParameters();        identifyParams.tolerance = 3;        identifyParams.returnGeometry = true;        identifyParams.layerIds = [0];        identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;        identifyParams.width  = map.width;        identifyParams.height = map.height;       }              function executeIdentifyTask(evt)        {         identifyParams.geometry = evt.mapPoint;         identifyParams.mapExtent = map.extent;                 var deferred = identifyTask.execute(identifyParams);          deferred.addCallback(function(response)            {                // response is an array of identify result objects               // Let's return an array of features.           return dojo.map(response, function(result)            {             var feature = result.feature;             feature.attributes.layerName = result.layerName;             if(result.layerName === 'Pending Case Files')             {              console.log(feature.attributes.NUMBER_KEY);              var template = new esri.InfoTemplate("", "Case Number: ${NUMBER_KEY} <br/>CPO: ${CPO} <br/> Class: ${CLASS} <br/> Type: ${SUB_TYPE} <br/>Comment Period Ends: ${EndCommentDate} <br/> <br/> Description: ${DESCRIPTION} <br/> <br/> Applicant: ${NAME}");              feature.setInfoTemplate(template);             }              return feature;           });         });                 // InfoWindow expects an array of features from each deferred         // object that you pass. If the response from the task execution          // above is not an array of features, then you need to add a callback         // like the one above to post-process the response and return an         // array of features.         map.infoWindow.setFeatures([ deferred ]);         map.infoWindow.show(evt.mapPoint);       }       dojo.ready(init);     </script>   </head>   <body class="claro">      <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:80px;">        Case File, CPO, or Applicant: <input type="text" id="caseFile" size="25"  value="CPO" />       <button data-dojo-type="dijit.form.Button"  data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>         Search</button>     </div>     <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit.layout.ContentPane" style="border:1px solid #000;"></div>    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">        <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'10px'">       <thead>         <tr>           <th field="NUMBER_KEY">Case File</th>           <th field="CPO">CPO</th>           <th field="NAME" width="100%">Applicant</th>          </tr>       </thead>      </table>       </div>   </body> </html>


Thanks!
0 Kudos
1 Solution

Accepted Solutions
MattLane
Occasional Contributor II
Older IE versions tend to be more strict on proper code formatting. Running your code through the very userful jslint(http://www.jslint.com/) returned these two issues

line 34 character 28 Unexpected ','. infoWindow: popup,
line 38 character 19 Unexpected '.'. {opacity:.7});

Try removing the comma after popup since it's the last in the object and add a 0 before the .7 and see if it works better.

View solution in original post

0 Kudos
6 Replies
JHayes
by
Occasional Contributor
This may be helpful.  It shows as far as the page will load in IE8.  BTW, it runs just fine in FF and Chrome.
[ATTACH=CONFIG]24013[/ATTACH]
0 Kudos
MattLane
Occasional Contributor II
Older IE versions tend to be more strict on proper code formatting. Running your code through the very userful jslint(http://www.jslint.com/) returned these two issues

line 34 character 28 Unexpected ','. infoWindow: popup,
line 38 character 19 Unexpected '.'. {opacity:.7});

Try removing the comma after popup since it's the last in the object and add a 0 before the .7 and see if it works better.
0 Kudos
BenFousek
Occasional Contributor III
Matt is right.

map = new esri.Map("map", 
{ 
  basemap: "streets",
  center: center,
  zoom: zoom,
  infoWindow: popup, //no commas on last object pair
});


Remove the comma.
0 Kudos
JHayes
by
Occasional Contributor
Thanks Guys! It runs like a champ now.

I'll be sure to use the jslint site in the future too.

Sincerely,
0 Kudos
BenFousek
Occasional Contributor III
Just so you know: Firefox, Chrome, etc will ignore that sort of thing, but IE won't. When an app breaks in IE it's almost always an extra comma or a missing semi-colon.
0 Kudos
JeffJacobson
Occasional Contributor III
Thanks Guys! It runs like a champ now.

I'll be sure to use the jslint site in the future too.

Sincerely,


If you are using Visual Studio 2010 or 2012 there is a handy JSLint add-in available.
I haven't used Aptana in a while, but I think it either had JSLint functionality built into it or had a JSLint add-in.
0 Kudos