topic Re: Getting error when using: 'dijit/form/ComboBox' and 'dojo/dom-construct' in Web AppBuilder Custom Widgets Questions

Getting error when using: 'dijit/form/ComboBox' and 'dojo/dom-construct'

WarleyMendes — Tue, 23 Jan 2018 12:30:03 GMT

Hi Guys,

I'm trying to insert values in a ComboBox using domConstruct.create.
When I select a city (cbxMunicipio) the regins ComboBox (cbxBairro) needs to be filled.

But I'm getting error in the follow line:
domConstruct.create("option", { value: "111", innerHTML: "test" }, cbxB);

My Code:

Widget.html:

<div>
Municipio:
<select data-dojo-attach-point="cbxMunicipio" data-dojo-type="dijit/form/ComboBox"
   style="width:200px;" value="Selecione...">
   <option value="4000">Vitoria</option>
   <option value="3500">Serra</option>
</select>

Bairro:
<select data-dojo-attach-point="cbxBairro" data-dojo-type="dijit/form/ComboBox" style="width:200px;">
</select>

</div>

Widget.js

define([
'dojo/_base/declare',
'jimu/BaseWidget',
'dijit/_WidgetsInTemplateMixin',
'dijit/form/ComboBox',
'dojo/_base/lang',
'dojo/dom-construct',
'dojo/dom',
'dojo/on',
'dojo/domReady!'
],
function(
declare,
BaseWidget,
_WidgetsInTemplateMixin,
ComboBox,
lang,
domConstruct,
dom,
on
) {
return declare([BaseWidget, _WidgetsInTemplateMixin], {

baseClass: 'jimu-widget-customwidget',

startup: function() {
   this.inherited(arguments);
   console.log('startup');
},

onOpen: function(){
   on(this.cbxMunicipio, "change", lang.hitch(this, this._getMunicipioChange));
},

_getMunicipioChange: function(evt){

   var cbxB = domConstruct.create(this.cbxBairro);

   domConstruct.create("option", { value: "111", innerHTML: "test" }, cbxB);

   console.log('OK....');
}
});
});

Someone have any idea what I'm doing wrong?

Thanks,

Warley

Re: Getting error when using: 'dijit/form/ComboBox' and 'dojo/dom-construct'

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:08:23 GMT

Warley,

So this is the code I use for that:

_getMunicipioChange: function(evt){
   var option = {
     value: "111",
     label: "test"
   }
   this.cbxBairro.addOption(option);
   console.log('OK....');
}‍‍‍‍‍‍‍‍

In your code I am not sure why you were trying to use domConstruct on a already created and valid select element:

var cbxB = domConstruct.create(this.cbxBairro);‍

Re: Getting error when using: 'dijit/form/ComboBox' and 'dojo/dom-construct'

WarleyMendes — Tue, 23 Jan 2018 14:42:30 GMT

Hi Robert, thanks for your quick replay.

But I still getting error, because in dijit/form/ComboBox there is no addOptin function, as described on the API Documentation:

API Documentation - The Dojo Toolkit Version 1.10

Re: Getting error when using: 'dijit/form/ComboBox' and 'dojo/dom-construct'

KenBuja — Tue, 23 Jan 2018 14:51:45 GMT

The Select dijit has the addOption method

Re: Getting error when using: 'dijit/form/ComboBox' and 'dojo/dom-construct'

WarleyMendes — Sun, 12 Dec 2021 17:02:43 GMT

Hi Ken Buja, thanks for you replay.

I Change my code and it is working fine now.

define([
 'dojo/_base/declare', 
 'jimu/BaseWidget',
 'dijit/_WidgetsInTemplateMixin',
 'dijit/form/ComboBox',
 'dojo/store/Memory', 
 'dojo/_base/lang',
 'dojo/dom',
 'dojo/on',
 'dojo/domReady!'
 ],
 function(
 declare, 
 BaseWidget,
 _WidgetsInTemplateMixin,
 ComboBox,
 Memory,
 lang,
 dom, 
 on
 ) {
 return declare([BaseWidget, _WidgetsInTemplateMixin], {
 
 baseClass: 'jimu-widget-customwidget',
 
 startup: function() {
    this.inherited(arguments);
    console.log('startup');
 },
 
 onOpen: function(){ 
    on(this.cbxMunicipio, "change", lang.hitch(this, this._getMunicipioChange)); 
 },
 
 _getMunicipioChange: function(evt){
 
    var values = [];
 
    values.push(
       {id: "111", value: "111", name: "test1"},
       {id: "112", value: "112", name: "test2"},
       {id: "113", value: "113", name: "test3"}
    );
 
    var dataItems = { 
       identifier: "value", 
       label: "name", 
       items: values 
    }; 
 
    var store = new Memory({ 
       data: dataItems 
    });
 
    console.log(dataItems); 
    console.log(store); 
    this.cbxBairro.set("store", store); 
} 

});
});

The original link:

https://community.esri.com/message/558271?commentID=558271#comment-558271

Thank you guys,

Warley