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.
