Use javascript inside Jelly dynamically

Go to solution
jespersandberg
Kilo Explorer

‎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.

Labels:
0 Helpfuls
  • 3,898 Views
1 ACCEPTED SOLUTION

Go to solution
Mark Stanger
Giga Sage
In response to jespersandberg

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


  }


}  


View solution in original post

0 Helpfuls
4 REPLIES 4

Go to solution
Mark Stanger
Giga Sage

‎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.


0 Helpfuls

Go to solution
jespersandberg
Kilo Explorer
In response to Mark Stanger

‎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!


0 Helpfuls

Go to solution
Mark Stanger
Giga Sage
In response to jespersandberg

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


  }


}  


0 Helpfuls

Go to solution
Harish Murikina
Tera Guru

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


      }


     





}


0 Helpfuls