- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-20-2015 05:46 AM
I have 3 levels of dropdown, where each dropdown is based on the other, this is loaded via a <g:evaluate>, but I am having issues getting it the relation/reference to work when the user selects the first value.
My HTML looks something like this.
<select id="parent_cat" class="cat_dropdown" onChange="checkCat(this);">
<option>-- Vælg kategori --</option>
<j:while test="${p_cat.next()}">
<option value="${p_cat.sys_id}">${p_cat.title}</option>
</j:while>
</select>
<select id="cat" class="cat_dropdown" disabled="disabled" onChange="checkBlanket(this);">
<option>-- Vælg område --</option>
</select>
<select id="blanket" class="cat_dropdown" disabled="disabled">
<option>-- Vælg blanket --</option>
</select>
Then I have a function like this:
function checkBlanket(elem) {
document.getElementById('blanket').disabled = !elem.selectedIndex;
var optionValue = elem.options[elem.selectedIndex].value;
console.log(optionValue);
<j:set var="jvar_category" value="${optionValue}"/>
<g:evaluate var="jvar_item" jelly="true">
var item = new GlideRecord('sc_cat_item');
item.addQuery('active', true);
item.addQuery('category', jelly.jvar_category);
item.query();
</g:evaluate>
<j:while test="${item.next()}">
var y = document.getElementById("blanket");
var yoption = document.createElement("option");
yoption.text = "${JS:item.name}".replace("${AMP}amp;","${AMP}");
yoption.value = "${item.sys_id}";
y.add(yoption);
</j:while>
}
However it is not working, it simply gives me a list of everything from the table and not limited by the category. The optionValue print is giving me the correct sys_id.
Does anyone have an idea what is going wrong here? And even better, what should I do to correct it.
Solved! Go to Solution.
- Labels:
-
Service Mapping

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-20-2015 01:43 PM
Something like this should be closer. Just need to eliminate the jelly tags in anything client-side in this case.
function checkBlanket(elem) {
document.getElementById('blanket').disabled = !elem.selectedIndex;
var optionValue = elem.options[elem.selectedIndex].value;
console.log(optionValue);
var item = new GlideRecord('sc_cat_item');
item.addQuery('active', true);
item.addQuery('category', optionValue);
item.query();
while(item.next()){
var y = document.getElementById("blanket");
var yoption = document.createElement("option");
yoption.text = item.name;
yoption.value = item.sys_id;
y.add(yoption);
}
}

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-20-2015 05:56 AM
Once you start talking about 'onChange' events in response to user interaction with fields, etc. that's all handled in traditional client-side javascript. The jelly tags in your 'checkBlanket' function need to be removed and replaced with standard client-side calls.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-20-2015 06:29 AM
Hi Mark,
Thanks! I will take a look at converting it to traditional javascript, I was stuck in the mindset of using Jelly.
Do you have an example of a replacement of the 'checkBlanket' client-side call? Even some psudo-code would be highly appreciated!

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-20-2015 01:43 PM
Something like this should be closer. Just need to eliminate the jelly tags in anything client-side in this case.
function checkBlanket(elem) {
document.getElementById('blanket').disabled = !elem.selectedIndex;
var optionValue = elem.options[elem.selectedIndex].value;
console.log(optionValue);
var item = new GlideRecord('sc_cat_item');
item.addQuery('active', true);
item.addQuery('category', optionValue);
item.query();
while(item.next()){
var y = document.getElementById("blanket");
var yoption = document.createElement("option");
yoption.text = item.name;
yoption.value = item.sys_id;
y.add(yoption);
}
}

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-20-2015 06:00 AM
Hi Jesper,
My thought on this.
Onchange of first drop down pass the value and populate the drop down two values.
Ex: below
<html>
<head>
<script>
$j(document).ready(function()
{
$j('#parent_cat').change(function()
{
var dropdownonevalue =$j(this).val();
getList(dropdownonevalue);
});
$j('#cat').change(function()
{
var dropdowntwovalue =$j(this).val();
getListtwo(dropdowntwovalue);
});
});
</script>
</head>
<body>
<select id="parent_cat" class="cat_dropdown" onChange="checkCat(this);">
<option>-- Vælg kategori --</option>
<j:while test="${p_cat.next()}">
<option value="${p_cat.sys_id}">${p_cat.title}</option>
</j:while>
</select>
<select id="cat" class="cat_dropdown" disabled="disabled" onChange="checkBlanket(this);">
<option>-- Vælg område --</option>
</select>
<select id="blanket" class="cat_dropdown" disabled="disabled">
<option>-- Vælg blanket --</option>
</select>
</body>
</html>
________________________________________________
In Client script
Write the below code to populate dropwont list
_____________________________________________
// In this code based on drop down one i poplated drop down two choices
function getList(dropdownonevalue)
{
var ga = new GlideAjax('includescriptname');
ga.addParam('sysparm_name', 'functionname');
ga.addParam('sysparm_dropdownvalue',dropdownonevalue);
var answer = ga.getXMLWait();
var all_choices = answer.split('*');
for(var i =0; all_choices.length-1>i ; i++)
{
$j('#cat').append(
$j('<option></option>').val(all_choices[i]).html(all_choices[i]));
}
}