1
votes

Trying to use a custom property (via the compositeData) in client side javascript but it is not working.

User picks a different value and so the onChange event fires. I am able to grab the string I want (refreshOnChangeID) and put it into my var y. I do an alert and I am getting the correct value ("fld4b").

Then the code does a XSP.partialRefreshPost. If I hard code the field then I am getting a partial refresh.

But putting in the var (in the last line which is commented out) doesn't work. The id resolves to nothing.

What am I doing wrong?

$(document).ready(

function() {
    var x = x$("#{javascript:return getComponent(compositeData.fieldName).getClientId(facesContext);}").select2({});
    x.on('change', function(e) {
        var y = "#{compositeData.refreshOnChangeID}";
        alert(y);
        XSP.partialRefreshPost("#{id:fld4b}", {
            immediate: true
        });
        //XSP.partialRefreshPost('#{id:'+y+'}',{immediate: true});
    })
});

I was able to solve this by creating a hidden computed field that resolved to the id of the field I want to refresh:

<xp:text
        escape="true"
        id="refreshID"
        value="${javascript:'#{id:'+compositeData.refreshOnChangeID+'}'}"
        style="display:none">
    </xp:text>

Then I was able to grab the value of this field and use it in my css:

$(document).ready(

function() {
    var x = x$("#{javascript:return getComponent(compositeData.fieldName).getClientId(facesContext);}").select2({});
    x.on('change', function(e) {
        var t = "#{id:refreshID}";
        var fldVal2 = document.getElementById(t).innerHTML;
        XSP.partialRefreshPost(fldVal2, {
            immediate: true
        });
    })
});
2

2 Answers

2
votes

Create a Computed field with value client ID + compositeData.fieldName and then use the document.getElementById("").innerHTML in the client side java script function to get the compositeData value.

0
votes

If this is in an Output Script control, EL doesn't work there. Try var y = '#{javascript:compsiteData.get("refreshOnChangeID")}';