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) ?
So kindly give your suggestion ASAP.
Thanks for Advance.
Thanks,
P.Kumaran
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) ?
Code:
<%@ 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>
Thanks for Advance.
Thanks,
P.Kumaran
Comment