Announcement Announcement Module
Collapse
No announcement yet.
How to change dropdown select values in roo with DOJO? Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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, 02:03 PM. Reason: tagging as solved!

  • #2
    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);
                        }
    							
    				}

    Comment


    • #3
      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>

      Comment

      Working...
      X