I'm modifying some Javascript 3.x code written by previous staff member. I had to "fix" a cross-domain and proxy issue to get around the token timing out every year. To do that, I adding a ProxyRule that points to our common proxy on another machine.
Initiall, this all seems to be working as expected. I user fills out the query boxes and selects "Find Places", which returns a table of attributes. The user can than click on different items in the table and the map will zoom. The click-zoom can be done multiple times and it works.
However, I noticed that although the "click to zoom" works for the first set of results, if the user performs another query, the table gets populated correctly but "click to zoom" will draw but not zoom. I know it is drawing since I can zoom out and see the polygon change as I select different items in the table.
The "placename" query which returns a table of items to click, I believe, is c# code (that I would rather not touch,) and the query seems to be working just fine. My new esri.layers.FeatureLayer uses the MODE_SNAPSHOT. I have tried the other options thinking ONDEMAND might work better, but that seems to make it worse (i.e. the zoom after the 1st query is hit and miss).
I was developing in Firefox developer tools, but that provided no addition help I could interpret. So I took a look at the developer tools in Chrome, I'm starting to thing that my proxy is working with my secure service the first time, but not with the second placename query OR I am missing a line to retrieve a new set of data from the service. The error is
dojo.io.script error
k {message: "Request canceled", response: Object, log: undefined, stack: "Error: Request canceled
at new k (https://js.a…is.com/3.7/js/esri/layers/SnapshotMode.js:20:263)"}
Uncaught TypeError: Cannot read property '_jsonpCallback' of undefined
proxy.ashx?https://<my Service URL>/MapServer/0/query?f=js…:1 Uncaught TypeError: Cannot read property '_jsonpCallback' of undefined
at proxy.ashx?https://<my Service URL>/MapServer/0/query?f=js…:1
Services are from ArcGIS Server 10.2.1 (will eventually to 10.5.1). This is an internal only site so can not provide a sample.
Edit: I will add that am seeing an error in Firefox when it fails
TypeError: dojo.io.script.jsonp_dojoIoScript_UCU_Codes00 is undefined
Any help would be appreciated. Thanks
<!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>Internal UCU Mapper</title>
<link rel="stylesheet" href="
<link rel="stylesheet" href="
<style>
html,body { height:100%; width:100%; margin:0; padding:0; }
body {
background:#dfe5d7;
font-family:"Georgia,Verdana";
}
span{ font-weight:bold; color:#808080; text-align:left; }
.inset{
color: #d7decf;
text-shadow: 0px 2px 2px #808080;
font-weight:bold;
}
#header {
background: #fcfff4;
background: -moz-linear-gradient(left, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border:solid 1px #398235;
height:80px;
padding:0;
margin:0;
}
#map {
position:absolute;
padding: 0;
margin: 0;
height: 100%;
left:310px;
}
.claro .dijitContentPane {
padding: 0;
}
.maptitle{
padding-left:15px;
font-size:32px;
}
.subtitle {
font-size:14px;
padding-left:40px;
color:#462D44;
}
#leftpane {
position:absolute;
border:none;
background:none;
color:#462D44;
font-size:8pt;
height:100px;
padding: 15px;
text-align:left;
width:300px;
margin:0;
}
</style>
<script src="
<script>
var map, featureLayer;
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"esri/map",
"esri/layers/FeatureLayer",
"dijit/form/FilteringSelect",
"dijit/form/ComboBox",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/dijit/Scalebar",
"esri/urlUtils",
"dijit/registry",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/domReady!"
],
function(
BorderContainer,
ContentPane,
Map,
FeatureLayer,
FilteringSelect,
ComboBox,
DataGrid,
ItemFileReadStore,
QueryTask,
query,
Scalebar,
urlUtils,
registry,
dom,
on,
parser
)
{
parser.parse();
on(dom.byId("btnexecute"), "click", executeTask);
var initExtent = new esri.geometry.Extent({"xmin":-1025000,"ymin":520000,"xmax":1400000,"ymax":2400000,"spatialReference":{"wkid":3338}});
map = new esri.Map("map",{extent:initExtent});
dojo.connect(window, 'resize', map, map.resize);
var scalebar = new esri.dijit.Scalebar({
map: map,
scalebarUnit: "english",
attachTo: "bottom-left"
});
urlUtils.addProxyRule({ urlPrefix: "https://<Service URL/webadaptor>", proxyUrl: "https://<Service URL and path to proxy>.ashx"});
esriConfig.defaults.io.proxyUrl = "https://<Service URL and path to proxy>.ashx";
esriConfig.defaults.io.alwaysUseProxy = false;
esriConfig.defaults.io.corsDetection = false;
var protocol = window.location.protocol;
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("<myBaseMapURL>/MapServer");
map.addLayer(basemap);
var subs = new esri.layers.ArcGISDynamicMapServiceLayer("<mySubunitsURL>/MapServer");
map.addLayer(subs);
var ucu = new esri.layers.ArcGISDynamicMapServiceLayer(protocol + "<mySecureServiceURL>/MapServer");
map.addLayer(ucu);
var ucu_label = new esri.layers.FeatureLayer(protocol + "<mySecureLServiceLabelsURL>/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
ucu_label.setMinScale(0);
var theucu = 'XXXXX';
var layerdef = "ucu="+"'"+theucu+"'";
ucu_label.setDefinitionExpression(layerdef);
var symbol2 = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([0, 0, 0, .7]), 3
),
new dojo.Color([125, 125, 125, 0.35])
);
ucu_label.setRenderer(new esri.renderer.SimpleRenderer(symbol2));
map.addLayer(ucu_label);
dojo.connect(ucu_label, "onUpdateEnd", function () {
var zoomExtent = esri.graphicsExtent(ucu_label.graphics);
map.setExtent(zoomExtent.expand(1.25),true);
map.refresh();
map.setExtent(initExtent,true);
});
function onRowClickHandler(evt){
var clickeducu = grid.getItem(evt.rowIndex).ucu;
layerdef = "ucu="+"'"+clickeducu+"'";
ucu_label.setDefinitionExpression(layerdef);
}
function executeTask(){
if (mySelect.value.length !=3 ){
return;
}
if (mySelect.value.length == 3){
var querywhere = "gmu="+"'"+mySelect.value+"'";
}
if (mySelect.value.length ==3 && placetxt.value.length>0){
querywhere = "gmu="+"'"+mySelect.value+"'"+" and place like"+"'%"+placetxt.value+"%'";
}
var queryTask = new esri.tasks.QueryTask("/SpatialService/PlacenameService.ashx");
var query = new esri.tasks.Query();
query.returnGeometry=false;
query.outFields = ["placename_id","ucu","place", "gmu"];
query.where = querywhere;
dojo.connect(queryTask,"onComplete",function(featureSet){
var items = dojo.map(featureSet.features,function(feature){
return feature.attributes;
});
var data = {identifier:"placename_id", items:items};
store = new dojo.data.ItemFileReadStore({data:data});
grid.setStore(store);
grid.setSortIndex(0,"true");
grid.on("click", onRowClickHandler);
});
queryTask.execute(query);
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="header"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'top'">
<span class="inset maptitle">Alaska Fish and Game UCU Lookup</span>
<br>
<span class="subtitle">View the placenames associated with UCU's and view the UCU on a map</span>
</div>
<div id="leftpane"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'left'" >
<div style="height:24px;padding-bottom 4px;text-align:left;">
First select a GMU (required).
<br>
<CFOUTPUT>
<select id="mySelect" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16p;"
value="Select a GMU" >
<CFLOOP query="GMUS">
<OPTION VALUE="#gmus.GMU#">#gmus.GMU#</option>
</CFLOOP>
</cfoutput>
</select>
</div>
<br>
Then type a place name string or leave blank
<br>
<input type="text" id="placetxt" value="" ></input>
<br>
Next hit the "Find places" button
<br>
<!--- <input id="btnexecute" type="button" value="Find places" onclick="executeTask()"></input> --->
<button id="btnexecute" data-dojo-type="dijit/form/Button" type="button">Find places</button>
<br>
<br>
Double click on a results row to view UCU on the map
<br>
Note: not all UCU's' are mappable, for example 0000 minors
<br>
<br>
<table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowSelector="20px" height="100%" width="200px">
<thead>
<tr>
<th field="place" width="140px">Place</th>
<th field="ucu" width="80px">UCU</th>
</tr>
</thead>
</table>
</div>
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'" style="overflow:hidden;">
</div>
</div>
</body>
</html>
BTW, not that this should matter, but this still does use some ColdFusion code.