How to change dropdown select values in roo with DOJO?

[notnull]

I have spend entire day to update "STATE" select box when "COUNTRY" select box changes. I am getting a valid AJAX response from the controller. But, I am failing to parse and update the STATE dropdown list via DOJO. Can any one figure out my mistake?

Here is my Javascript code:

<SCRIPT type="text/javascript">
	dojo.require("dojo.data.ItemFileReadStore");
	dojo.require("dojo.parser");

		dojo.addOnLoad(function() {
			dojo.connect(dijit.byId("_country_id"), "onChange", function() {
				var selectedCountryNode = dijit.byId("_country_id");
				var selectedCountry = dojo.trim(selectedCountryNode.value);
				
				dojo.xhrGet({
					url : "regions/country",
					timeout : 2000,
					handleAs: "json",
					content : {	country : selectedCountry},
					
					
					load : function(result) {
						var store = new dojo.data.ItemFileReadStore({
							identifier : "regionId",
							label: "region",
							items: result
							});
						var stateNode = dijit.byId('_state_id');
					   //What to do now????????
							   //How can i update the dropdownlist? stateNode?
									   
					}
				});
				
			});

		});
	</SCRIPT>

Below is the AJAX response received from the controller.

[{"adm1code":"CA10","code":"QC","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Quebec","regionId":35},{"adm1code":"CA01","code":"AB","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Alberta","regionId":36},{"adm1code":"CA08","code":"ON","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Ontario","regionId":37},{"adm1code":"CA03","code":"MB","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Manitoba","regionId":38},{"adm1code":"CA07","code":"NS","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Nova Scotia","regionId":39},{"adm1code":"CA11","code":"SK","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Saskatchewan","regionId":40},{"adm1code":"CA05","code":"NF","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Newfoundland and Labrador","regionId":41},{"adm1code":"CA04","code":"NB","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"New Brunswick","regionId":42},{"adm1code":"CA02","code":"BC","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"British Columbia","regionId":43},{"adm1code":"CA09","code":"PE","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Prince Edward Island","regionId":45},{"adm1code":"CA13","code":"NT","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Northwest Territories","regionId":46},{"adm1code":"    ","code":"CA","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Canada","regionId":580},{"adm1code":"CA12","code":"YT","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Yukon Territory","regionId":815},{"adm1code":"CA14","code":"NU","countryId":{"capital":"Ottawa ","comment":"","country":"Canada","countryId":43,"currency":"Canadian Dollar ","currencyCode":"CAD","fips104":"CA","internet":"CA","iso2":"CA","iso3":"CAN","ison":"124","mapReference":"North America ","nationalityPlural":"Canadians","nationalitySingular":"Canadian","population":31592805,"title":"Canada"},"region":"Nunavut","regionId":4996}]

[notnull]

I was able to Populate the combobox/dropdown list by removing "<form:select>" tag and replacing it with the following div tag:

<div id="_state_id" />

However, when I submit the form it doesn't submit the value for above div. I guess that's expected. Is there a work around for this in ROO?

Thank you!!


Javascript code:

var stateNode = dijit.byId('_state_id');
 if (!stateNode) {
                        //create city selction combo
                        new dijit.form.FilteringSelect({
                            name: "_state_id",
                            store: cityStore,
                            searchAttr : "region",
                        }, "_state_id");    
                    }else{
	                        stateNode.set('value',null);
	                        stateNode.store.close();
	                        stateNode.store = cityStore;
	                        
	                   		console.log(stateNode.store);
                    }
							
				}

[notnull]

I can now change values of "STATE" dropdown when country changes!!! Only thing missing is to LOAD initial values when page loads for the first time!

My JSPX form has:

<div id="_c_com_tougheasy_checkin_domain_User_state_id"><label for="state">State
        : *</label> <input id="state"  /></div> <br />

And corresponding javascript:

<script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dojo.data.ItemFileReadStore");

		dojo.addOnLoad(function() {
			dojo.connect(dijit.byId("_country_id"), "onChange", function() {
				var selectedCountryNode = dijit.byId("_country_id");
				var selectedCountry = dojo.trim(selectedCountryNode.value);

				var xhrArgs = {
					url : "regions/country",
					handleAs : 'json',
					content : {
						country : selectedCountry
					},
					load : function(dataFromServer) {
						countryChanged(dataFromServer);
					}
				};
				//make the ajax call
				dojo.xhrGet(xhrArgs);

				function countryChanged(dataFromServer) {
					//convert json to dojo filteringSelect options
					console.log(dataFromServer);
					
					var cityStore = new dojo.data.ItemFileReadStore({
						data:{
//						identifier : 'regionId',
						label : "region",
						items : dataFromServer
						}
					});
					
					cityStore.fetch();//NICE JOB HERE.. LOL
					
					
					console.log(cityStore);
					//dijit.byId('_state_id').store.root[0].innerText= "blah";
					
					//var oldStore = dijit.byId('_state_id').store;
					//console.log(oldStore);
					   //create city selction combo
	                        var stateNode = dijit.byId('state');
	                               //if already created the combo before
	           if (!stateNode) {
                        //create city selction combo
                        new dijit.form.FilteringSelect({
                            name: "state",
                            store: cityStore,
                            searchAttr : "region",
                        }, "state");    
                    }else{
	                        stateNode.set('value',null);
	                        stateNode.store.close();
	                        stateNode.store = cityStore;
	                        
	                   		console.log(stateNode.store);
                    }
							
				}

			});

		});
	</script>