Onchange select option in UI page

malu · ‎06-24-2016

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>

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

ramireddy · ‎06-24-2016

At server side, you need to construct list of objects and convert to JSON. Send the JSON string to client. At client side, convert JSON back to objects.

Here is an example, critical parts are highlighted.

Server-side:

var grApps = new GlideRecord('u_apps');

grApps.addQuery('active',true);

grApps.query();

var Apps = new Array();

while(grApps.next())

{

var App = new Object();

App.sys_id = new String(grApps.sys_id);

App.app_name = new String(grApps.app_name);

Apps.push(App);

}

var AppsJSON = new global.JSON().encode(Apps);

return AppsJSON;

Client side:

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

var objApps = JSON.parse(answer);

alert(objApps.length);

if(objApps != null && objApps.length > 0)

{

for(var loop = 0 ; loop < objApps.length; loop++)

{

// Write your code to construct HTML and bind to div, where you wants to show data.

}

malu · ‎06-24-2016

Hi Ram, I'm struck here this is my real code where I'm trying pull out the baseline date from the Baseline value i selected from the dropdown value. I want to show the data grid when after i select my Baseline value and only for the particular query string filter condition. Please let me know what's wrong in this

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<html>

<head>

<g:include_script src="jquery_1_12_3.jsdbx"/>

<g:include_script src="jquery_dataTables_min.jsdbx"/>

$(document).ready(function() {

$('#dataGrid').DataTable();

});

</script>

</head>

<h3 style="color:black;">CMDB BaseLine Snapshot</h3>

</center></header><hr></hr>

<body>

<td>

<label>$[SP]$[SP]${gs.getMessage('Select your Baseline')}

</label>

</td>

<!--

<g:ui_reference name="baseline_name" query="active=true" table="cmdb_baseline" id="baseline_name" value="${sysparm_baseline}" displayValue = "${sysparm_baseline_display}"/>

-->

</div>

Select your Baseline:

<g:evaluate>

var bGr = new GlideRecord('cmdb_baseline');

bGr.addQuery('active', true);

bGr.query();

</g:evaluate>

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

</j:while>

</select>

<g:evaluate jelly="true">

gs.log(bID_Value);

</g:evaluate>

</center>

<j2:set var="jvar_bName" value="${sysparm_baseline_name}"/>

<g:evaluate jelly="true">

var queryString = "tablenameLIKEcmdb_ci^sys_created_on>"+jvar_bName;

var sysGr = new GlideRecord('sys_audit');

sysGr.addEncodedQuery(queryString);

sysGr.query();

</g:evaluate>

</div>

<thead>

<tr>

<th colspan="2">Dictionary Information</th>

<th colspan="3">Changes</th>

</tr>

<tr>

<th>Table Name</th>

<th>Field Name</th>

<th>Old Value</th>

<th>New Value</th>

<th>Reason</th>

</tr>

</thead>

<tfoot>

<tr>

<th>Table Name</th>

<th>Field Name</th>

<th>Old Value</th>

<th>New Value</th>

<th>Reason</th>

</tr>

</tfoot>

<tbody>

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

<tr>

<td>${sysGr.tablename}</td>

<td>${sysGr.fieldname}</td>

<td>${sysGr.oldvalue}</td>

<td>${sysGr.newvalue}</td>

<td>${sysGr.reason}</td>

</tr>

</j:while>

</tbody>

</table>

</body>

</html>

</j:jelly>

CLIENT SCRIPT

function changeIncident()

{

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

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

var ga = new GlideAjax('getBaselineData');

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

ga.addParam('sysparm_baseL',selValue);

ga.getXML(ResponseParse);

function ResponseParse(response){

// var answer = ga.requestObject.responseXML.getElementsByTagName("answer");

// alert("answer==>"+answer);

// gel('comments').value = answer;

// gel('comments').value = answer[0];

var result = ga.requestObject.responseXML.getElementsByTagName("result");

var message = result[0].getAttribute("answer");

alert("message"+message);

gel('bID').value = message;

}

SCRIPT INCLUDE

var getBaselineData = Class.create();

getBaselineData.prototype = Object.extendsObject(AbstractAjaxProcessor, {

updateBaseLine: function() {

var res = '';

var result = this.newItem("result");

var u = this.getParameter('sysparm_baseL');

var gr= new GlideRecord("cmdb_baseline");

gr.get(u);

gr.query();

while (gr.next()){

appDate = gr.sys_created_on;

}

result.setAttribute("answer", appDate);

},

type: 'getBaselineData'

});

ramireddy · ‎06-24-2016

2 changes I will suggest.

1.



   result.setAttribute("answer", appDate);

Instead of below line, simply write as

return appDate;



Malu Ravi wrote:


function ResponseParse(response){

// var answer = ga.requestObject.responseXML.getElementsByTagName("answer");

//     alert("answer==>"+answer);

       // gel('comments').value = answer;

// gel('comments').value = answer[0];

   var result = ga.requestObject.responseXML.getElementsByTagName("result"); 

       var message = result[0].getAttribute("answer");

   alert("message"+message);

       gel('bID').value = message; 

}

}


});

I doubt with above function. you might need to rewrite.

function ResponseParse(response){

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

alert("output:"+answer);

gel('bID').value = answer;

}

After making these changes, If it still it didn't work, you need to do debugging. While debugging, i will follow in this order.

1. Did my dropdownlist onchange event is fired?

-- Put an alert statement inside javascript "changeIncident" function and check whether alert is firing, when you change dropdown value.

2. Did request went to server?

-- Open chrome -> Developer tools -> Network -> xhr and see whether request is going to server or not. You can see parameters

3. Did response came from server?

-- Same developer tools will show "response" as well. If you click on "response" tab, it shows response.

4. If response not received, what's happening inside that function in server side script include?

-- put some gs.addInfoMessage() statements inside that function.

malu · ‎06-24-2016

the line // Iterate through records, build JSON and send JSON to UI

Can you explain me pls

?