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
});
})
});