How to clear previous reference field value and then select new one on UI Page

[Vaibhav39]

Hello.
I have three reference fields on UI page: Company, Code & Type.
On click of UI action I'm able to populate those fields from form to UI page.
When I change company then the other two fields (values from fields) should get cleared. I'm able to achieve this using gel('<field>').value =''; and gel('sys_display.<field>').value='';

The issue is, when I select value from other two reference fields it is not showing. May be it gets cleared again.
I would really appreciate if I get any kind of help here.
TIA.

[Vaibhav39]

That function is getting call every time and that's why it is again clearing the selected value.

Do I need counter here?

[Ankur Bawiskar]

Should not happen.

Seems strange

Regards
Ankur

[Vaibhav39 · Accepted solution]

Thank you for your time Kieran & Ankur, I really appreciate. I resolved the issue.

Every time that function gets called. So, I simply wrote onchange attribute and declared a function in urgency & style. Below is the changes I made.

HTML:

<g:ui_reference name="u_urgency_code" id="u_urgency_code" completer="AJAXTableCompleter" table="u_fsmm_urgency_code" displayValue="${jvar_urgencyDisplayName}" value="${jvar_urgencyCode}" query="u_active=true^u_company=${jvar_companyName}" onchange="changeUrgency()" />

<g:ui_reference name="u_pcd_style" id="u_pcd_style" completer="AJAXTableCompleter" table="u_pcd" displayValue="${jvar_styleDisplayName}" value="${jvar_styleName}" query="u_active=true^u_company=${jvar_companyName}" onchange="changeStyle()" />

Updated Client script:

function changeUrgency() {}
function changeStyle() {}

function showUrgencyAndStyle() {
    var companyId = gel('company').value;
    var urgencyId = gel('u_urgency_code').value;
    var styleId = gel('u_pcd_style').value;
    var urgencyLookUp = gel('lookup.u_urgency_code');
    var styleLookUp = gel('lookup.u_pcd_style');
    var urgencyArray = [];
    var styleArray = [];

    gel('u_urgency_code').value = "";
    gel('sys_display.u_urgency_code').value = "";
    urgencyLookUp.style.display = "none";
    gel('u_pcd_style').value = "";
    gel('sys_display.u_pcd_style').value = "";
    styleLookUp.style.display = "none";

    if (companyId != '') {
        urgencyLookUp.style.display = "";
        styleLookUp.style.display = "";

        //Filter for Urgency code based on company
        var grUrgency = new GlideRecord("u_fsmm_urgency_code");
        grUrgency.addQuery('u_active', true);
        grUrgency.addQuery('u_company', companyId);
        grUrgency.addQuery("u_urgency_code", "!=", "");
        grUrgency.query();
        while (grUrgency.next()) {
            urgencyArray.push(grUrgency.sys_id.toString());
        }
        urgencyLookUp.setAttribute('onclick', "mousePositionSave(event); reflistOpen('u_urgency_code', 'not', 'u_fsmm_urgency_code', '', 'false', 'QUERY:u_active=true', 'sys_idIN" + urgencyArray + "', '')");

        //Filter for Style based on company
        var grStyle = new GlideRecord("u_pcd");
        grStyle.addQuery('u_active', true);
        grStyle.addQuery('u_company', companyId);
        grStyle.addQuery("u_style", "!=", "");
        grStyle.query();
        while (grStyle.next()) {
            styleArray.push(grStyle.sys_id.toString());
        }
        styleLookUp.setAttribute('onclick', "mousePositionSave(event); reflistOpen( 'u_pcd_style', 'not', 'u_pcd', '', 'false', 'QUERY:u_active=true', 'sys_idIN" + styleArray + "', '')");

    }
}