Hi there, I'm currently using the code below to create a cascading dropdown menu. In this code, I have a function called xyz() which makes an AJAX call to a servlet and sets the result in a variable separated by commas. Then, I split the result by comma and store it into the second dropdown. The issue I'm facing is that when I change the value in the first dropdown, the second dropdown is not populated even though the AJAX call is made. And when I change the value for the second time, the second dropdown populates with the wrong value that was selected previously. Can you please help me identify what's causing this problem?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="js/dojo/dijit/themes/claro/document.css"/>
<link rel="stylesheet" href="js/dojo/dijit/themes/claro/claro.css" />
<script src='js/dojo/dojo/dojo.js' data-dojo-config=' parseOnLoad: true'></script>
<script>
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.ready");
dojo.require("dojo.store.Memory");
require(["dojo/parser", "dijit/form/ComboBox","dijit/form/TextBox","dojo/dom-construct"]);
function xyz(){
dojo.xhrPost({
// The URL to request
url: "populate",
timeout : 3000 ,
content: {
username: document.getElementById("state").value
},
load: function(result) {
require(["dijit/form/ComboBox", "dojo/ready","dojo/store/Memory"],
function(ComboBox,ready,Memory){
ready(function() {
dojo.connect(dijit.byId('state'), 'onChange', function() {
var stateSelect = dijit.byId('stateSelect');
if (!stateSelect) {
stateSelect = new ComboBox({id: "stateSelect",name:"select",value: "Select",searchAttr:"name"},"stateSelect");
}
var str_array = result.split(',');
var data = [];
dojo.forEach(str_array, function(item, idx) {
data.push({
id: idx,
name: item
});
stateSelect.set('store', new Memory({data: data}));
});
}); // dojo.connect
}); // ready
}); // require
}
});
}
</script>
</head>
<body class="claro">
<select data-dojo-type="dijit.form.ComboBox" id="state" name="state" onchange="xyz()" >
<option selected>Andaman Nicobar</option>
<option>Andhra Pradesh</option>
<option>Arunachal Pradesh</option>
</select>
<select data-dojo-type="dijit.form.ComboBox" id="stateSelect" name="stateSelect">
</select>
</body>