I am creating a simple widget with the same function as the following link:
http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=query_nomap
I just want to open this widget, click one button to do the query, and display the query results inside the widget pane (I will use a different url later). Here are my codes for widget.js and widget.html. I am confused why my codes are not working. My question is how to make the results display in the widget.html or widget pane? Why the JS API codes are not working in the return declare () method? Any hints are very helpful. BTW, I don't have setting files or manifest json files. Thanks!
widget.js as the following:
define(['dojo/_base/declare', 'dojo/_base/array', 'jimu/BaseWidget','dojo/dom', 'dojo/on',
'esri/tasks/query', 'esri/tasks/QueryTask', 'dojo/domReady!'],
function(declare, array, BaseWidget,dom, on, Query, QueryTask) {
return declare([BaseWidget], {
baseClass: 'jimu-widget-widgetb',
var queryTask = new QueryTask("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
var query = new Query();
query.returnGeometry = false;
query.outFields = [
"SQMI", "STATE_NAME", "STATE_FIPS", "SUB_REGION", "STATE_ABBR",
"POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI", "HOUSEHOLDS",
"MALES", "FEMALES", "WHITE", "BLACK", "AMERI_ES", "ASIAN", "OTHER",
"HISPANIC", "AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29",
"AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"
];
on(dom.byId("execute"), "click", execute);
function execute () {
query.text = dom.byId("stateName").value;
queryTask.execute(query, showResults);
}
function showResults (results) {
var resultItems = [];
var resultCount = results.features.length;
for (var i = 0; i < resultCount; i++) {
var featureAttributes = results.features.attributes;
for (var attr in featureAttributes) {
resultItems.push("<b>" + attr + ":</b> " + featureAttributes[attr] + "<br>");
}
resultItems.push("<br>");
}
dom.byId("info").innerHTML = resultItems.join("");
});
});widget.html
<div>
<input type="text" id="stateName" value="California">
<input id="execute" type="button" value="Get Details">
<br />
<div id="info" style="padding:5px; margin:5px; background-color:#eee;">
</div>
</div>
