Use javascript inside Jelly dynamically

jespersandberg · ‎02-20-2015

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.

Mark Stanger · ‎02-20-2015

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);

}

View solution in original post

Mark Stanger · ‎02-20-2015

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.

jespersandberg · ‎02-20-2015

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 Stanger · ‎02-20-2015

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);

}

Harish Murikina · ‎02-20-2015

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>

$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>

<option>-- Vælg kategori --</option>

<j:while test="${p_cat.next()}">

<option value="${p_cat.sys_id}">${p_cat.title}</option>

</j:while>

</select>

<option>-- Vælg område --</option>

</select>

<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]));

}