I have a grid that needs a click event. The grid populates fine, but the click event isn't hooked up correctly. I thought I could reference other functions in my modules, but instead it tells me it isn't defined. I know sometimes if the function you're calling has a problem, it will act like the function isn't there, but I tried commenting out everything but a single line that made a console.log call and it still says "Uncaught ReferenceError: executeSpecialtySearch is not defined.
define([ "dojo/dom", "dojo/on", "dojo/dom-class", "dojo/dom-construct", "dojo/_base/array", "dojo/store/Memory", "esri/tasks/QueryTask", "esri/tasks/query", "extras/codeLookup" ], function( dom, on, domClass, domConstruct, arrayUtils, Memory, QueryTask, Query, codeLookup){ return { createSpecialtyList: function(catCode, dataGrid, crossRefTable){ if (domClass.contains('specialtyDiv', 'div-visible')) { domClass.toggle('specialtyDiv', 'div-visible'); } var data; var query = new Query(); var whereClause = "ID_CATEGORY_TYPE_FK" + " = '" + catCode + "'"; query.where = whereClause; query.outFields = ['ID_SPECIALTY_FK']; query.returnDistinctValues = true; var qTask = new QueryTask(crossRefTable.url); qTask.execute(query, function(results){ var data = arrayUtils.map(results.features, function(feature){ return { 'id': feature.attributes.ID_SPECIALTY_FK, 'name': codeLookup.findSpecDesc(feature.attributes.ID_SPECIALTY_FK), 'value': feature.attributes.ID_SPECIALTY_FK }; }); var currentMemory = new Memory({ data: data, idProperty: 'id' }); var specDropdown = new dataGrid({ selectionMode: 'single', store: currentMemory, showHeader: false, cellNavigation: false, columns: { "id": "id", "name": "name", "value": "value" }, renderRow: function(obj){ var divNode = domConstruct.create('div', { className: obj.name }); domConstruct.place(document.createTextNode(obj.name), divNode); return divNode; } }, "specialtyDiv"); specDropdown.on('.dgrid-row:click', function(event){ row = specDropdown.row(event); var specCode = [row.data.value][0]; var specDesc = [row.data.name][0]; specType = specDesc; // console.log("Searching: " + catDesc + ", cat Code: " + catCode); executeSpecialtySearch(specCode); //fails here }); specDropdown.addKeyHandler(13, function(event){ //added for Keyboard event row = specDropdown.row(event); var specCode = [row.data.value][0]; var specDesc = [row.data.name][0]; specType = specDesc; // console.log("Searching: " + catDesc + ", cat Code: " + catCode); executeSpecialtySearch(specCode); }); specDropdown.startup(); specDropdown.sort('name'); }); return data; }, emptySpecDropdown: function(){ specType = ""; domConstruct.empty(dom.byId('specialtyDiv')); domClass.toggle('specialtyDiv', 'div-visible'); dom.byId('specHeader').innerHTML = ""; if (domClass.contains('specialtyDiv', 'dgrid')) { domClass.remove(dom.byId('specialtyDiv'), "dgrid dgrid-grid"); } }, executeSpecialtySearch: function(specCode){ var query = new Query(); var initWhereClause = app.featureLayer.getDefinitionExpression(); var appendSpecClause = "ID_SPECIALTY_FK" + " = '" + specCode + "'"; var newWhereClause = "(" + appendSpecClause + ") AND (" + initWhereClause + ")"; app.featureLayer.setDefinitionExpression(newWhereClause); var txt = searchType + "; " + specType; dom.byId('subHeader').innerHTML = "Medicaid Provider Search: " + txt; dom.byId('gridHeader').innerHTML = txt + " providers available in this area." } } });
I'm confused when I should separate the functions with this syntax:
functionName: function (myParam) {
},
myOtherFunction : function (myotherParam){
}
and when I should leave it more like
myinitFunction: function (myParam) {
myNestedFunction(myParam) {
}
}
It seems like the first style is what you'd use if you were wanted to group a few sets of functions together and called externally and the other when the functions are more internal.
Solved! Go to Solution.
I changed the location/syntax of executeSpecialtySearch: function(specCode){ to be within createSpecialtyList
as
return {
createSpecialtyList: function(catCode, dataGrid, crossRefTable){
var specType = "";
var data;
var query = new Query();
var whereClause = "ID_CATEGORY_TYPE_FK" + " = '" + catCode + "'";
if (domClass.contains('specialtyDiv', 'div-visible')) {
domClass.toggle('specialtyDiv', 'div-visible');
}
query.where = whereClause;
....
function executeSpecialtySearch(specCode){
.....
}
},
emptySpecDropdown: function(){
.....
It was a scope problem, I just needed to study it a bit more.
It looks like a scoping issue - what happens if you make the function global?
I changed the location/syntax of executeSpecialtySearch: function(specCode){ to be within createSpecialtyList
as
return {
createSpecialtyList: function(catCode, dataGrid, crossRefTable){
var specType = "";
var data;
var query = new Query();
var whereClause = "ID_CATEGORY_TYPE_FK" + " = '" + catCode + "'";
if (domClass.contains('specialtyDiv', 'div-visible')) {
domClass.toggle('specialtyDiv', 'div-visible');
}
query.where = whereClause;
....
function executeSpecialtySearch(specCode){
.....
}
},
emptySpecDropdown: function(){
.....
It was a scope problem, I just needed to study it a bit more.
Tracy,
I wasn't sure if you were looking to nest it there - do you think you'll ever want to access the method as part of this module without being in context of createSpecialtyList?
No, I don't think so. The functionality is particular to that one grid.