Results 1 to 3 of 3

Thread: How to change dropdown select values in roo with DOJO?

  1. #1
    Join Date
    Apr 2012
    Posts
    5

    Question [SOLVED] How to change dropdown select values in roo with DOJO?

    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:
    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.
    Code:
    [{"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}]
    Last edited by notnull; Apr 13th, 2012 at 02:03 PM. Reason: tagging as solved!

  2. #2
    Join Date
    Apr 2012
    Posts
    5

    Lightbulb More Information

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

    Code:
    <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:

    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);
                        }
    							
    				}

  3. #3
    Join Date
    Apr 2012
    Posts
    5

    Cool Problem Solved!!

    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:

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

    Code:
    <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>

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •