add items to dojo combo box dynamically

kumaran1982

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

  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
 
<html>

<head>

<title>Ajax and Json </title>
 
 <  <link rel="StyleSheet" type="text/css" href="https://xyz.com/dojoTK/v1.1/dijit/themes/tundra/tundra.css">

    <link rel="StyleSheet" type="text/css" href="https://xyz.com/dojoTK/v1.1/dijit/themes/soria/soria.css">

    <link rel="StyleSheet" type="text/css" href="https://xyz.com/dojoTK/v1.1/dojo/resources/dojo.css">
 
    <script type="text/javascript">

      var djConfig = {

        baseScriptUri : "v1.1/dojo/",

        parseOnLoad : true

      };

    </script>
 
   <script type="text/javascript" src="https://xyz.com/dojoTK/v1.1/dojo/dojo.js"></script>

    <script>

        dojo.require("dijit.form.Button");

        dojo.require("dojo.data.ItemFileReadStore");

        dojo.require("dijit.form.FilteringSelect");

        dojo.require("dijit.form.ComboBox");    
 
            var httpRequest = null;
 
            function getDescriptionAsJSON() 

            {

                               var ijsoncontinent = document.getElementById('ijsoncontinent');

                                var countryDetails = document.getElementById('icountries');

                countryDetails.length=0;

                                    var url = contextPath+"/dojoWebForms/json/jsonNew?ijsoncontinent="+escape(ijsoncontinent.value);

                if(window.XMLHttpRequest){

                    httpRequest = new XMLHttpRequest();

                }

                else if(window.ActiveXObject){

                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

                }
 
                httpRequest.open("GET", url, true);

                httpRequest.onreadystatechange = handler;

                httpRequest.send(null);

            }
 
            function handler() {

                if (httpRequest.readyState == 4) {

                    if (httpRequest.status == 200) {

                        processJSON();

                    }

                }

            }    
 
    function processJSON() 

    {                    

                var jsonData = httpRequest.responseText;

                var jsonObject = eval('('+jsonData+')');

                            var countryDetails = document.getElementById('icountries');

                    var label="";

                            var value="";                         

                             for(var i=0; i<jsonObject.country.length; i++) 

                              {

                                   label = jsonObject.country[i].country_title;

                    value = jsonObject.country[i].country_title;

             countryDetails.options[countryDetails.options.length] = new Option(label, value);
 
                }
 
           // Add the items to Dojo ComboBox dynamically        

            /*    

                var dojoCompo = dijit.byId('ext');

                for(var j=0; i<jsonObject.country.length; j++) 

                {

                 jsonObject.newItem({jsonObject.country[j].country_title});
 
                }    
 
                dojoCompo.attr('store',jsonObject);               

             */   
 
             var tld = new Array('.com', '.net', '.org', '.info', '.biz', '.me');

             var ln = tld.length;

             var dojoCompo = dijit.byId('ext');

             var options = new dojo.data.ItemFileWriteStore({data: {identifier: 'name', items:[]}});

             alert("option val is      "+options);

           // var options = new dojo.data.ItemFileWriteStore({'country':[]});

             for (var j=0; j < ln; j++) {

             //options.newItem({country: jsonObject.country[j]});

                  options.newItem({name: tld[i]});

     }

             dojoCompo.attr('store',options);                          
 
  }

        </script>

</head>

<body class="tundra">

    <h2> AJAX & JSON </h2>    

<br><br>

<table>

    <tr>

        <td>    

                Continent

        </td>

        <td>                     

               <select name="ijsoncontinent" id="ijsoncontinent"

                    dojoType="dijit.form.ComboBox"

                    autocomplete="false"

                    value="select" onchange="getDescriptionAsJSON()">                    

                    <option value="1">Africa</option>

                    <option value="2">Antarctica</option>

                    <option value="3">Asia</option>

                    <option value="4">Australia</option>                    

                    <option value="5">Europe</option>

                    <option value="6">North America</option>

                    <option value="7">South America</option>
 
                 </select>

        </td>   

    </tr>        

    <tr>

        <td>    

            Country

        </td>

        <td> 

            <select  id="icountries" name="countries" style="width:250px;" >
 
        </select>

        </td>

    </tr>
 
</table>

<br><br>
 
<select id="ext" name="ext" dojoType="dijit.form.ComboBox"> </select>
 
</body>

</html>

So kindly give your suggestion ASAP.

Thanks for Advance.

Thanks,

P.Kumaran

Apr 13 '10 #1

Subscribe Post Reply

15832

acoder

16,027

Expert Mod 8TB

See if this example helps.

Apr 29 '10 #2

by: TS | last post by:

Hi all, From my windows form, I opened a connection to a SQL database. Now I need to generate a combo box from a SELECT statement pointing to the last name column in the SQL tables. I am stuck...

Visual Basic .NET

A way to add in a combobox 2 items and hide one

by: Gian Paolo | last post by:

hi all i'm looking for a way to add 2 items in a combobox in the same line and hide one. i'm working on the code above but it returns me only the last value i entered and i do not know why.... ...

C# / C Sharp

How to create dynamic javascript arrays using dojo toolkits

by: plsHelpMe | last post by:

How to create dynamic javascript arrays using dojo toolkits Hello frens, I am in a big trouble. My objective is: I am having some categories shown by differnent radio buttons, on the click of...

Javascript

How to check when session is expired while using DOJO

by: plsHelpMe | last post by:

Hi All, I am having a problem. I am using DOJO toolkits to fetch some data on my webpage. Now suppose if i leave my webpage for some time and the session gets expired and then i try to click on...

Javascript

Reloading a second box using dojo frame work

by: raknin | last post by:

Hi, Hi, Now that I am handle the way of use the dojo combobox I moving to the next stage. What I want to do is updating a second combobox automatically when a value is selected in the first...

Javascript

Expand and Collapse (subgrids)in dojo.grid

by: gaya3 | last post by:

Hi, can anyone find error in the following example <%@ include file="JspBean.jsp" %> <%@ page import="java.util.*"%> <html> <head> <%

Javascript

Auto height in dojo grid

by: gaya3 | last post by:

How do i set autoHeight dynamically in dojo grid 1.1? please do help... Thanks in Advance

Javascript

about Cross Domain Dojo Resource Loading

by: kokababu | last post by:

I am trying to load dojo module from different domain; such as dojo.parser, dijit.form.TextBox etc. <html> <head> <script type="text/javascript"> djConfig = { isDebug: true,...

Javascript

Assigning values to Combo Box Items

by: mygirl22 | last post by:

Hi, I used this code to created 2 combo boxes General and Specific...and Only show Specific (Combo B) when Combo A is chosen..... What i need now is to know how to assign specific values to the...

Visual Basic 4 / 5 / 6

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

add items to dojo combo box dynamically

Similar topics