jsf 2 - Encapsulating javascript code inside a composite with jsf-2 -

i asked is possible add javascript function h:form in jsf2? closed duplicate, link https://stackoverflow.com/a/29129816/4142984 answer.

perhaps in question didn't make clear enough want do: want have composite internal structure of may change in future versions. want composite have javascript function can called outside handle internal details, encapsulated within composite no parts of code outside.

<h:form onload="this.myfunc=function(){alert('hello world');}" ... 

would trick, there no "onload" h:form.

this way, page uses composite need not changed when structure of composite changed.

the supposed answer has 2 parts. part labeled "2.)" not address question @ all, requires javascript outside composite.

the part labeled "1.)" looks better, can't work.

i put following inside h:form of composite:

<h:outputscript>alert("now"+this+'#{cc.attrs.imgid}');window.document.getelementbyid('#[cc.attrs.imgid}').myfunc=function() {alert("newly called"+#{mbean.keyx})}</h:outputscript> 

but fails. firstly, "this" window, not "form". , secondly, getelementbyid doesn't find element, because id changed jsf.

so can make work?

edit: hints , answers, following code works:

<composite:implementation>     <h:form id="${cc.attrs.imgid}" styleclass="small">         <f:event type="postaddtoview" listener="#{mbean.register}" />         <f:attribute name="myid" value="hmta${cc.attrs.imgid}" />         <h:graphicimage width="${cc.attrs.width}" id="${cc.attrs.imgid}"             onclick="this.nextsibling.value=mods(event)" onmouseover="aa=this.id"             value="images/img?#{cc.attrs.flav}=#{math.random()}">             <f:ajax event="click" execute="@this k"                 listener="#{mbean.handleevent}" render="@this">             </f:ajax>         </h:graphicimage>         <h:inputhidden id="k" value="#{mbean.keyx}" />     </h:form>     <h:outputscript>window.document.getelementbyid('#{cc.clientid}:#{cc.attrs.imgid}').myfunc=function() {alert("newly called"+#{mbean.keyx})};</h:outputscript> </composite:implementation> 

first

call composite component providing id :

<core:yourcomposite id="someid" .../> 

second

you add prependid=false on h:form attributes prevent automatic ids , provide id form

now inspect rendered html see form mapped semantic id : someid:formid can inject script within form calling:

getelementbyid('#{cc.attrs.id}:formid') normally