client script is not executing in UI page script

[SAS21]

Have a string type field 'Requester email id' on the form. Requirement is to have a info icon next to it and when user clicks on it, it should open a UI page. UI page should have the values 'Manager, bandlevel and email'.

Issue i am facing is the script include function is not getting called. 

UI macro

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

    <div style="display: flex; align-items: center;">

        <img src="cgc_info.jpg" alt="Manager Info" style="cursor:pointer; height: 20px; vertical-align:middle;" onclick="openManagerInfo()" />

    </div>

    <script>

        function openManagerInfo() {

            var req_emailid = g_form.getValue('u_requester_email');

alert('req_emailid' + req_emailid);

            var dialog = new GlideModal('cgc_Manager_Info', false, 400, 400);

dialog.setTitle('Leader Information');

dialog.setPreference('sysparm_req_email', req_emailid);

alert('sysparm_req_email' + req_emailid);

            dialog.render();

        }

    </script>

</j:jelly>

UI page:

//html

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

<g:ui_form>

<table width = "100%">

<tr>

<td>Manager</td>

<td><g:ui_input name = "manager_name" id = "manager_name" disabled = "true"/></td> 

</tr>

<tr>

<td>Email</td>

<td><g:ui_input name = "email" id = "email" disabled = "true"/></td> 

</tr>

<tr>

<td>Band Level</td>

<td><g:ui_input name = "band_level" id = "band_level" disabled = "true"/></td> 

</tr>

</table>

</g:ui_form>

</j:jelly>

//client script

function onLoad() {

alert('onload');

    var req_emailid = gel('sysparm_req_email').value();

    var ga = new GlideAjax('CGC_APP_Utils');

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

    ga.addParam('sysparm_req_email', req_emailid);

    ga.getXML(populateManagerInfo);

}

function populateManagerInfo(response) {

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

    var managerData = JSON.parse(answer);

    if (managerData) {

        gel('manager_name').value = managerData.manager_name;

        gel('band_level').value = managerData.band_level;

        gel('email').value = managerData.email;

    }

}

addLoadEvent(onLoad);

//function in script include:

getManagerInfo: function() {

gs.info('entered the getManagerInfo function');

        var req_emailid = this.getParameter('sysparm_req_email');

gs.info('req_emailid in script include'+ req_emailid);

        var reqgr = new GlideRecord('sys_user');

        reqgr.addEncodedQuery('active=true^email=' + req_emailid);

        reqgr.query();

        if (reqgr.next()) {

            var manager = new GlideRecord('sys_user');

            manager.get(reqgr.manager);

            var info = {

                manager_name: manager.name.toString(),

                band_level: reqgr.u_band.toString(),

                email: reqgr.email.toString()

            };

            return JSON.stringify(info);

        }

    },

Appreciate the help.

Thank you

[Vishal Jaswal · Accepted solution]

Hello @SAS21 

Dictionary Entry:

UI Macro: Please change the img src value:

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <div style="display: flex; align-items: center;">
        <img src="book-icon.png" alt="Manager Info" style="cursor:pointer; height: 20px; vertical-align:middle;" onclick="openManagerInfo()" />
    </div>
    <script>
        function openManagerInfo() {
            var req_emailid = g_form.getValue('u_requester_email');
            alert('req_emailid: ' + req_emailid);
            var dialog = new GlideModal('cgc_Manager_Info', false, 400, 400);
            dialog.setTitle('Leader Information');
            dialog.setPreference('sysparm_req_email', req_emailid);
            alert('sysparm_req_email: ' + req_emailid);
            dialog.render();

        }
    </script>
</j:jelly>

Script Include updated: Please update the band_level: reqgr.u_band.toString()

var CGC_APP_Utils = Class.create();
CGC_APP_Utils.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    getManagerInfo: function() {
        var req_emailid = this.getParameter('sysparm_req_email');
        var reqgr = new GlideRecord('sys_user');
        reqgr.addEncodedQuery('active=true^email=' + req_emailid);
        reqgr.query();
        if (reqgr.next()) {
            var managerName = '';
            if (reqgr.manager) {
                var manager = new GlideRecord('sys_user');
                if (manager.get(reqgr.manager)) {
                    managerName = manager.name.toString();
                }
            }
            var info = {
                manager_name: managerName,
                band_level: reqgr.title.toString(), // replace it with u_band
                email: reqgr.email.toString()
            };
            return JSON.stringify(info);
        }
        return JSON.stringify({
            error: 'VJ1: User not found'
        });
    },
    type: 'CGC_APP_Utils'
});

 UI Page - HTML Modified

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:ui_form>
<input type="hidden" id="sysparm_req_email" value="${sysparm_req_email}" />
<table width="100%" style="margin-top: 20px;">
<tr>
<td>Email</td>
<td><input type="text" id="email" disabled="true" /></td>
</tr>
<tr>
<td>Band Level</td>
<td><input type="text" id="band_level" disabled="true" /></td>
</tr>
<tr>
<td>Manager</td>
<td><input type="text" id="manager_name" disabled="true" /></td>
</tr>
</table>
</g:ui_form>
</j:jelly>

UI Page - Client Script Modified

function onLoad() {
    var req_emailid = document.getElementById('sysparm_req_email').value;

    if (!req_emailid) {

        return;
    }
    var ga = new GlideAjax('CGC_APP_Utils');
    ga.addParam('sysparm_name', 'getManagerInfo');
    ga.addParam('sysparm_req_email', req_emailid);
    ga.getXML(populateManagerInfo);
}

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

    try {
        var managerData = JSON.parse(answer);
        document.getElementById('manager_name').value = managerData.manager_name || '';
        document.getElementById('email').value = managerData.email || '';
        document.getElementById('band_level').value = managerData.band_level || '';
    } catch (e) {
        console.error('VJ1: Error parsing manager data:', e);
    }
}
// Trigger onLoad after the modal loads
addLoadEvent(onLoad);

Validation Results:

[SAS21]

@Vishal Jaswal Thank you so much

[Vishal Jaswal]

@SAS21 You're welcome!