Set first item in dojo filteringSelect onChange

Question

I am trying to solve the age old problem of loading two dependent drop downs (countries/states) in dojo.

I have two filtering selects to hold the list of countries and states. I am able to filter the state list when user selects a country. However, I am not able to set the first value from the list of states for the currently selected country.

In example below, US and CANADA are the only countries. On page load, 'US' and 'Alabama' appear correctly by default. When I switch to 'CANADA', I notice that the state list now has all the Canadian provinces, however I still see that 'Alabama' is still listed as the state. How can I set the first value of the Canandian province or the first US state programmatically. I am trying to set the first item in the filtering select as the default value.

Thanks for reading. Here's what I have so far.

var countries = {
    label: "name",
    identifier: "countryId",
    items: [
            {countryId: "USA", name: "United States of America"},
            {countryId: "CAN", name: "Canada"},

                    ]
};

var states = {
    label: "name",
    identifier: "stateId",
    items: [
      {stateId: "NJ", name: "NewJersey", countryId: "USA"},
            {stateId: "IL", name: "Illinois", countryId: "USA"},
            {stateId: "CO", name: "Colorado", countryId: "USA"},
            {stateId: "OH", name: "Ohio", countryId: "USA"},
            {stateId: "AL", name: "Alabama", countryId: "USA"},
            {stateId: "ON", name: "Ontario", countryId: "CAN"},
            {stateId: "BC", name: "British Columbia", countryId: "CAN"},
            {stateId: "QC", name: "Quebec", countryId: "CAN"},  
    ]
};

dojo.addOnLoad(function () {
    dojo.connect(dijit.byId('mycountry'), 'onChange', function (country) {
        console.log("on change event fired");
        loadStates(country);
        // set the default state after loading countries, after onChange event.
        var firstStateinFilteringSelect = ????
        dijit.byId('mystate').attr('displayedValue', firstStateinFilteringSelect);

        });
    // on page load, load only US states (US is set as a default country)
    // the default state is set to "Alabama" 
    loadStates(dijit.byId('mycountry').attr('value'));     
});

function loadStates(country){
    console.log(country);
            dijit.byId("mystate").query = {countryId: country};
}

</script>   
<div dojoType="dojo.data.ItemFileReadStore"
   jsId="countryStore"
   id="countryStore"
   data= "countries"
 </div>
 <select id="mycountry" 
    name="country"
    dojoType="dijit.form.FilteringSelect" 
    store="countryStore"
    searchAttr="name"   
    required="true"
    value="US"
    trim="true">    
 </select>

 <div dojoType="dojo.data.ItemFileReadStore"
    jsId="stateStore"
    id="stateStore"
    data= "states"
  </div>

 <select id="mystate" 
    name="state"
    dojoType="dijit.form.FilteringSelect" 
    store="stateStore"
    searchAttr="name"   
    required="true"
    value="AL"
    trim="true">    
 </select>

_I was able get around by calling below listed method after loadStates(country). However, this seems to be over complicated for a simple basic task. _ function setDefaultState(country) { var filteringSelect = dijit.byId('mystate'); filteringSelect.store.fetch({ query:{ countryId: country }, onComplete : function(items, request) { console.log(items.length); if (items.length > 0) { filteringSelect.setValue(request.store.getValue(items[0], "mystate")); } else { filteringSelect.setValue(""); } } }); } — aprajitha

Arutha conDoin Arutha conDoin · Accepted Answer · 2013-12-09T22:21:32

loadStates() is outside of your scope where you're calling it. Try this:

var thisWidget = this;

dojo.addOnLoad(function () {
    dojo.connect(dijit.byId('mycountry'), 'onChange', function (country) {
        ...
        // loadStates doesn't exist inside this function, so it has to be called
        // like this
        thisWidget.loadStates(country);
        ...

        });
    ...   
});

function loadStates(country){
    ...
}

Alternatively, you could just use lang.hitch:

dojo.addOnLoad(lang.hitch(this, function () {
        dojo.connect(dijit.byId('mycountry'), 'onChange', lang.hitch(this, function (country) {
            ...
            loadStates(country);
            ...

            }));
    ...   
}));

function loadStates(country){
    ...
}

Set first item in dojo filteringSelect onChange

1 Answers