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