Print task error &quot;Uncaught RangeError: Maximum call stack size exceeded&quot;

SharathNarasimhan · ‎07-23-2012

I am trying to use the Print task for printing out map with highlighted feature layers which is basically the results of a Find task. The Print task works fine before performing the Find task but just return an error on the browser console as "Uncaught RangeError: Maximum call stack size exceeded - esri._sanitize" when some of the features in the map are highlighted. I am currently using ArcGIS server 10.1 edition along with ArcGIS javascript 3.0 APIs.

Any suggestions on this. ?

derekswingley1 · ‎08-26-2012

Unfortunately you probably won't be able to get any JSON from the printing process as soon as you click the button, it'll lock the browser up with an "unresponsive script" response. I.E will report stack issues. With firebug closed (not recording) the button will change to "printing" but nothing will print and the button stays like that until you refresh the page again.

When your app locks up the browser, or you see errors like you've described, the problem is almost certainly something to do with some JS you're running. In this particular case, since you're using references to each graphic's attributes object to create your store, Dojo then modifies the attributes object when you use them to create an ItemFileReadStore. This leads to the issue you're seeing when you try to print the map (there would also probably be some weirdness in your app if you tried to do something like display map graphic attributes when they're clicked).

The underlying print code in the JS API processes all map layers (including graphics) to remove object properties that are undefined or null (two reasons for this: it's a waste to send properties that are undefined or null and the print service doesn't handle those types of values elegantly). When the JS API print code tries to process the graphic's attributes after they've been put through Dojo's store creation process it gets into an infinite loop somewhere. I haven't completely figured out the details on this, but it's definitely the source of your error.

A simple fix would be to clone graphic.attributes instead of referencing it directly in your array of objects used to create your store:

var items = dojo.map(results, function (result) {   var graphic = result.feature;   var sms = esri.symbol.SimpleMarkerSymbol;   var sls = esri.symbol.SimpleLineSymbol;   graphic.setSymbol(     new sms(       "circle",        14,       new sls("solid", new dojo.Color([6, 105, 140]), 1),        new dojo.Color([6, 105, 140, 0.5])     )   );   app.map.graphics.add(graphic);   return dojo.clone(graphic.attributes); });

Here's a full working example that prints when you have graphics (I was testing with graphics that come back when searching for 1):

<!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" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=yes"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/soria/soria.css"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/Grid.css"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/soriaGrid.css"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css"/>     <link rel="stylesheet" type="text/css" href="https://community.esri.com/css/beacon.css" />     <link rel="stylesheet" type="text/css" href="https://community.esri.com/css/tabs.css" />     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       #map { padding:0; }     </style>     <script type="text/javascript">       dojoConfig = {         parseOnLoad: true,         locale: "en-gb"       }     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>     <script type="text/javascript">       dojo.require("esri.map");       dojo.require("dijit.form.Button");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("dijit.layout.TabContainer");       dojo.require("dijit.Toolbar");       dojo.require("dojox.grid.DataGrid");       dojo.require("dojo.data.ItemFileReadStore");       dojo.require("dojo.data.ItemFileWriteStore");       dojo.require("esri.dijit.Print");       dojo.require("esri.tasks.find");        var app = {};       app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";        function init() {         esri.config.defaults.io.proxyUrl = "/arcgisserver/proxy/proxy.ashx";          app.map = new esri.Map("map", {           extent: new esri.geometry.Extent({             "xmin": 1073230,             "ymin": 4793770,             "xmax": 1514290,             "ymax": 4960990,             "spatialReference": {               "wkid": 2193             }           }),           logo: false,           wraparound180: true         });          var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.co.nz/ArcGIS/rest/services/Generic/newzealand/MapServer");         app.map.addLayer(baseMapLayer);          dojo.connect(app.map, 'onLoad', function () {           dojo.connect(dijit.byId('map'), 'resize', app.map, app.map.resize);           var printMap = esri.request({             "url": app.printUrl,             "content": {               "f": "json"             }           });           printMap.then(print, error);         });       }        function print(p) {         var template = new esri.tasks.PrintTemplate();         template.layout = "A4 Landscape";         template.format = "pdf";          template.layoutOptions = {           "authorText": "",           "copyrightText": "Copyright " + new Date().getFullYear(),           "titleText": "Groundwater",           "scalebarUnit": "Kilometers"         };          printer = new esri.dijit.Print({           "map": app.map,           "templates": [template],           url: app.printUrl         }, dojo.byId("print"));         printer.startup();         }        function doFind() {         var s = dojo.byId("query").value         var findParams = new esri.tasks.FindParameters();         var findTask = new esri.tasks.FindTask("http://gis.es.govt.nz/ArcGIS/rest/services/Groundwater/MapServer");         findParams.layerIds = [0];         findParams.searchFields = ["Well_No"];         findParams.returnGeometry = true;         findParams.outSpatialReference = app.map.spatialReference;         findParams.searchText = s;         findTask.execute(findParams, showResults);       }        function error(err) {         alert("Error: " + err);       }        function showResults(results) {         app.map.graphics.clear();          if (results.length > 0) {           var items = dojo.map(results, function (result) {             var graphic = result.feature;             var sms = esri.symbol.SimpleMarkerSymbol;             var sls = esri.symbol.SimpleLineSymbol;             graphic.setSymbol(               new sms(                 "circle",                  14,                 new sls("solid", new dojo.Color([6, 105, 140]), 1),                  new dojo.Color([6, 105, 140, 0.5])               )             );             app.map.graphics.add(graphic);             return dojo.clone(graphic.attributes);           });           console.log("items: ", items);           var data = {             'identifier': 'OBJECTID',             'items': items           }           var store = new dojo.data.ItemFileReadStore({             data: data           });           var grid = new dojox.grid.DataGrid({             'id': 'grid',             'store': store,             'structure': [{               'name': 'Well Number',               'field': 'WELL_NO',               'width': '200px'             }],             'rowSelector': '0px'           });           grid.placeAt("records");           grid.startup();         } else {           alert("No results found matching your criteria.");         }       }       dojo.ready(init);     </script>   </head>      <body class="soria">     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"     style="width:100%; height:100%; margin:0;" id="workspace">       <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"       id="header">         <div id="toolbar" data-dojo-type="dijit.Toolbar">           <div id="print"></div>         </div>       </div>       <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'"       style="width: 240px;" id="side">         <div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width: 100%; height: 100%;"         tabPosition="top">           <div dojoType="dijit.layout.ContentPane" title="Main" id="main">             <h2>Search For...</h2>             <div id="search">               <p>Look For:</span>                 <br/>                 <input type="text" id="query" style="width: 222px" />               </p>             </div>             <p>Look In:               <br/>               <select id="lookIn" style="width: 228px">                 <option value="WN">Well Number</option>               </select>             </p>             <p>               <button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>Search</button>             </p>           </div>           <div dojoType="dijit.layout.ContentPane" title="Results" id="results">             <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'"             style="width: 240px;" id="records"></div>           </div>         </div>       </div>       <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit.layout.ContentPane"></div>     </div>   </body>  </html>

View solution in original post

JianHuang · ‎07-27-2012

Do you have very complex or large number of graphics on the map?

SharathNarasimhan · ‎07-30-2012

Well, The number of graphics on the map is quite large, But the print works fine as long as I haven't added any new graphics on the map using the statement map.graphics.add(). I even tested out by adding print functionality on this example - http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm and I have used the example from - http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/widget_print.h... to create an print widget.

By using the statement map.graphics.add() am I adding a new dynamic graphics layer on to the map which is causing the Print function to fail ? Please provide your thoughts on the same.

Do you have very complex or large number of graphics on the map?

Anonymous User · ‎08-23-2012

We're experiencing a similar issue. Whilst we can draw polygons, lines on a map and still print, when we plot search results as points on the map we essentially run out of stack space unless we issue a map.graphics.clear(). The number of points is irrelevant one or many experiences the same "out of stack space" issue. Simplifying the geometry of the point does not solve this issue.

We believe we've tracked it down to the datagrid, on searches that only yield one result (that is there can only be a max of one result) we don't use a datagrid and plot the result straight away. This map will print fine.

When searches that yield multiple results (which uses a datagrid to list) are run and plotted, soon as you click the print button we run out of stack space whether it be one result or many.

Incidentally, if we remove the structure property of the datagrid, the datagrid won't display any results, but still gets added to the DOM. Printing still works.

It appears that we can either plot the results as points on a map OR display them in the datagrid, but not both.

Finally, any text added to polygons, such as area and length will not be included in any print out.

Looking forward to some form of solution to this issue. We don't want to use the browser print option.

derekswingley1 · ‎08-23-2012

It sounds like you've done quite a bit of research/testing but the easiest way to get help is to post code that reproduces the issue. Can you post a simple test page that shows the problem?

Anonymous User · ‎08-23-2012

Thanks Derek. I have cut the code back to a bare minimum for posting, search and printing only. All other non essential toolbar buttons and functionality removed. Still does the out of stack space (locks up if Firebug or Web Dev tools are open).

<!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" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=yes"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/soria/soria.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/Grid.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/soriaGrid.css" />
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css" />
 <link rel="stylesheet" type="text/css" href="https://community.esri.com/css/beacon.css" />
 <link rel="stylesheet" type="text/css" href="https://community.esri.com/css/tabs.css" />
              <script type="text/javascript">dojoConfig = { parseOnLoad:true, locale:"en-gb" }</script>
              <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
 <script type="text/javascript">
   dojo.require("esri.map");
   dojo.require("dijit.form.Button");
   dojo.require("dijit.layout.BorderContainer");
   dojo.require("dijit.layout.ContentPane");
   dojo.require("dijit.layout.TabContainer");
   dojo.require("dijit.Toolbar");
   dojo.require("dojox.grid.DataGrid");
     dojo.require("dojo.data.ItemFileReadStore");
   dojo.require("dojo.data.ItemFileWriteStore");
   dojo.require("esri.dijit.Print");
                dojo.require("esri.tasks.find");

      var app = {};
   app.printUrl = "http://esweb1/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task";
   
      function init() {
     esri.config.defaults.io.proxyUrl = "/arcgisserver/proxy/proxy.ashx";
  
        app.map = new esri.Map("map", { 
    extent: new esri.geometry.Extent({ "xmin": 1073230, "ymin": 4793770, "xmax": 1514290, "ymax": 4960990, "spatialReference": { "wkid": 2193} }), 
    logo: false, 
    wraparound180: true 
  });
   
  var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer ("http://services.arcgisonline.co.nz/ArcGIS/rest/services/Generic/newzealand/MapServer");
        app.map.addLayer(baseMapLayer) 
  
  var service = new esri.layers.ArcGISDynamicMapServiceLayer("http://esweb1/arcgis/rest/services/Public/Groundwater/MapServer", {opacity: this.opacity, id: "emap"});
        app.map.addLayer(service);
  
        dojo.connect(app.map, 'onLoad', function() {
          dojo.connect(dijit.byId('map'), 'resize', app.map, app.map.resize);     
          var printMap = esri.request({ "url": "http://esweb1/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task", "content": { "f": "json" } });
          printMap.then(print, error);  
        });
      } 
   
   function print(p) {
        var template = new esri.tasks.PrintTemplate();
        template.layout = "A4 Landscape";
        template.format = "pdf";

        template.layoutOptions = { "authorText": "", "copyrightText": "Copyright " + new Date().getFullYear(), "titleText": "Groundwater", "scalebarUnit": "Kilometers" };
  
        printer = new esri.dijit.Print({
          "map": app.map,
          "templates": [template],
          url: app.printUrl
        }, dojo.byId("print"));
        printer.startup();
      }
   
      function doFind() {
     var s = dojo.byId("query").value
       var findParams = new esri.tasks.FindParameters();
     var findTask = new esri.tasks.FindTask("http://esweb1/ArcGIS/rest/services/Public/Groundwater/MapServer");
     findParams.layerIds = [0];
     findParams.searchFields = ["Well_No"];
        findParams.returnGeometry = true;
        findParams.outSpatialReference = app.map.spatialReference;
     findParams.searchText = s;
     findTask.execute(findParams, showResults);
      }   
   
   function error(err) {
        alert("Error: " + err);
      }
   
      function showResults(results) {
        app.map.graphics.clear();

        if (results.length > 0) {
          var items = dojo.map(results, function(result) {
       var graphic = result.feature;
    graphic.setSymbol(new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 14, 
         new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
         new dojo.Color([6, 105, 140]), 1), new dojo.Color([6, 105, 140, 0.5])
       ));
       app.map.graphics.add(graphic);
       return graphic.attributes;
         });
         var data = { 'identifier': 'OBJECTID', 'items': items }
         var store = new dojo.data.ItemFileReadStore({ data: data });
      //destroy("grid");  //remove the grid so that the new results are bound fresh
         var grid = new dojox.grid.DataGrid({ 'id': 'grid', 'store': store, 'structure': [{'name': 'Well Number', 'field': 'WELL_NO', 'width': '200px'}], 'rowSelector': '0px' });
         grid.placeAt("records");
         grid.startup();
        } else {
          alert("No results found matching your criteria.");
        }
   }
   dojo.ready(init);
 </script>
  </head>
  <body class="soria">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%; margin:0;" id="workspace">
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" id="header">
  <div id="toolbar" data-dojo-type="dijit.Toolbar">
     <div id="print"></div>
        </div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width: 240px;" id="side">
  <div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width: 100%; height: 100%;" tabPosition="top">
    <div dojoType="dijit.layout.ContentPane" title="Main" id="main">
         <h2>Search For...</h2>
   <div id="search">
           <p>
                Look For:</span><br/> <input type="text" id="query" style="width: 222px" />
        </p>
   </div>
      <p>
        Look In: <br/>
           <select id="lookIn" style="width: 228px">
                <option value="WN">Well Number</option>
              </select>
      </p>
      <p>
              <button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>Search</button>
      </p>
    </div>
    <div dojoType="dijit.layout.ContentPane" title="Results" id="results">
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width: 240px;" id="records"></div>
    </div>
  </div>
      </div>
   <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit.layout.ContentPane"></div>
    </div>  
  </body>
</html>

Good luck. There is a destroyGrid method in the code above which is commented out in this code. We create the grid on the fly. Result is the same with a static grid.

Thanks for any assistance you can offer.

derekswingley1 · ‎08-23-2012

I tweaked your code to test, obviously I can't acces your Groundwater service:

<!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" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=yes"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/soria/soria.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/Grid.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/soriaGrid.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css"/>
    <link rel="stylesheet" type="text/css" href="https://community.esri.com/css/beacon.css" />
    <link rel="stylesheet" type="text/css" href="https://community.esri.com/css/tabs.css" />
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map { padding:0; }
    </style>
    <script type="text/javascript">
      dojoConfig = {
        parseOnLoad: true,
        locale: "en-gb"
      }
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("dijit.Toolbar");
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("dojo.data.ItemFileWriteStore");
      dojo.require("esri.dijit.Print");
      dojo.require("esri.tasks.find");

      var app = {};
      // app.printUrl = "http://esweb1/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task";
      app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

      function init() {
        // esri.config.defaults.io.proxyUrl = "/arcgisserver/proxy/proxy.ashx";
        esri.config.defaults.io.proxyUrl = "/~dswingley/esri_js/proxy/proxy.php";

        app.map = new esri.Map("map", {
          extent: new esri.geometry.Extent({
            "xmin": 1073230,
            "ymin": 4793770,
            "xmax": 1514290,
            "ymax": 4960990,
            "spatialReference": {
              "wkid": 2193
            }
          }),
          logo: false,
          wraparound180: true
        });

        var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.co.nz/ArcGIS/rest/services/Generic/newzealand/MapServer");
        app.map.addLayer(baseMapLayer);

        console.log("this.opacity: ", this.opactiy);

        // var service = new esri.layers.ArcGISDynamicMapServiceLayer("http://esweb1/arcgis/rest/services/Public/Groundwater/MapServer", {
        //   opacity: this.opacity,
        //   id: "emap"
        // });
        // app.map.addLayer(service);
        
        var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://services.arcgisonline.co.nz/arcgis/rest/services/LINZ/geotiffs/MapServer", { "opacity": this.opacity });
        app.map.addLayer(dynamicMapServiceLayer);

        dojo.connect(app.map, 'onLoad', function () {
          dojo.connect(dijit.byId('map'), 'resize', app.map, app.map.resize);
          var printMap = esri.request({
            // "url": "http://esweb1/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task",
            "url": app.printUrl,
            "content": {
              "f": "json"
            }
          });
          printMap.then(print, error);
        });
      }

      function print(p) {
        var template = new esri.tasks.PrintTemplate();
        template.layout = "A4 Landscape";
        template.format = "pdf";

        template.layoutOptions = {
          "authorText": "",
          "copyrightText": "Copyright " + new Date().getFullYear(),
          "titleText": "Groundwater",
          "scalebarUnit": "Kilometers"
        };

        printer = new esri.dijit.Print({
          "map": app.map,
          "templates": [template],
          url: app.printUrl
        }, dojo.byId("print"));
        printer.startup();
        }

      function doFind() {
        var s = dojo.byId("query").value
        var findParams = new esri.tasks.FindParameters();
        var findTask = new esri.tasks.FindTask("http://esweb1/ArcGIS/rest/services/Public/Groundwater/MapServer");
        findParams.layerIds = [0];
        findParams.searchFields = ["Well_No"];
        findParams.returnGeometry = true;
        findParams.outSpatialReference = app.map.spatialReference;
        findParams.searchText = s;
        findTask.execute(findParams, showResults);
      }

      function error(err) {
        alert("Error: " + err);
      }

      function showResults(results) {
        app.map.graphics.clear();

        if (results.length > 0) {
          var items = dojo.map(results, function (result) {
            var graphic = result.feature;
            graphic.setSymbol(new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 14,
            new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
            new dojo.Color([6, 105, 140]), 1), new dojo.Color([6, 105, 140, 0.5])));
            app.map.graphics.add(graphic);
            return graphic.attributes;
          });
          var data = {
            'identifier': 'OBJECTID',
            'items': items
          }
          var store = new dojo.data.ItemFileReadStore({
            data: data
          });
          //destroy("grid");  //remove the grid so that the new results are bound fresh
          var grid = new dojox.grid.DataGrid({
            'id': 'grid',
            'store': store,
            'structure': [{
              'name': 'Well Number',
              'field': 'WELL_NO',
              'width': '200px'
            }],
            'rowSelector': '0px'
          });
          grid.placeAt("records");
          grid.startup();
        } else {
          alert("No results found matching your criteria.");
        }
      }
      dojo.ready(init);
    </script>
  </head>
  
  <body class="soria">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
    style="width:100%; height:100%; margin:0;" id="workspace">
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"
      id="header">
        <div id="toolbar" data-dojo-type="dijit.Toolbar">
          <div id="print"></div>
        </div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'"
      style="width: 240px;" id="side">
        <div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width: 100%; height: 100%;"
        tabPosition="top">
          <div dojoType="dijit.layout.ContentPane" title="Main" id="main">
            <h2>Search For...</h2>
            <div id="search">
              <p>Look For:</span>
                <br/>
                <input type="text" id="query" style="width: 222px" />
              </p>
            </div>
            <p>Look In:
              <br/>
              <select id="lookIn" style="width: 228px">
                <option value="WN">Well Number</option>
              </select>
            </p>
            <p>
              <button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>Search</button>
            </p>
          </div>
          <div dojoType="dijit.layout.ContentPane" title="Results" id="results">
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'"
            style="width: 240px;" id="records"></div>
          </div>
        </div>
      </div>
      <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit.layout.ContentPane"></div>
    </div>
  </body>

</html>

Printing works with that code so I'm guessing there's something specific to features in your Groundwater service. Two things we can look at:
�??post the JSON (either as a code sample or an attached file) returned from your Groundwater service? That way I can create some graphics from that and see if it breaks printing. You can get to the JSON via firebug's Net section
�??post the JSON that's being sent to the print service, also available from firebug's Net section

Anonymous User · ‎08-26-2012

Hi Derek,

Thanks for your reply once again.

I can go one step better than json, here's a link to the external rest service:

http://gis.es.govt.nz/ArcGIS/rest/services/Groundwater/MapServer

This server is running 10.0 but it happens on both 10.0 and 10.1 using api versions 2.8, 3.0 and 3.1.

Unfortunately you probably won't be able to get any JSON from the printing process as soon as you click the button, it'll lock the browser up with an "unresponsive script" response. I.E will report stack issues. With firebug closed (not recording) the button will change to "printing" but nothing will print and the button stays like that until you refresh the page again.

Incidentally using your dynamic layer with our Groundwater layer in the Find Task allows us to print but using any of our map services doesn't

We've also tried with no success:

1. Upping the allowable server instances to see if that was causing it.
2. Using two servers with the same rest service, one used for the Dynamic Layer and the other the Find Task.
3. Mixing and matching services.
4. Hard coding the grid instead of creating on the fly (thus structure is set in stone rather than dynamically changing based upon search type), i.e

<table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="tgrid" data-dojo-props="rowSelector:'20px'">
  <thead>
    <tr>
      <th field="Well_No">Well No</th>
    </tr>
  </thead>
</table>

Web Server setup:

We have one webserver (with a second ready to go) feeding off two GIS servers running 10.1 on Windows 2008 using IIS and GIS Authentication. .NET 4.0 has been installed on the web server for some of the web applications that require it.

Thanks for any light you can shed on this issue.

derekswingley1 · ‎08-26-2012

Unfortunately you probably won't be able to get any JSON from the printing process as soon as you click the button, it'll lock the browser up with an "unresponsive script" response. I.E will report stack issues. With firebug closed (not recording) the button will change to "printing" but nothing will print and the button stays like that until you refresh the page again.

When your app locks up the browser, or you see errors like you've described, the problem is almost certainly something to do with some JS you're running. In this particular case, since you're using references to each graphic's attributes object to create your store, Dojo then modifies the attributes object when you use them to create an ItemFileReadStore. This leads to the issue you're seeing when you try to print the map (there would also probably be some weirdness in your app if you tried to do something like display map graphic attributes when they're clicked).

The underlying print code in the JS API processes all map layers (including graphics) to remove object properties that are undefined or null (two reasons for this: it's a waste to send properties that are undefined or null and the print service doesn't handle those types of values elegantly). When the JS API print code tries to process the graphic's attributes after they've been put through Dojo's store creation process it gets into an infinite loop somewhere. I haven't completely figured out the details on this, but it's definitely the source of your error.

A simple fix would be to clone graphic.attributes instead of referencing it directly in your array of objects used to create your store:

var items = dojo.map(results, function (result) {   var graphic = result.feature;   var sms = esri.symbol.SimpleMarkerSymbol;   var sls = esri.symbol.SimpleLineSymbol;   graphic.setSymbol(     new sms(       "circle",        14,       new sls("solid", new dojo.Color([6, 105, 140]), 1),        new dojo.Color([6, 105, 140, 0.5])     )   );   app.map.graphics.add(graphic);   return dojo.clone(graphic.attributes); });

Here's a full working example that prints when you have graphics (I was testing with graphics that come back when searching for 1):

<!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" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=yes"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/soria/soria.css"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/Grid.css"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/soriaGrid.css"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css"/>     <link rel="stylesheet" type="text/css" href="https://community.esri.com/css/beacon.css" />     <link rel="stylesheet" type="text/css" href="https://community.esri.com/css/tabs.css" />     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       #map { padding:0; }     </style>     <script type="text/javascript">       dojoConfig = {         parseOnLoad: true,         locale: "en-gb"       }     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>     <script type="text/javascript">       dojo.require("esri.map");       dojo.require("dijit.form.Button");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("dijit.layout.TabContainer");       dojo.require("dijit.Toolbar");       dojo.require("dojox.grid.DataGrid");       dojo.require("dojo.data.ItemFileReadStore");       dojo.require("dojo.data.ItemFileWriteStore");       dojo.require("esri.dijit.Print");       dojo.require("esri.tasks.find");        var app = {};       app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";        function init() {         esri.config.defaults.io.proxyUrl = "/arcgisserver/proxy/proxy.ashx";          app.map = new esri.Map("map", {           extent: new esri.geometry.Extent({             "xmin": 1073230,             "ymin": 4793770,             "xmax": 1514290,             "ymax": 4960990,             "spatialReference": {               "wkid": 2193             }           }),           logo: false,           wraparound180: true         });          var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.co.nz/ArcGIS/rest/services/Generic/newzealand/MapServer");         app.map.addLayer(baseMapLayer);          dojo.connect(app.map, 'onLoad', function () {           dojo.connect(dijit.byId('map'), 'resize', app.map, app.map.resize);           var printMap = esri.request({             "url": app.printUrl,             "content": {               "f": "json"             }           });           printMap.then(print, error);         });       }        function print(p) {         var template = new esri.tasks.PrintTemplate();         template.layout = "A4 Landscape";         template.format = "pdf";          template.layoutOptions = {           "authorText": "",           "copyrightText": "Copyright " + new Date().getFullYear(),           "titleText": "Groundwater",           "scalebarUnit": "Kilometers"         };          printer = new esri.dijit.Print({           "map": app.map,           "templates": [template],           url: app.printUrl         }, dojo.byId("print"));         printer.startup();         }        function doFind() {         var s = dojo.byId("query").value         var findParams = new esri.tasks.FindParameters();         var findTask = new esri.tasks.FindTask("http://gis.es.govt.nz/ArcGIS/rest/services/Groundwater/MapServer");         findParams.layerIds = [0];         findParams.searchFields = ["Well_No"];         findParams.returnGeometry = true;         findParams.outSpatialReference = app.map.spatialReference;         findParams.searchText = s;         findTask.execute(findParams, showResults);       }        function error(err) {         alert("Error: " + err);       }        function showResults(results) {         app.map.graphics.clear();          if (results.length > 0) {           var items = dojo.map(results, function (result) {             var graphic = result.feature;             var sms = esri.symbol.SimpleMarkerSymbol;             var sls = esri.symbol.SimpleLineSymbol;             graphic.setSymbol(               new sms(                 "circle",                  14,                 new sls("solid", new dojo.Color([6, 105, 140]), 1),                  new dojo.Color([6, 105, 140, 0.5])               )             );             app.map.graphics.add(graphic);             return dojo.clone(graphic.attributes);           });           console.log("items: ", items);           var data = {             'identifier': 'OBJECTID',             'items': items           }           var store = new dojo.data.ItemFileReadStore({             data: data           });           var grid = new dojox.grid.DataGrid({             'id': 'grid',             'store': store,             'structure': [{               'name': 'Well Number',               'field': 'WELL_NO',               'width': '200px'             }],             'rowSelector': '0px'           });           grid.placeAt("records");           grid.startup();         } else {           alert("No results found matching your criteria.");         }       }       dojo.ready(init);     </script>   </head>      <body class="soria">     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"     style="width:100%; height:100%; margin:0;" id="workspace">       <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"       id="header">         <div id="toolbar" data-dojo-type="dijit.Toolbar">           <div id="print"></div>         </div>       </div>       <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'"       style="width: 240px;" id="side">         <div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width: 100%; height: 100%;"         tabPosition="top">           <div dojoType="dijit.layout.ContentPane" title="Main" id="main">             <h2>Search For...</h2>             <div id="search">               <p>Look For:</span>                 <br/>                 <input type="text" id="query" style="width: 222px" />               </p>             </div>             <p>Look In:               <br/>               <select id="lookIn" style="width: 228px">                 <option value="WN">Well Number</option>               </select>             </p>             <p>               <button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>Search</button>             </p>           </div>           <div dojoType="dijit.layout.ContentPane" title="Results" id="results">             <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'"             style="width: 240px;" id="records"></div>           </div>         </div>       </div>       <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit.layout.ContentPane"></div>     </div>   </body>  </html>

Anonymous User · ‎08-26-2012

We just tested using someone else's services and had the same result as we wanted to test our setup.

<!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" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=yes"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/soria/soria.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/Grid.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/soriaGrid.css"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css"/>
    <link rel="stylesheet" type="text/css" href="https://community.esri.com/css/beacon.css" />
    <link rel="stylesheet" type="text/css" href="https://community.esri.com/css/tabs.css" />
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map { padding:0; }
    </style>
    <script type="text/javascript">
      dojoConfig = {
        parseOnLoad: true,
        locale: "en-gb"
      }
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("dijit.Toolbar");
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("dojo.data.ItemFileWriteStore");
      dojo.require("esri.dijit.Print");
      dojo.require("esri.tasks.find");

      var app = {};
      app.printUrl = "http://esweb1/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task";
      //app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

      function init() {
        esri.config.defaults.io.proxyUrl = "/arcgisserver/proxy/proxy.ashx";
        //esri.config.defaults.io.proxyUrl = "/~dswingley/esri_js/proxy/proxy.php";

        app.map = new esri.Map("map", {
          extent: new esri.geometry.Extent({
            "xmin": 19159196.0604085,
            "ymin": -5395900.2294505,
            "xmax": 19253117.1997641,
            "ymax": -5353486.89803372,
            "spatialReference": {
              "wkid": 102100
            }
          }),
          logo: false,
          wraparound180: true
        });

        var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer");
        app.map.addLayer(baseMapLayer);
        
        var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://arcgis.ecan.govt.nz/ArcGIS/rest/services/Public/Bus_Routes/MapServer", { "opacity": 0.8 });
        app.map.addLayer(dynamicMapServiceLayer);

        dojo.connect(app.map, 'onLoad', function () {
          dojo.connect(dijit.byId('map'), 'resize', app.map, app.map.resize);
          var printMap = esri.request({
            "url": app.printUrl,
            "content": {
              "f": "json"
            }
          });
          printMap.then(print, error);
        });
      }

      function print(p) {
        var template = new esri.tasks.PrintTemplate();
        template.layout = "A4 Landscape";
        template.format = "pdf";

        template.layoutOptions = {
          "authorText": "",
          "copyrightText": "Copyright " + new Date().getFullYear(),
          "titleText": "Groundwater",
          "scalebarUnit": "Kilometers"
        };

        printer = new esri.dijit.Print({
          "map": app.map,
          "templates": [template],
          url: app.printUrl
        }, dojo.byId("print"));
        printer.startup();
        }

      function doFind() {
        var s = dojo.byId("query").value
        var findParams = new esri.tasks.FindParameters();
        var findTask = new esri.tasks.FindTask("http://arcgis.ecan.govt.nz/ArcGIS/rest/services/Public/Bus_Routes/MapServer");
        findParams.layerIds = [1];
        findParams.searchFields = ["RoadName"];
        findParams.returnGeometry = true;
        findParams.outSpatialReference = app.map.spatialReference;
        findParams.searchText = s;
        findTask.execute(findParams, showResults);
      }

      function error(err) {
        alert("Error: " + err);
      }

      function showResults(results) {
        app.map.graphics.clear();

        if (results.length > 0) {
          var items = dojo.map(results, function (result) {
            var graphic = result.feature;
            graphic.setSymbol(new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 14,
            new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
            new dojo.Color([6, 105, 140]), 1), new dojo.Color([6, 105, 140, 0.5])));
            app.map.graphics.add(graphic);
            return graphic.attributes;
          });
          var data = {
            'identifier': 'OBJECTID',
            'items': items
          }
          var store = new dojo.data.ItemFileReadStore({
            data: data
          });
          //destroy("grid");  //remove the grid so that the new results are bound fresh
          var grid = new dojox.grid.DataGrid({
            'id': 'grid',
            'store': store,
            'structure': [{
              'name': 'RoadName',
              'field': 'RoadName',
              'width': '200px'
            }],
            'rowSelector': '0px'
          });
          grid.placeAt("records");
          grid.startup();
        } else {
          alert("No results found matching your criteria.");
        }
      }
      dojo.ready(init);
    </script>
  </head>
  
  <body class="soria">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
    style="width:100%; height:100%; margin:0;" id="workspace">
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"
      id="header">
        <div id="toolbar" data-dojo-type="dijit.Toolbar">
          <div id="print"></div>
        </div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'"
      style="width: 240px;" id="side">
        <div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width: 100%; height: 100%;"
        tabPosition="top">
          <div dojoType="dijit.layout.ContentPane" title="Main" id="main">
            <h2>Search For...</h2>
            <div id="search">
              <p>Look For:</span>
                <br/>
                <input type="text" id="query" style="width: 222px" />
              </p>
            </div>
            <p>Look In:
              <br/>
              <select id="lookIn" style="width: 228px">
                <option value="WN">Well Number</option>
              </select>
            </p>
            <p>
              <button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>Search</button>
            </p>
          </div>
          <div dojoType="dijit.layout.ContentPane" title="Results" id="results">
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'"
            style="width: 240px;" id="records"></div>
          </div>
        </div>
      </div>
      <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit.layout.ContentPane"></div>
    </div>
  </body>
</html>

Print task error &amp;quot;Uncaught RangeError: Maximum call stack size exceeded&amp;quot;

Print task error "Uncaught RangeError: Maximum call stack size exceeded"