Xpages Custom Control: Putting compositeData value in an SSJS Function

问题

I am posting the code that I used to solve this. Thanks to Per and Eric McCormick and Paul Withers.

<xp:scriptBlock id="scriptBlock2">
        <xp:this.value><![CDATA[$(document).ready(
function() { 
x$("#{javascript:return getComponent(compositeData.fieldName).getClientId(facesContext);}").select2({
                                placeholder : "Choose an employee",
                                allowClear: true,
                                minimumResultsForSearch : 3
                            })  
}
);                      
]]>
        </xp:this.value>
    </xp:scriptBlock>

The answer to my previous question was incredibly useful. I am making a Select2 custom control and need to use the dynamically generated ID in an SSJS function

I am dynamically creating the id of the field in the custom control by giving it the fieldName, like so:

id="${javascript:compositeData.fieldName}"

In other parts of my CC I use that computation to access the id number, for example:

    <xp:message 
            id="message1"
            for="#{javascript:compositeData.fieldName}"
            styleClass="help-block">
        </xp:message>

However in building my Select2 CC I need to add some SSJS in script, like so:

<xp:scriptBlock id="scriptBlock2">
        <xp:this.value><![CDATA[
            $(document).ready(
                function() {
                x$("#{id:[compositeData.fieldName]}").select2({
                placeholder: "Select An Employee",
                allowClear: true
                });
                }
                );
]]></xp:this.value>
    </xp:scriptBlock>

But this doesn't work. I cannot figure out how to dynamically generate the ID.

x$("#{id:[compositeData.fieldName]}")


<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    id="view1">



    <xp:scriptBlock id="scriptBlock2">
        <xp:this.value><![CDATA[
            $(document).ready(
                function() {
                x$("#{id:[compositeData.fieldName]}").select2({
                placeholder: "Select An Employee",
                allowClear: true
                });
                }
                );
]]></xp:this.value>
    </xp:scriptBlock>


    <xp:div>
    <xp:this.styleClass><![CDATA[#{javascript:"form-group" + (getComponent(compositeData.fieldName).isValid() ? "" : " has-error")}]]></xp:this.styleClass>
            <xp:label
            styleClass="control-label"
            for="#{javascript:compositeData.fieldLabel}"
            value="${compositeData.fieldLabel}" />
            <div class="">

            <xp:comboBox 
                id="${javascript:compositeData.fieldName}"
                value="#{compositeData.dataSource[compositeData.fieldName]}"
                required="${compositeData.required}">
                <xp:selectItems
                        value="${javascript:'#{CacheBean.'+compositeData.cacheItem+'}'}">
                    </xp:selectItems>
                <xp:this.validators>
                    <xp:validateRequired message="#{javascript:compositeData.fieldLabel + ' is required'}"></xp:validateRequired>
                </xp:this.validators>
            </xp:comboBox>

            <xp:scriptBlock
                id="scriptBlock1">
            <xp:this.value>
            <![CDATA[x$("#{id:comboBox5}").select2({minimumResultsForSearch:5});]]>
            </xp:this.value>
            </xp:scriptBlock>

            <xp:text
                    escape="true"
                    id="computedField1"
                    styleClass="help-block"
                    value="${compositeData.helpText}">
                    <xp:this.rendered><![CDATA[#{javascript:(getComponent(compositeData.fieldName).isValid()) && compositeData.helpText != null}]]></xp:this.rendered>
            </xp:text>

            <xp:message 
                id="message1"
                for="#{javascript:compositeData.fieldName}"
                styleClass="help-block">
            </xp:message>
        </div>

    </xp:div>


    <xp:text escape="true" id="computedField2"      
        value="${javascript:'#{id.'+compositeData.fieldName+'}'}">
    </xp:text>


</xp:view>

回答1:

You can get the dynamically generated id from client side JS (using SSJS) by using the SSJS function getClientId(). So in your case it will look like this combined with the x$ function:

x$('#{javascript:getClientId(compositeData.fieldName)}')

来源：https://stackoverflow.com/questions/41752638/xpages-custom-control-putting-compositedata-value-in-an-ssjs-function

标签

xpages