Looks like there were a couple of errors.
1. In you 'outFields' parameter, the field needs to have quotes, i.e. "grades"
One thing I'm not sure is how to call the zoomTo function from the table. You may want to start a new thread for this.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Geocode Details</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
color: #353129;
}
#map {
margin: 0;
padding: 0;
}
#footerPane {
border: none;
height: 300px;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var locator, map;
require([
"esri/map", "esri/tasks/locator", "esri/SpatialReference", "esri/graphic",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/Font",
"esri/symbols/TextSymbol", "esri/geometry/Point", "esri/geometry/Extent",
"esri/geometry/webMercatorUtils", "dojo/_base/array", "esri/Color", "dojo/number",
"dojo/parser", "dojo/dom", "dojo/json", "dijit/registry", "dojo/on",
"dijit/form/Button", "dijit/form/Textarea", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
],
function(
Map, Locator, SpatialReference, Graphic,
SimpleLineSymbol, SimpleMarkerSymbol, Font,
TextSymbol, Point, Extent,
webMercatorUtils, arrayUtils, Color, number,
parser, dom, JSON, registry, on
) {
parser.parse();
map = new Map("map", {
basemap : "streets",
center : [-93.5, 41.431],
zoom : 5
});
locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
on(dom.byId("noDojo"), "click", locate);
//Draw and zoom to the result when the geocoding is complete
locator.on("address-to-locations-complete", function(evt) {
map.graphics.clear();
arrayUtils.forEach(evt.addresses, function(geocodeResult, index) {
//create a random color for the text and marker symbol
var r = Math.floor(Math.random() * 250);
var g = Math.floor(Math.random() * 100);
var b = Math.floor(Math.random() * 100);
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([r, g, b, 0.5]), 10), new Color([r, g, b, 0.9]));
var pointMeters = webMercatorUtils.geographicToWebMercator(geocodeResult.location);
var locationGraphic = new Graphic(pointMeters, symbol);
var font = new Font().setSize("12pt").setWeight(Font.WEIGHT_BOLD);
var textSymbol = new TextSymbol((index + 1) + ".) " + geocodeResult.address, font, new Color([r, g, b, 0.8])).setOffset(5, 15);
//add the location graphic and text with the address to the map
map.graphics.add(locationGraphic);
map.graphics.add(new Graphic(pointMeters, textSymbol));
});
var ptAttr = evt.addresses[0].location;
map.centerAndZoom(ptAttr, 19);
showResults(evt.addresses);
});
function showResults(results) {
var rdiv = dom.byId("resultsdiv");
rdiv.innerHTML = "<p><b>" + results.length + " Matching Results:</b></p>";
var content = [];
//start table
content.push("<table border='0'><tr>");
arrayUtils.forEach(results, function(result, index) {
var x = result.location.x.toFixed(5);
var y = result.location.y.toFixed(5);
content.push("<tr><td>");
content.push("<input type='button' id='zoomButton' value='Z' onclick='zoomTo(" + y + "," + x + ")'/>");
content.push("</td><td>");
content.push("<legend><b>" + (index + 1) + ". " + "<a target='window' href='http://test.com/" + result.attributes.LangCode + "'>" + result.address + "</a></b></legend>");
content.push("</td></tr>");
});
content.push("</tr></table>");
rdiv.innerHTML += content.join("");
}
//Perform the geocode. This function runs when the "Locate" button is pushed.
function locate() {
var address = {
SingleLine : dom.byId("address").value
};
var options = {
address : address,
outFields : ["grade"]
};
//optionally return the out fields if you need to calculate the extent of the geocoded point
locator.addressToLocations(options);
}
function zoomTo(lat, lon) {
var point = new Point(lon, lat, {
wkid : "4326"
});
/*var wmpoint = webMercatorUtils.geographicToWebMercator(point);
map.centerAt(wmpoint);*/
map.centerAndZoom(point, 19)
}
function showThing(thing) {
alert(thing);
}
function clearDiv() {
document.getElementById('resultsdiv').innerHTML = "";
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="gutters:false, design:'sidebar'"
style="width:50%;height:100%;">
<div>
Address :
<input type="text" id="address" size="60" value="380 New York St, Redlands, CA, 92373"/>
<!-- <button id="locate" data-dojo-type="dijit/form/Button">
Locate
</button> -->
<button id="noDojo">
Locate me without Dojo!
</button>
</div>
<div id="map"></div>
<div id="footerPane">
<div id="resultsdiv"></div>
<button onclick="clearDiv()">
Clear Div
</button>
</div>
</div>
</body>
</html>
