Onchange select option in UI page

malu
Tera Contributor

How can i use a onchange select dropdown for a table value in UI page and pick up the value which iam selecting and adding it into another glide for the query string?

below script has ${gr.number} is the drop down value which iam able to get the values but when i select i need to add that value into queryString

<g:evaluate>

  var gr = new GlideRecord('incident');

  gr.addQuery('active', true);

    gr.query();  

</g:evaluate>

  <select   name="number" id="number" >

  <option value="">--None--</option>

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

      <option value="${gr.number}">${gr.number}</option>

</j:while>

</select>

  <g:evaluate jelly="true">                    

                           

  var queryString = "tablenameLIKEinc^sys_created_on>"+${gr.number};

      var sysGr = new GlideRecord('incident');

      sysGr.addEncodedQuery(queryString);

      sysGr.query();

</g:evaluate>

8 REPLIES 8

ramireddy
Mega Guru

Hi Ravi,



In 2nd script, gr scope will not exists as while filling options itself gr is closed. That's not the approach for onchange event. Options filling part is correct. For next part of "querying incidents when select list option is selected", you need to follow below approach.



Implement 'onChange' event for select list. In the javascript, you need to make a call to server-side script include function through glideajax.



<select   name="number" id="number" onchange="changeIncident()">


  <option value="">--None--</option>


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


      <option value="${gr.number}">${gr.number}</option>


</j:while>


</select>



Client script:



function changeIncident()


{


          var selValue = gel("number").value;


          // Make a call to server side script-include using Glide Ajax


}



Example about usage of GlideAjax:


GlideAjax - ServiceNow Wiki


malu
Tera Contributor

Thanks Ram one question , how can put that retrieved value from glideAjax into my HTML querystring as mentioned before?


<g:evaluate jelly="true">                  


                         


  var queryString = "tablenameLIKEinc^sys_created_on>"+${gr.number};


      var sysGr = new GlideRecord('incident');


      sysGr.addEncodedQuery(queryString);


      sysGr.query();


</g:evaluate>


This part needs to be in server-side. At client side, avoid usage of GlideRecord. You need to create a server-side function, from client this function needs to be called, which will return JSON. At client side, this JSON will be parsed and accordingly UI needs to be updated.



Step-1:



Create a new script include say "Incidents"-> mark it as client callable. Within that script include, create a function with this code.



getIncidentDetails: function()


{


var incnumber = var action = this.getParameter('sysparm_incidentnumber');


var queryString = "tablenameLIKEinc^sys_created_on>"+ incnumber;


      var sysGr = new GlideRecord('incident');


      sysGr.addEncodedQuery(queryString);


      sysGr.query();


    // Iterate through records, build JSON and send JSON to UI
}



Step-2: In Onchange event:



function changeIncident()


{


          var selValue = gel("number").value;


          // Make a call to server side script-include using Glide Ajax


var ga = new GlideAjax('Incidents');


ga.addParam('sysparm_name','getIncidentDetails');


ga.addParam('sysparm_incidentnumber',selValue);


ga.getXML(getIncidentDetailsResponse);


}


function getIncidentDetails(response)


{


var answer = response.responseXML.documentElement.getAttribute("answer");


    alert(answer);


}


malu
Tera Contributor

Thanks Ram, Sorry for the silly question. From Script Include i call pull the data into Client Script ( eg here answer) now how to parse this value into my UI Page? Since i have a body contains a data grid to be presented for this sys_created_on date.