Xpages, need global variables that map New ID of a field back to the original ID of the field so it can be used with Client Side Javascript?

Question

I have two field both on the same custom control: Gender & Title.

Gender is a required field and starts off blank. Title is depended on Gender and starts of Disabled.

Once Gender is selected, it should populate the options for Title and enable the field.

But, this is also Bootstrap. So, I want to change the Gender field to show it is correct by changing the field from "has-warning" to "has-success" and displaying the glyph "glyphicon-ok".

I also need to enable the Title field and remove the "glyphicon-warning-sign".

I might be doing this wrong, but I am using Client-Side Javascript vs Server-Side with a partial refresh.

Related Fields Gender and Title

My first solution was to combine a bit of Server-Side with Client-Side and then calling a script library.

        <xp:panel id="ApplicantsGender_pnl" styleClass="form-group has-feedback has-warning">
    <xp:label id="ApplicantsGender_Label1" value="Gender:"
        for="ApplicantsGender"
        styleClass="col-sm-4 control-label field-label">
    </xp:label>
    <div class="input-group col-sm-8">
        <xp:panel styleClass="input-group-addon">
            <span class="glyphicon glyphicon-asterisk requiredfield"></span>
        </xp:panel>
        <xp:radioGroup id="ApplicantsGender"
            value="#{document1.ApplicantsGender}" styleClass="form-control">
            <xp:selectItem itemLabel="Male" itemValue="MALE"></xp:selectItem>
            <xp:selectItem itemLabel="Female"
                itemValue="FEMALE">
            </xp:selectItem>
                <xp:eventHandler event="onclick" submit="false">
                    <xp:this.script><![CDATA[var FieldID = '#{javascript:getClientId("ApplicantsGender")}'; 
                        var FormGroupPnlID = '#{javascript:getClientId("ApplicantsGender_pnl")}'; 
                        var FormGroupGlyphID = '#{javascript:getClientId("ApplicantsGender_glyph")}'; 
                        var TitleID = '#{javascript:getClientId("ApplicantsTitle")}'; 
                        var MaleTitlesID = '#{javascript:getClientId("TitlesMale")}'; 
                        var FemaleTitlesID = '#{javascript:getClientId("TitlesFemale")}'; 
                        field_ApplicantsGender_xp(FieldID,FormGroupPnlID,FormGroupGlyphID,TitleID,MaleTitlesID,FemaleTitlesID);
                        ]]>
                    </xp:this.script>
                </xp:eventHandler>
        </xp:radioGroup>
        <xp:panel id="ApplicantsGender_glyph" styleClass="glyphicon form-control-feedback"></xp:panel>
    </div>

    <xp:text escape="true" id="TitlesMale" value="#{viewScope.TitlesMale}" style="display:none"></xp:text>
    <xp:text escape="true" id="TitlesFemale" value="#{viewScope.TitlesFemale}" style="display:none"></xp:text>    

</xp:panel>

function field_ApplicantsGender_xp(FieldID , FormGroupPnlID , FormGroupGlyphID , TitleID , MaleTitlesId , FemaleTitlesId)
{
var gender=radio_getCheckedValue( document.getElementsByName(FieldID));
var applicantsTitle=document.getElementById(TitleID)

if (gender!=null)
{
    if (gender=="MALE"){
        var Titles = document.getElementById(MaleTitlesId);
    } else {
        var Titles = document.getElementById(FemaleTitlesId);
    }

    var Choices = Titles.innerHTML.split(',');
    var select = document.getElementById(TitleID);
    //Clear the Titles Options List
    var i;
    for(i = select.options.length - 1 ; i >= 0 ; i--)
    {
        select.remove(i);
    }
    //Set the Titles Options List
    for (var i= 0, n= Choices.length; i < n ; i++) {
        opt = document.createElement("option");
        opt.value = Choices[i];
        opt.textContent = Choices[i];
        select.appendChild(opt);
    }

    select.disabled = false

    //Set Bootstrap Successful
   document.getElementById(FormGroupPnlID).setAttribute("class" , "form-group has-feedback has-success");
   document.getElementById(FormGroupGlyphID).setAttribute("class" , "glyphicon form-control-feedback glyphicon-ok");

   var TitleGlyphID = TitleID+"_glyph";
   document.getElementById(TitleGlyphID).setAttribute("class" , "glyphicon form-control-feedback");

   //alert(ApplicantsGenderID);
}

This does what I need it to do, but this is just the first of many fields that will need validation.

So, I was wondering if there was a way to do all the field ID translations just once up in a global area either on the page or in the custom control instead of having to do it within each onchange event.

I want to be able to create the script variables on the fly so I have them available for Client-Side scripting.

i.e. Someplace globally accessable:

var GenderID = '#{javascript:getClientId("ApplicantsGender")}';
var TitleID = '#{javascript:getClientId("ApplicantsTitle")}';
var MaleTitlesID = '#{javascript:getClientId("TitlesMale")}';
var FemaleTitlesID = '#{javascript:getClientId("TitlesFemale")}';

Then when I call the validation formula in the script library I just need to pass in the IDs involved.

i.e.

field_ApplicantsGender_xp(GenderID,TitleID,MaleTitlesID,FemaleTitlesID);

The application itself has many fields all with a bit of cross interaction. Some of the interaction is within the same custom control and some is across custom controls.

I'm finding much of the Bootstrap validation is Client-Side. So with Xpages changing all the IDs, this has just become a bit more tricky.

Thanks for your help on this and I look forward to your feedback.

jpishko jpishko · Accepted Answer · 2016-07-25T11:51:49

You can use a scriptBlock to define your global variables:

<xp:scriptBlock type="text/javascript">
    <xp:this.value><![CDATA[
        var GenderID = '#{javascript:getClientId("ApplicantsGender")}';
        var TitleID = '#{javascript:getClientId("ApplicantsTitle")}';
        var MaleTitlesID = '#{javascript:getClientId("TitlesMale")}';
        var FemaleTitlesID = '#{javascript:getClientId("TitlesFemale")}';
    ]]></xp:this.value>
</xp:scriptBlock>

You would be polluting the global namespace with all those ID variables which is considered a bad practice so consider using a closure.

Xpages, need global variables that map New ID of a field back to the original ID of the field so it can be used with Client Side Javascript?

1 Answers