Cannot Get value: data-dojo-attach-point

6389
17
Jump to solution
01-24-2018 08:11 AM
JamesCrandall
MVP Frequent Contributor

Attempting to build a new widget and having difficulty acquiring the value found in a textbox control in the widget.html and getting the error: "this.<name>.get is not a function".  Hopefully I'm just missing the obvious.  And thanks to Robert and this group for the jumpstart!

Widget.html (line 5 has the appNoInput reference I'm trying to get the value from)

<div>
  <div data-dojo-attach-point="tabIdentify">
    <div class="my-tab-node" data-dojo-attach-point="tabNode1">
      <div class="main-div" data-dojo-attach-point='mainDiv'>
    <label for="${id}_appNoInput">App No: </label><input type="text" class="appNoBox" id="${id}_appNoInput" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-attach-point="appNoInput" data-dojo-attach-event="keypress:_onSearchKeyPress" />
    <br/><br/>
    <div class="jimu-btn" data-dojo-attach-point="queryButton" data-dojo-attach-event="click:_onQueryAppNo">Query App No.</div>
     <br/><br/>

....and so forth

Widget.js

var appNo = this.appNoInput.get("value");
//generates the error "this.appNoInput.get is not a function"
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

James,

  So here is your Widget.js working now. Sometimes very simple things that are not obvious can get you and your case was the BaseWidget has to be listed before _WidgetsInTemplateMixin in the declare array:

define(['dojo/_base/declare',
    'dijit/_WidgetsInTemplateMixin',
    'jimu/BaseWidget',
    'jimu/dijit/TabContainer',
    'jimu/utils',
    'dojo/_base/lang',
    'dojo/on',
    'dojo/Deferred',
    'dojo/_base/Color',
    'dojo/_base/array',
    'dojo/dom-construct',
    'dojo/dom-class',
    'dojo/keys',
    'dijit/form/ValidationTextBox',
    'esri/tasks/query',
    'esri/tasks/QueryTask'
  ],
  function(declare,
    _WidgetsInTemplateMixin,
    BaseWidget,
    TabContainer,
    utils,
    lang,
    on,
    Deferred,
    Color,
    array,
    domConstruct,
    domClass,
    keys,
    ValidationTextBox,
    Query,
    QueryTask
  ) {
    return declare([BaseWidget, _WidgetsInTemplateMixin], {
      baseClass: "jimu-widget-customwidget",

      startup: function() {
        window.map = this.map;
        window.widget = this;
        this.inherited(arguments);
        this.lookupLayerUrl = this.config.lookupLayerUrl;
        this.queryTask = new QueryTask(this.lookupLayerUrl + "/1");
      },

      postCreate: function() {
        this._initTabContainer();
      },

      _initTabContainer: function() {
        var tabs = [];
        tabs.push({
          title: 'Tab 1',
          content: this.tabNode1
        });
        tabs.push({
          title: 'Tab2',
          content: this.tabNode2
        });
        this.selTab = 'Tab 1';
        this.tabContainer = new TabContainer({
          tabs: tabs,
          selected: this.selTab
        }, this.tabIdentify);
        this.tabContainer.startup();
        this.own(on(this.tabContainer, 'tabChanged', lang.hitch(this, function(title) {
          if(title !== 'Tab 1') {
            //do something now that Tab 2 has been selected
          }
        })));
        utils.setVerticalCenter(this.tabContainer.domNode);
      },

      onReceiveData: function(name, widgetId, data /*,historyData*/ ) {
        if(name !== "eSearch") {
          // We only care about messages from the
          //    search widget.
          console.log('no esearch widget');
          return;
        }
        console.log('onReceiveData fx')
        console.log('data.item.title: ', data.item.title)
        this.appNoInput.set("value", data.item.title);
      },

      _onSearchKeyPress: function(evt) {
        //  summary:
        //      If the enter key is pressed, query for the app id.

        if(evt.charOrCode === keys.ENTER) {
          lang.hitch(this, this._onQueryAppNo());
        }
      },

      _onQueryAppNo: function() {
        var appNo = this.appNoInput.get("value");
        console.log('_onQueryAppNo value: ', appNo);
        var query = new Query();
        query.where = "APP_NO = '" + appNo + "'";
        query.outFields = ["*"];

        this.queryTask.execute(query).then(lang.hitch(this, this._populateForm));
      },

      resetForm: function() {
        this.mainForm.style.display = "none";
      }

    });
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

17 Replies
RobertScheitlin__GISP
MVP Emeritus

James,

   Do you have "dijit/form/ValidationTextBox" in your Widget.js define array?

0 Kudos
JamesCrandall
MVP Frequent Contributor

Yes! 

(this also made me go look/check and is helping me understand the various things I need to consider -- thanks!!!)

define(['dojo/_base/declare',
        'dijit/_WidgetsInTemplateMixin',
        'jimu/BaseWidget',
        'jimu/dijit/TabContainer',
        'jimu/utils',
        'dojo/_base/lang',
        'dojo/on',
        'dojo/Deferred',
  'dojo/_base/Color',
  'dojo/_base/array',
  'dojo/dom-construct',
  'dojo/dom-class',
  'dojo/keys',
  'jimu/dijit/LoadingIndicator',
  'jimu/dijit/Popup',
  'dijit/form/ValidationTextBox',
...

function(declare,
    _WidgetsInTemplateMixin,
    BaseWidget,
    TabContainer,
    utils,
    lang,
    on,
    Deferred,
    Color,
 array,
 domConstruct,
 domClass,
 keys,
    LoadingIndicator,
 Popup,
 ValidationTextBox,
...
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

James,

   Can I see the whole function that this code is in:

var appNo = this.appNoInput.get("value");
0 Kudos
JamesCrandall
MVP Frequent Contributor
_onQueryAppNo: function() {
           //  summary:
           //      When an application is queried via the widget,
           //      this function begins look up tasks.
    
               
           this.resetForm();
    
         var appNo = this.appNoInput.get("value");  //error occurs here
           
           console.log("appNo: ", appNo)
           var query = new Query();
           query.where = "APP_NO = '" + appNo + "'";
           query.outFields = ["*"];
    
           this.queryTask.execute(query).then(lang.hitch(this, this._populateForm));
      },
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

James,

  The scope of the function that your in there is different from the outer scope of it's parent function. So you use lang.hitch to maintain the scope:

      _onSearchKeyPress: function(evt){
           //  summary:
           //      If the enter key is pressed, query for the app id.
    
           if (evt.charOrCode === keys.ENTER){
            lang.hitch(this, this._onQueryAppNo());
           }
      },
      _onQueryAppNo: function() {
           //  summary:
           //      When an application is queried via the widget,
           //      this function begins look up tasks.
    
               
           this.resetForm();
    
         var appNo = this.appNoInput.get("value");  //error occurs here
           
           console.log("appNo: ", appNo)
           var query = new Query();
           query.where = "APP_NO = '" + appNo + "'";
           query.outFields = ["*"];
    
           this.queryTask.execute(query).then(lang.hitch(this, this._populateForm));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
RobertScheitlin__GISP
MVP Emeritus

James,

   Sorry look at my updated code above. I was try to do to many things at the same time when I posted that.

JamesCrandall
MVP Frequent Contributor

Thank you!  I'll take a stab at this shortly.

0 Kudos
JamesCrandall
MVP Frequent Contributor

Just reducing it down to the couple of functions I'm having issues with...

_onSearchKeyPress: function(evt){
        //  summary:
        //      If the enter key is pressed, query for the app id.

        if (evt.charOrCode === keys.ENTER){
          lang.hitch(this, this._onQueryAppNo());
            }
          },

_onQueryAppNo: function() {
        //  summary:
        //      When an application is queried via the widget,
        //      this function begins look up tasks.

        this.resetForm();
        //var appNo = this._getAppNo();
        var appNo = lang.hitch(this, this._getAppNo());
        console.log('_onQueryAppNo value: ', appNo);
        
        var query = new Query();
        query.where = "APP_NO = '" + appNo + "'";
        query.outFields = ["*"];

        this.queryTask.execute(query).then(lang.hitch(this, this._populateForm));
                      },

_getAppNo: function() {
        //  summary:
        //      Parse the current form application number.
        //this.appNoDiv.innerHTML = this.currentFeature.APP_NO
        return this.appNoInput.get("value").trim();
        
        },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

When looking at console.log('_onQueryAppNo value: ', appNo); it basically prints out the entire html for that control -- this is what shows in the dev tools log:

For the line in the widget.js 
console.log('_onQueryAppNo value: ', appNo);

This is the log prints in Chrome dev tools console:

<input type="text" class="appN<input type="text" class="appNoBox" id="widgets_blah_Widget_36_appNoInput" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-attach-point="appNoInput" data-dojo-attach-event="keypress:_onSearchKeyPress">oBox" id="widgets_RegExhibits_Widget_36_appNoInput" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-attach-point="appNoInput" data-dojo-attach-event="keypress:_onSearchKeyPress">‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

James,

  I see not need for the _getAppNo function.

_onQueryAppNo: function() {
  //  summary:
  //      When an application is queried via the widget,
  //      this function begins look up tasks.

  this.resetForm();
  var appNo = this.appNoInput.get("value");
  console.log('_onQueryAppNo value: ', appNo);
        
  var query = new Query();
  query.where = "APP_NO = '" + appNo + "'";
  query.outFields = ["*"];

  this.queryTask.execute(query).then(lang.hitch(this, this._populateForm));
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos