469,344 Members | 5,535 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,344 developers. It's quick & easy.

add items to dojo combo box dynamically

Hi All,

I have tried many ways but I can't add the item to dojo combo box dynamically. There are two combobox in my jsp, One is continent values another is country values, On changing the continent values the countries list gets loaded in the combo box. It works fine in normal HTML code but not in dojo combo box.

To add the items in combo box dynamically using HTML code is

countryDetails.options[countryDetails.options.length] = new Option(label, value);

What is the code to add the items in combo box dynamically using DOJO ComboBox (dijit ComboBox) ?

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  4. <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
  5. <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
  6.  
  7. <html>
  8. <head>
  9. <title>Ajax and Json </title>
  10.  
  11.  <  <link rel="StyleSheet" type="text/css" href="https://xyz.com/dojoTK/v1.1/dijit/themes/tundra/tundra.css">
  12.     <link rel="StyleSheet" type="text/css" href="https://xyz.com/dojoTK/v1.1/dijit/themes/soria/soria.css">
  13.     <link rel="StyleSheet" type="text/css" href="https://xyz.com/dojoTK/v1.1/dojo/resources/dojo.css">
  14.  
  15.     <script type="text/javascript">
  16.       var djConfig = {
  17.         baseScriptUri : "v1.1/dojo/",
  18.         parseOnLoad : true
  19.       };
  20.     </script>
  21.  
  22.    <script type="text/javascript" src="https://xyz.com/dojoTK/v1.1/dojo/dojo.js"></script>
  23.     <script>
  24.         dojo.require("dijit.form.Button");
  25.         dojo.require("dojo.data.ItemFileReadStore");
  26.         dojo.require("dijit.form.FilteringSelect");
  27.         dojo.require("dijit.form.ComboBox");    
  28.  
  29.             var httpRequest = null;
  30.  
  31.             function getDescriptionAsJSON() 
  32.             {
  33.                                var ijsoncontinent = document.getElementById('ijsoncontinent');
  34.                                 var countryDetails = document.getElementById('icountries');
  35.                 countryDetails.length=0;
  36.                                     var url = contextPath+"/dojoWebForms/json/jsonNew?ijsoncontinent="+escape(ijsoncontinent.value);
  37.                 if(window.XMLHttpRequest){
  38.                     httpRequest = new XMLHttpRequest();
  39.                 }
  40.                 else if(window.ActiveXObject){
  41.                     httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  42.                 }
  43.  
  44.                 httpRequest.open("GET", url, true);
  45.                 httpRequest.onreadystatechange = handler;
  46.                 httpRequest.send(null);
  47.             }
  48.  
  49.             function handler() {
  50.                 if (httpRequest.readyState == 4) {
  51.                     if (httpRequest.status == 200) {
  52.                         processJSON();
  53.                     }
  54.                 }
  55.             }    
  56.  
  57.     function processJSON() 
  58.     {                    
  59.                 var jsonData = httpRequest.responseText;
  60.                 var jsonObject = eval('('+jsonData+')');
  61.                             var countryDetails = document.getElementById('icountries');
  62.                     var label="";
  63.                             var value="";                         
  64.                              for(var i=0; i<jsonObject.country.length; i++) 
  65.                               {
  66.                                    label = jsonObject.country[i].country_title;
  67.                     value = jsonObject.country[i].country_title;
  68.              countryDetails.options[countryDetails.options.length] = new Option(label, value);
  69.  
  70.                 }
  71.  
  72.            // Add the items to Dojo ComboBox dynamically        
  73.             /*    
  74.                 var dojoCompo = dijit.byId('ext');
  75.                 for(var j=0; i<jsonObject.country.length; j++) 
  76.                 {
  77.                  jsonObject.newItem({jsonObject.country[j].country_title});
  78.  
  79.                 }    
  80.  
  81.                 dojoCompo.attr('store',jsonObject);               
  82.              */   
  83.  
  84.              var tld = new Array('.com', '.net', '.org', '.info', '.biz', '.me');
  85.              var ln = tld.length;
  86.              var dojoCompo = dijit.byId('ext');
  87.              var options = new dojo.data.ItemFileWriteStore({data: {identifier: 'name', items:[]}});
  88.              alert("option val is      "+options);
  89.            // var options = new dojo.data.ItemFileWriteStore({'country':[]});
  90.              for (var j=0; j < ln; j++) {
  91.              //options.newItem({country: jsonObject.country[j]});
  92.                   options.newItem({name: tld[i]});
  93.      }
  94.              dojoCompo.attr('store',options);                          
  95.  
  96.   }
  97.         </script>
  98. </head>
  99. <body class="tundra">
  100.     <h2> AJAX & JSON </h2>    
  101. <br><br>
  102. <table>
  103.     <tr>
  104.         <td>    
  105.                 Continent
  106.         </td>
  107.         <td>                     
  108.                <select name="ijsoncontinent" id="ijsoncontinent"
  109.                     dojoType="dijit.form.ComboBox"
  110.                     autocomplete="false"
  111.                     value="select" onchange="getDescriptionAsJSON()">                    
  112.                     <option value="1">Africa</option>
  113.                     <option value="2">Antarctica</option>
  114.                     <option value="3">Asia</option>
  115.                     <option value="4">Australia</option>                    
  116.                     <option value="5">Europe</option>
  117.                     <option value="6">North America</option>
  118.                     <option value="7">South America</option>
  119.  
  120.                  </select>
  121.         </td>   
  122.     </tr>        
  123.     <tr>
  124.         <td>    
  125.             Country
  126.         </td>
  127.         <td> 
  128.             <select  id="icountries" name="countries" style="width:250px;" >
  129.  
  130.         </select>
  131.         </td>
  132.     </tr>
  133.  
  134.  
  135. </table>
  136. <br><br>
  137.  
  138. <select id="ext" name="ext" dojoType="dijit.form.ComboBox"> </select>
  139.  
  140. </body>
  141. </html>
  142.  
So kindly give your suggestion ASAP.

Thanks for Advance.

Thanks,

P.Kumaran
Apr 13 '10 #1
1 15457
acoder
16,027 Expert Mod 8TB
See if this example helps.
Apr 29 '10 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Gian Paolo | last post: by
3 posts views Thread by gaya3 | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.