Select to view content in your preferred language

populate a combobox in jsviewer widget

1053
4
05-10-2013 12:38 AM
khadijaahal_el_fadl
Emerging Contributor
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-val... , 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.
0 Kudos
4 Replies
VinayBansal
Frequent Contributor
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]
                        });
            }
        }
0 Kudos
khadijaahal_el_fadl
Emerging Contributor
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.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);
}
},

}
);
0 Kudos
VinayBansal
Frequent Contributor
Are you getting the results in updateStateDD function?.And in result attributes are you getting the single field only.?
0 Kudos
khadijaahal_el_fadl
Emerging Contributor
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 🙂
0 Kudos