Hi all,
I am using a template from GitHub(ESRI) and it seems like the search tool is giving me a random error after i click on the suggestion:
line 598:
Code:
var projectid = result.results[result.numResults][0].feature.attributes.PROJECT_ID;
All the code
Code:
on(this._geocoder, 'search-results', lang.hitch(this, function (result) {
if(result){
var projectid = result.results[result.numResults][0].feature.attributes.PROJECT_ID;
//result.results[result.numResults][0].feature.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255]), 2), new Color([255, 255, 0, 0.25]))
//console.log(result.results[result.numResults][0].feature);
window.history.pushState(projectid, null, "?projectid=" + projectid);
saveState.push(result.results[result.numResults][0].feature.attributes.PROJECT_ID);
this._selectProject(projectid);
var graphicExt = result.results[result.numResults][0].feature.geometry.getExtent();
//console.log(graphicExt);
mapobject.infoWindow.pagingInfo = true;
mapobject.infoWindow.pagingControls = true;
mapobject.infoWindow.titleInBody = true;
//mapobject.infoWindow.setTitle(result.results[result.numResults][0].feature.attributes.Description);
mapobject.infoWindow.setContent("<div style='font-size: 12px;line-height: 16px;font-weight: bold;'>"+result.results[result.numResults][0].feature.attributes.Description +"</div><div style='border-top: 1px solid #eee;margin-top: 6px;margin-bottom: 6px'></div>" +
"<table><tr><td style='padding-right: 5px;color: #888888;'>Project </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.PROJECT_ID + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Project Name </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.Description + "</td></tr>"+
"<tr><td style='padding-right: 5px;color: #888888;'>Project Details </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.PublicProjDesc + "</td></tr>"+
"<tr><td style='padding-right: 5px;color: #888888;'>Project Manager</td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.ProjMgrName + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Project Cost ($) </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.ProjectCost + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Supervisor Districts </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.SuperDistricts + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>TIM Zones </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.TIMZones + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Funding Sources </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.FundSources + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Construction Start </td><td style='padding-right: 5px;color: #333;'>" + result.results[result.numResults][0].feature.attributes.ConstrStartFY + "</td></tr></table>"
);
mapobject.infoWindow.show(graphicExt.getCenter());
mapobject.setExtent(graphicExt.expand(2));
}
}));
Solved! Go to Solution.
Maybe something like this:
on(this._geocoder, 'search-results', lang.hitch(this, function (result) {
if(result){
var _result = result.results[result.numResults - 1][0];
var _resultFeature = _result.feature;
var _resultFeatureAtrributes = _resultFeature.attributes;
var projectid = _resultFeatureAtrributes.PROJECT_ID;
_resultFeature.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255]), 2), new Color([255, 255, 0, 0.25]))
console.log(_resultFeature);
window.history.pushState(projectid, null, "?projectid=" + projectid);
saveState.push(_resultFeatureAtrributes.PROJECT_ID);
this._selectProject(projectid);
var graphicExt = _resultFeature.geometry.getExtent();
//console.log(graphicExt);
mapobject.infoWindow.pagingInfo = true;
mapobject.infoWindow.pagingControls = true;
mapobject.infoWindow.titleInBody = true;
//mapobject.infoWindow.setTitle(result.results[result.numResults][0].feature.attributes.Description);
mapobject.infoWindow.setContent("<div style='font-size: 12px;line-height: 16px;font-weight: bold;'>" + _resultFeatureAtrributes.Description +"</div><div style='border-top: 1px solid #eee;margin-top: 6px;margin-bottom: 6px'></div>" +
"<table><tr><td style='padding-right: 5px;color: #888888;'>Project </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.PROJECT_ID + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Project Name </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.Description + "</td></tr>"+
"<tr><td style='padding-right: 5px;color: #888888;'>Project Details </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.PublicProjDesc + "</td></tr>"+
"<tr><td style='padding-right: 5px;color: #888888;'>Project Manager</td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ProjMgrName + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Project Cost ($) </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ProjectCost + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Supervisor Districts </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.SuperDistricts + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>TIM Zones </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.TIMZones + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Funding Sources </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.FundSources + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Construction Start </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ConstrStartFY + "</td></tr></table>"
);
mapobject.infoWindow.show(graphicExt.getCenter());
mapobject.setExtent(graphicExt.expand(2));
}
}));
Note, I only did a quick smoke test, so you might want to test thoroughly to make sure it's working as intended.
Do you have the application accessible, either on your own site, or maybe something like JSFiddle? What template on GitHub are you using? Have you tried debugging result on 598?
Chris,
I have done some more testing since yesterday.
The app is here: Capital Improvement Projects
1) When you start the app the search toolbar works and I get that arrow to the left
2) When I pass a query URL like this :"Capital Improvement Projects ", then try to use the search tool it stops working and gives me the error message I posted above and the search toolbar does not show the drop down arrow anymore.
Any idea why?
On initial load, I'm not able to get a drop-down, but if I start typing "7" and click on the recommendation "77123 Alder Drive..." I get the exception in the console. Debugging this line:
result.results[result.numResults][0].feature.attributes.PROJECT_ID
I see that you've got one result in the array, so result.numResults = 1. That's not a valid index since it is zero based... using this:
result.results[0][0].feature.attributes.PROJECT_ID
I got the result - "77123":
Changing the js file in Chrome, it works. Here's the result:
You might want to try "result.numResults - 1" in your code since it's zero based. I'd probably also refactor your function to reduce code replication.
Maybe something like this:
on(this._geocoder, 'search-results', lang.hitch(this, function (result) {
if(result){
var _result = result.results[result.numResults - 1][0];
var _resultFeature = _result.feature;
var _resultFeatureAtrributes = _resultFeature.attributes;
var projectid = _resultFeatureAtrributes.PROJECT_ID;
_resultFeature.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255]), 2), new Color([255, 255, 0, 0.25]))
console.log(_resultFeature);
window.history.pushState(projectid, null, "?projectid=" + projectid);
saveState.push(_resultFeatureAtrributes.PROJECT_ID);
this._selectProject(projectid);
var graphicExt = _resultFeature.geometry.getExtent();
//console.log(graphicExt);
mapobject.infoWindow.pagingInfo = true;
mapobject.infoWindow.pagingControls = true;
mapobject.infoWindow.titleInBody = true;
//mapobject.infoWindow.setTitle(result.results[result.numResults][0].feature.attributes.Description);
mapobject.infoWindow.setContent("<div style='font-size: 12px;line-height: 16px;font-weight: bold;'>" + _resultFeatureAtrributes.Description +"</div><div style='border-top: 1px solid #eee;margin-top: 6px;margin-bottom: 6px'></div>" +
"<table><tr><td style='padding-right: 5px;color: #888888;'>Project </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.PROJECT_ID + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Project Name </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.Description + "</td></tr>"+
"<tr><td style='padding-right: 5px;color: #888888;'>Project Details </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.PublicProjDesc + "</td></tr>"+
"<tr><td style='padding-right: 5px;color: #888888;'>Project Manager</td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ProjMgrName + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Project Cost ($) </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ProjectCost + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Supervisor Districts </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.SuperDistricts + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>TIM Zones </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.TIMZones + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Funding Sources </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.FundSources + "</td></tr>" +
"<tr><td style='padding-right: 5px;color: #888888;'>Construction Start </td><td style='padding-right: 5px;color: #333;'>" + _resultFeatureAtrributes.ConstrStartFY + "</td></tr></table>"
);
mapobject.infoWindow.show(graphicExt.getCenter());
mapobject.setExtent(graphicExt.expand(2));
}
}));
Note, I only did a quick smoke test, so you might want to test thoroughly to make sure it's working as intended.