Overriding JSF component methods with jQuery -
Overriding JSF component methods with jQuery -
i want override onblur()
, onfocus()
methods of p:inputtext (commentinput) component using jquery. i'm struggling getting fixed html id of component guess. tried far:
jquery(document).ready(function() { $(document.getelementbyid("[#{p:component('commentinput')}]")).onblur(function() { $(this).css({'background-color':'#dfd8d1'}); }); });
or:
jquery(document).ready(function() { $("[id='#{p:component('commentinput')}']").onblur(function() { $(this).css({'background-color':'#dfd8d1'}); }); });
both giving same result: uncaught typeerror: object [object object] has no method 'onblur'
.
xhtml code similar this:
<h:form id="dtform"> <p:outputpanel id="datatablepanel"> <p:datatable id="datatable"> <p:column id="column"> <p:panel> <p:inputtext id="commentinput"> </p:inputtext> </p:panel> </p:column> </p:datatable> </p:outputpanel> </h:form>
i having 1 more issue inputtext component when using with:
<p:inputtext id="commentinput" onkeypress="if (event.keycode == 13) {onchange(); homecoming false;}" required="#{not empty statusbean.newcomment}"> <f:ajax event="change" listener="#{statusbean.test}" /> </p:inputtext>
it fires event in unexpected manner; assume cursor in inputtext , type sth. , click somewhere else in page , component fires ajax event while it's not expected it. think component not suitable getting comment status in facebook or sth.
there 2 problems here. first is, anthony grist said in answer, defining blur done blur()
not onblur()
. ids in jsf contains :
signs id separators, need escape :
signs. primefaces has build in function this, add together #
sign @ origin utilize in jquery:
jquery(primefaces.escapeclientid("#{p:component('commentinput')}")).blur(function () { // code here... });
on other hand, why complicate, p:inputtext
has onblur
attribute. can define javascript callback executed. used standard html attribute:
<p:inputtext onblur="myfunction()"/>
jquery jsf jsf-2 primefaces
Comments
Post a Comment