Use javascript inside Jelly dynamically

jespersandberg
Kilo Explorer

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.

1 ACCEPTED SOLUTION

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

4 REPLIES 4

Mark Stanger
Giga Sage

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.


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!


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
Tera Guru

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


      }


     





}