populate a combobox in jsviewer widget

Discussion created by successstory on May 10, 2013
Latest reply on May 12, 2013 by successstory

Like • Show 0 Likes0
Comment • 4

I'm woriking with jsviewer and JSAPI v:2.8. in one of my widgets I have a combobox which I want to be populated once the widget is opened .It should be populated with a field values coming from a layer in mapservice. I have already the code to populate the combobox,I found it here:http://blogs.esri.com/esri/arcgis/2009/10/07/using-javascript-to-populate-a-combobox-with-unique-values/ , but I can't use it correctly .I think the problem is in the way the function that populate the combobox is called(in startup
function ) or the widget can't access to the config data. pleaze if you have any idea ,I will be grateful.

Outcomes

4 Replies

vinaybansal May 10, 2013 4:25 AM

Try this.

[HTML]<select name="selectFilter" id="mySelectControl" dojotype="dijit.form.Select">
</select>[/HTML]

var selectControl= dijit.byId("mySelectControl");
        if (this.fieldValues!= null && this.fieldValues.length > 0) {
            selectControl.addOption({ disabled: false, label: "- Values-", selected: true, value: "- Values-" });
            for (icnt = 0; icnt < this.fieldValues.length; icnt++) {
                selectControl.addOption(
                        { disabled: false,
                            label: this.fieldValues[icnt],
                            selected: false,
                            value: this.fieldValues[icnt]
                        });
            }
        }

Actions

successstory May 10, 2013 6:34 AM

Try this.

[HTML]<select name="selectFilter" id="mySelectControl" dojotype="dijit.form.Select">
</select>[/HTML]

var selectControl= dijit.byId("mySelectControl");
        if (this.fieldValues!= null && this.fieldValues.length > 0) {
            selectControl.addOption({ disabled: false, label: "- Values-", selected: true, value: "- Values-" });
            for (icnt = 0; icnt < this.fieldValues.length; icnt++) {
                selectControl.addOption(
                        { disabled: false,
                            label: this.fieldValues[icnt],
                            selected: false,
                            value: this.fieldValues[icnt]
                        });
            }
        }

thank you for replying ,
for the code you posted it seems that you use the field values stocked in json file,however, I want to populate the combobox
dynamically from my layer.this is my js code ,I want just to know , if I missed something so that is doesn't work .thanx again:)

 dojo.provide("com.esri.solutions.jsviewer.widgets.DemoWidget");
dojo.require("com.esri.solutions.jsviewer._BaseWidget");
dojo.require("com.esri.solutions.jsviewer._MapGraphicsMaintainer");
dojo.require("dojo.i18n");
dojo.requireLocalization("com.esri.solutions.jsviewer.widgets", "DemoWidgetStrings");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ComboBox");
dojo.require("esri.tasks.query");
dojo.declare( 
"com.esri.solutions.jsviewer.widgets.DemoWidget",
[com.esri.solutions.jsviewer._BaseWidget, com.esri.solutions.jsviewer._MapGraphicsMaintainer],
{
url: "",
fields:"",
query:"",
zoomScale:""
_module: "com.esri.solutions.jsviewer.widgets",
templatePath: dojo.moduleUrl("com.esri.solutions.jsviewer.widgets", "templates/DemoWidget.html"),
i18nStrings: null,
postMixInProperties: function() {
this.inherited(arguments);
if (this.configData) {
var L=this.configData.demo;
this.url = L.layer;
this.fields=L.fields;
this.query=L.query;
this.zoomScale = L.zoomScale;
}
this.i18nStrings = dojo.i18n.getLocalization( this._module, "DemoWidgetStrings");
},
postCreate: function(){
this.inherited(arguments);
dojo.parser.parse(this.domNode);
},
startup: function() {
try {
this.inherited(arguments);
if (this._initialized) { return; }
this.getAllNamedChildDijits();
this.init();
this.connects.push( dojo.connect(this.widgets.btnRecenter, "onClick", this, "onRecenter"));

this._initialized = true;
}
catch (err) {
console.error("DemoWidget::startup", err);
}
this.init();
},
onRecenter: function() {
var p = new esri.geometry.Point(-118.24799,33.975004);
this.map.centerAt(p);
},
init: function() 
{

//Query task to populate dropdown list with country names*/


try {
if (this.url) {
this.setMessage(this.i18nStrings.msgLoad, true);
this.clearResults();


var url=this.url;

stateQueryTask = new esri.tasks.QueryTask(url); 
stateQuery = new esri.tasks.Query();
stateQuery.returnGeometry = false;
stateQuery.outFields = this.fields; 
stateQuery.where = this.query; 
stateQueryTask.execute(stateQuery,updateStateDD)

}
} 
catch (err) {
console.error("DemoWidget::init", err);
} 
} ,

updateStateDD: function(results)
{
try{
var stateNames = new Array();
var selectObj = document.getElementById("countrySearch"); 

selectObj.options.length = 0;
var optObj = new Option("Choose a country");
selectObj.options[selectObj.options.length]=optObj;

for (var i=0, len=results.features.length; i<len; i++) {
var featureAttributes = results.features[i].attributes;
for (attribute in featureAttributes) {

var index = stateNames.indexOf(featureAttributes.country);
if(index == -1)
{ 
stateNames.push(featureAttributes.country)
}
}
}
}
catch (err) {
console.error("DemoWidget::updateStateDD", err);
}
},

}
);

Actions

vinaybansal May 12, 2013 10:49 PM
Are you getting the results in updateStateDD function?.And in result attributes are you getting the single field only.?
Like • Show 0 Likes0
Actions
successstory May 12, 2013 11:04 PM
Are you getting the results in updateStateDD function?.And in result attributes are you getting the single field only.?

Yeah, indeed, it work perfectely when it is in html file ( here is the example:http://serverapps.esri.com/javascript_examples/PopulateDropdownList.html) but doesn't with my widget .thank you for help :)
Like • Show 0 Likes0
Actions

GeoNet

The Esri Community

populate a combobox in jsviewer widget

Outcomes

Related Content

Recommended Content