Cannot Get value: data-dojo-attach-point

3720
17
Jump to solution
01-24-2018 08:11 AM
Highlighted
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)
Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
MVP Esteemed Contributor

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
Highlighted
MVP Esteemed Contributor

James,

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

Reply
0 Kudos
Highlighted
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,
...
Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

James,

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

var appNo = this.appNoInput.get("value");
Reply
0 Kudos
Highlighted
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));
      },
Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Highlighted
MVP Esteemed Contributor

James,

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

Highlighted
MVP Frequent Contributor

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

Reply
0 Kudos
Highlighted
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">‍‍‍‍
Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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));
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Reply
0 Kudos