I'm working on a script with GP tools in a popup window. On click, the popup displays the lat/lon coordinates and two GP tool links. One of these is an ESRI sample tool that calculates population, the other generates a chart with a matplotlib script tool.
I'm getting some weird behavior with the inner HTML when I run the population tool. It says "calculating" Where it said "Three Week Chart," when "Calculate Population" should be replaced with "calculating" instead.
If I click on another point, I get this:
I'm not sure how to fix this. Here is the relevant portion of my script.
var locationStr = {};
var link = domConstruct.create("a",{
"class": "action",
"id": "statsLink",
"innerHTML": "Three Week Chart", //text that appears in the popup for the link
"href": "javascript: void(0);"
}, query(".actionList", map.infoWindow.domNode)[0]);
on(link, "click", function(){
domAttr.set(dom.byId("statsLink"), "innerHTML", "Generating Chart...");
window.gp_chart = new Geoprocessor("http://<ourserver>/arcgis/rest/services/Three_Week_Chart/GPServer/ThreeWeekChart");
var feature = window.map.infoWindow.getSelectedFeature();
var mp = webMercatorUtils.webMercatorToGeographic(feature.geometry);
var x = mp.x.toFixed(3);
var y = mp.y.toFixed(3);
var lat,lon = "";
lat = x.toString();
lon = y.toString();
locationStr = prompt("Enter Location Name", "Location", "Location");
var taskParams = {
"Latitude":lat,
"Longitude":lon,
"Location":locationStr
};
window.gp_chart.execute(taskParams,gpChartResultAvailable,gpChartFailure);
function gpChartResultAvailable(results, messages){
domAttr.set(dom.byId("statsLink"),"innerHTML", "Three Week Chart");
//clear any existing features displayed in the popup
window.map.infoWindow.clearFeatures();
var chart = "Three Week Chart"
var chartResult = chart.link("http://<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png")
//display the query results
var content = "";
if(results == 0){
content = chartResult + "<br> for " + locationStr;
}else{
content = " Unable To Generate Chart";
}
window.map.infoWindow.setContent(content);
}
function gpChartFailure(error){
domAttr.set(dom.byId("statsLink"),"innerHTML", "Three Week Chart");
var details = domConstruct.create("div", {
"innerHTML": "Error: " + error
}, query(".break", window.map.infoWindow.domNode)[0],"after" );
console.error("Error occurred: ", error);
}
});
var link = domConstruct.create("a",{
"class": "action",
"id": "statsLink",
"innerHTML": "<br>Calculate Population", //text that appears in the popup for the link
"href": "javascript: void(0);"
}, query(".actionList", map.infoWindow.domNode)[0]);
on(link, "click", calculatePopulation);
window.gp = new Geoprocessor("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/GPServ...");
function calculatePopulation(evt){
//display a message so user knows something is happening
domAttr.set(dom.byId("statsLink"), "innerHTML", "Calculating...");
//Get the feature associated with the displayed popup and use it as
//input to the geoprocessing task. The geoprocessing task will calculate
//population statistics for the area within the specified buffer distance.
var feature = window.map.infoWindow.getSelectedFeature();
var param = new BufferParameters();
param.geometries = [webMercatorUtils.webMercatorToGeographic(feature.geometry)];
var distance = prompt("Enter Search Radius","Kilometers", 10);
param.distances = [distance];
//param.distances = [10]; //buffer distance
param.unit = GeometryService.UNIT_KILOMETER;
param.bufferSpatialReference = new SpatialReference({"wkid": 4326});
param.outSpatialReference = new SpatialReference({"wkid": 102100});
param.geodesic = true;
esriConfig.defaults.geometryService.buffer(param, function(geometries){
var graphic = new Graphic(geometries[0]);
graphic.setSymbol(new SimpleFillSymbol().setColor(new Color([0,255,255,0.25])));
window.map.graphics.add(graphic);
//Use the buffered geometry as input to the GP task
var featureSet = new FeatureSet();
featureSet.geometryType = "esriGeometryPolygon";
featureSet.features = [graphic];
var taskParams = {
"inputPoly": featureSet
};
window.gp.execute(taskParams, gpPopResultAvailable, gpPopFailure);
});
}
function gpPopResultAvailable(results, messages){
domAttr.set(dom.byId("statsLink"),"innerHTML", "Calculate Population");
//clear any existing features displayed in the popup
window.map.infoWindow.clearFeatures();
var roundedPopulation = results[0].value.features[0].attributes.SUM;
//display the query results
var content = "";
if(results.length > 0){
content = "Population = " + roundedPopulation.toFixed(0);
}else{
content = "No Results Found";
}
window.map.infoWindow.setContent(content);
}
function gpPopFailure(error){
domAttr.set(dom.byId("statsLink"),"innerHTML", "Calculate Population");
var details = domConstruct.create("div", {
"innerHTML": "Population = " + error
}, query(".break", window.map.infoWindow.domNode)[0],"after" );
console.error("Error occurred: ", error);
}
Solved! Go to Solution.
Lloyd,
You are setting both of your popup actions with the id of statsLink. This will always be an issue creating multiple dom elements with the same id.
Lloyd,
You are setting both of your popup actions with the id of statsLink. This will always be an issue creating multiple dom elements with the same id.
Ah, duh. Thanks!
Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.