topic Re: Javascript API Editor Works in Google Chome but not in IE 9. in ArcGIS JavaScript Maps SDK Questions

Javascript API Editor Works in Google Chome but not in IE 9.

ThomasRoussell — Mon, 17 Jun 2013 13:59:22 GMT

I have a simple Javascript API that uses the editor widget. It works fine in Google Chome but in IE 9 I cannot create new features, update attributes, or add attachments. Why would this be?

Re: Javascript API Editor Works in Google Chome but not in IE 9.

JeffJacobson — Mon, 17 Jun 2013 16:26:42 GMT

I have a simple Javascript API that uses the editor widget. It works fine in Google Chome but in IE 9 I cannot create new features, update attributes, or add attachments. Why would this be?

My guess would be that you are using some JavaScript function that has not yet been implemented in IE 9.

Re: Javascript API Editor Works in Google Chome but not in IE 9.

ThomasRoussell — Sun, 12 Dec 2021 07:18:13 GMT

Seems strange. I am using the "Editor Widget With Simple Toolbar" Code from the Samples.
IE 9 works when I use Esri's Live Demo but not when I put my slightly modified code on our server but Chrome does work.
Here is the 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, 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>Edit Water Crossings</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />
    <style>
      html,body{height:100%;width:100%;margin:0;overflow:hidden;}
      #map{
        padding:0;
      }
      #header{
        font-size:14pt;
        padding-left:20px;
        padding-top:4px;
        color:#660000;
      }

      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}

      .esriAttributeInspector {height:500px; width: 450px;}
      .esriAttributeInspector .atiField {width: 250px;}

    </style>
    
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
    <script>
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
        dojo.require("esri.dijit.editing.Editor-all");

        var map;

        function init() {

            var startExtent = new esri.geometry.Extent(2300000, 7300000, 2830000, 7700000, new esri.SpatialReference({ wkid: 2036 }));

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

            dojo.connect(map, "onLayersAddResult", initEditor);

            var baseMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://edmsnt007:6080/arcgis/rest/services/Standard_Base_Map_Service/MapServer");
            map.addLayer(baseMapLayer);

            var watercourse = new esri.layers.FeatureLayer("http://edmsnt007:6080/arcgis/rest/services/Watercross_Edit/FeatureServer/0", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });

            map.addLayers([watercourse]);

        }

        function initEditor(results) {
            var templateLayers = dojo.map(results, function (result) {
                return result.layer;
            });
            var templatePicker = new esri.dijit.editing.TemplatePicker({
                featureLayers: templateLayers,
                grouping: true,
                rows: 'auto',
                columns: 3,
            }, 'templateDiv');
            templatePicker.startup();

            var layers = dojo.map(results, function (result) {
                return { featureLayer: result.layer };
            });
            var settings = {
                map: map,
                templatePicker: templatePicker,
                layerInfos: layers,
                toolbarVisible: true
            };

            var params = { settings: settings };
            var myEditor = new esri.dijit.editing.Editor(params, 'editorDiv');

            map.infoWindow.resize(500, 500);

            myEditor.startup();
        }

        dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
      <div data-dojo-type="dijit.layout.ContentPane" id="header" data-dojo-props="region:'top'">
        Watercross Edit
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
        <div id="templateDiv"></div>
        <div id="editorDiv"></div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'"></div>
    </div>
  </body>
</html>

Re: Javascript API Editor Works in Google Chome but not in IE 9.

ShreyasVakil — Mon, 17 Jun 2013 19:22:02 GMT

I guess this is a CORS issue. Most of the new browsers are CORS enabled.

As you can see IE9 is partially supported and IE10 fully supports this. I think the same application will work fine on IE10. But for this to work on IE9 and all other browsers which does not support CORS, you will have to configure a Proxy Page.

Once you configured the proxy page, you can insert this line of code in your application:

esri.config.defaults.io.proxyUrl = "http://<yourservername>/proxy.ashx";

<!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, 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>Edit Water Crossings</title>      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />     <style>       html,body{height:100%;width:100%;margin:0;overflow:hidden;}       #map{         padding:0;       }       #header{         font-size:14pt;         padding-left:20px;         padding-top:4px;         color:#660000;       }        .dj_ie .infowindow .window .top .right .user .content { position: relative; }       .dj_ie .simpleInfoWindow .content {position: relative;}        .esriAttributeInspector {height:500px; width: 450px;}       .esriAttributeInspector .atiField {width: 250px;}      </style>          <script>var dojoConfig = { parseOnLoad: true };</script>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>     <script>         dojo.require("dijit.layout.BorderContainer");         dojo.require("dijit.layout.ContentPane");         dojo.require("esri.map");         dojo.require("esri.dijit.editing.Editor-all");          var map;          function init() {      esri.config.defaults.io.proxyUrl = "http://<yourservername>/proxy.ashx";             var startExtent = new esri.geometry.Extent(2300000, 7300000, 2830000, 7700000, new esri.SpatialReference({ wkid: 2036 }));              map = new esri.Map("map", {                 extent: startExtent,                 slider: false             });              dojo.connect(map, "onLayersAddResult", initEditor);              var baseMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer");             map.addLayer(baseMapLayer);              var watercourse = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND,                 outFields: ['*']             });              map.addLayers([watercourse]);          }          function initEditor(results) {             var templateLayers = dojo.map(results, function (result) {                 return result.layer;             });             var templatePicker = new esri.dijit.editing.TemplatePicker({                 featureLayers: templateLayers,                 grouping: true,                 rows: 'auto',                 columns: 3,             }, 'templateDiv');             templatePicker.startup();              var layers = dojo.map(results, function (result) {                 return { featureLayer: result.layer };             });             var settings = {                 map: map,                 templatePicker: templatePicker,                 layerInfos: layers,                 toolbarVisible: true             };              var params = { settings: settings };             var myEditor = new esri.dijit.editing.Editor(params, 'editorDiv');              map.infoWindow.resize(500, 500);              myEditor.startup();         }          dojo.ready(init);     </script>   </head>   <body class="claro">     <div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">       <div data-dojo-type="dijit.layout.ContentPane" id="header" data-dojo-props="region:'top'">         Watercross Edit       </div>       <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">         <div id="templateDiv"></div>         <div id="editorDiv"></div>       </div>       <div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'"></div>     </div>   </body> </html>

A proxy page is necessary in the following situation:

The application edits features in a feature service, unless the application is on the same domain as the GIS Server.

Let me know if it helps!

Re: Javascript API Editor Works in Google Chome but not in IE 9.

MattLane — Mon, 17 Jun 2013 19:39:22 GMT

Also, if you notice something doesn't work in IE, but does in other browsers, check your javascript. IE is more strict.

JSLint noticed an extra comma where there shouldn't be in the Template picker constructor

columns: 3,

Re: Javascript API Editor Works in Google Chome but not in IE 9.

ThomasRoussell — Tue, 18 Jun 2013 11:39:34 GMT

Thanks, for your responses. Removing the extra comma did not make any difference, but it was a good suggestion.

Shreyas, this does indeed work in IE 10 as you stated it should. I configured the proxy server, and added the line
esri.config.defaults.io.proxyUrl = "http://edmsnt007/proxy/proxy.ashx";
to the beginning of the init function.
But, I get the exact same behaviour. This works in IE 10 and Google Chrome, but not in IE 9.

Also, our SDE, GIS server and web server are all on the same machine.

Re: Javascript API Editor Works in Google Chome but not in IE 9.

ShreyasVakil — Tue, 18 Jun 2013 14:05:26 GMT

I think the proxy page isn't configured properly. Can you check directly from the browser, like http://edmsnt007/proxy/proxy.ashx?http://www.esri.com and also open the proxy.config file and make the mustMatch property to false. See below:

<ProxyConfig mustMatch="false">

Also if it the above test sucessfully open the esri homepage, then try your application again, this time it should work.

Re: Javascript API Editor Works in Google Chome but not in IE 9.

ThomasRoussell — Tue, 18 Jun 2013 15:40:47 GMT

You are right Shreyas, the proxy page was not working. I had the configured the proxy page Authentication to use the Kerberos Provider because all of our other web applications are configured that way. We changed the provider to NTLM and Negotiate, and now the proxy page works and so does the Javascript API.

Thanks for your help.

Re: Javascript API Editor Works in Google Chome but not in IE 9.

ShreyasVakil — Tue, 18 Jun 2013 15:43:29 GMT

i am glad it is working!