How can I generate a unique JavaScript variable name from a JSF clientId?

Question

I want to define a JavaScript function for every instance of a JSF composite component.

For this, inside the component, I'm trying something like:

<h:outputScript>
function myFunction_#{component.clientId}(day) {
   //do my instance specific stuff
}
</h:outputScript>

Specifically I am trying to use this function in a RichFaces calendar like this:

<rich:calendar id="calendar" ... dayClassFunction="myFunction_#{component.clientId}">

But the clientId doesn't necessarily only contain characters which are valid in JavaScript variable names.

Is there a way to calculate an md5 hash or something similarly pseudo-unique from the clientId (or something else!) inside a JSF EL expression?

I need it instance-specific because the return value relies on the instance values and the dayClassFunction attribute doesn't accept a function that takes the clientId itself or something likewise specific as an argument.

This would be relatively simple if `this` inside of the function was the DOM node which is created for ``. Isn't that the case in JSF? — Aaron Digulla, Jun 10 '15 at 14:36
Indeed it does! Thanks, I just checked, it is not the DOM node but still the instance specific JS object, this is very helpful — user777, Jun 10 '15 at 15:03
You're going about this the wrong way. The clean way is asked and answered here: http://stackoverflow.com/questions/12615556/integrate-javascript-in-jsf-composite-component-the-clean-way Just reuse the same function and extract the composite component specific data in there. — BalusC, Jun 10 '15 at 18:31

score 3 · Accepted Answer · answered Jun 10 '15 at 14:40

I've done it before like this:

window['#{cc.clientId}'] = {
    myFunction1 : function() { ... },
    myFunction2 : function() { ... }
};

then simply call it where you need it with

dayClassFunction="window['#{cc.clientId}'].myFunction1()"

This way everything is scoped to your component. Eventually you can add some prefix to the client id to never get into conflict with other variable names on the window scope.

Can't think of any character, which is allowed in a client id, that would break the javascript.

Oh that's nice! I didn't think of array indices which can be arbitrary strings in JS, thanks good trick — user777, Jun 10 '15 at 14:45

score 1 · Answer 2 · answered Jun 10 '15 at 14:59

1

Assuming it's the separator (:) that's the issue you could use fn:replace:

function myFunction_#{fn:replace(component.clientId, ':', '_')}

answered Jun 10 '15 at 14:59

wrschneider

17,913
16
96
176

Thank you, this should yield pretty unique and valid strings! – user777 Jun 10 '15 at 15:03

score 1 · Answer 3 · answered Jun 10 '15 at 15:24

1

When calling your function, JSF will assign this to be the instance-specific JS object which JSF uses to implement the client side. You may be able to get the information you need from that.

answered Jun 10 '15 at 15:24

Aaron Digulla

321,842
108
597
820

How can I generate a unique JavaScript variable name from a JSF clientId?

3 Answers3