Develop Reference

Style input component in panelGrid when outputLabel is focused

Am using JSF and Primefaces .. And i need when i focus on the outlabel the input text gets background color
This is my code :
<p:panelGrid columns="2" layout="grid" style="border:0px none;background:none" styleClass="ui-panelgrid-blank ">
<p:outputLabel value="#{msg.PurchaseReturns_Txt_Document_NO}" />
<p:inputText readonly="true" value="#{quotationMB.instance.object.quotationid}"/>
</p:panelGrid>
<p:panelGrid styleClass="datePick ui-panelgrid-blank " columns="2" layout="grid" style="border:0px none;background:none">
<p:outputLabel value="#{msg.RequestForQuotation_Txt_Date}" />
<p:calendar value="#{quotationMB.instance.object.validto}" locale="de" navigator="true" pattern="yyyy-MMM-dd" showOn="button" />
</p:panelGrid>
*************************JAVA Script*******************************
I have tried this code .. It worked but on the whole input texts that i have in my page :
$('.ui-outputlabel').click(function() {
$(this).find('.ui-inputtext').css('background-color', 'red');
});

There are a few things wrong in your question.
To start off, you cannot focus a p:outputLabel (which is rendered as an HTML label). Clicking the label will focus the linked field. Which brings us to the second issue.
In order for an p:outputLabel to work as specified in the showcase (validation errors, error styling, required indicator, etc.), you need to use the for attribute to link it to the input component (as in regular HTML).
So, if you add for to your labels, you can simply style the input fields using the :focus CSS selector.
Technically you could get your click listener working like this (but that would not make sense):
$("label").click(function(){
document.getElementById(this.htmlFor).style.backgroundColor = "red";
});
It would make more sense to add a focus and blur listener to input fields and use the listeners to toggle a CSS class on the corresponding label. For example:
$("input").focus(function(){
$("label[for=\""+ this.id +"\"]").addClass("focus");
});
$("input").blur(function(){
$("label[for=\""+ this.id +"\"]").removeClass("focus");
});
See also:
Anyway to have a label respond to :focus CSS

Emulate a click on a p:selectOneRadio

i have a p:selectOneRadio
<p:selectOneRadio id="radioTpPunto" value="#{geoWebModel.radioPuntoBtnValue}" widgetVar="selectTipoRicerca">
<f:selectItem itemLabel="P. di Fermo" itemValue="1" />
<f:selectItem itemLabel="P. di Destinazione" itemValue="2" />
<p:ajax listener="#{geoRefCtr.doAction('radioPuntoChange')}" update=":geoForm:panelFiltroPosizione"/>
</p:selectOneRadio>
And everything is working fine when I click the 2 options : my method is called and my model is updated.
Now, I want to "emulate" this behaviour using Javascript and I've tried using something like:
selectTipoRicerca.jq.find('input:radio[value=2]').trigger('click.selectOneRadio');
My backing bean's method is called but the value of my model isn't updating.
Any clues ?

You can give that specific radio an ID and then use:
document.getElementById("myRadio").click();
this will trigger just as if a user clicked the radio button.
If you're using jQuery, you can shorten it to:
$("myRadio").click();

how can I call two functions: Java and Javascript with one KeyUp event on InputText

how can I call two functions: Java and Javascript with one KeyUp event on InputText , i'm using Primefaces component.
something like this :
<p:inputText id="aa"
value="#{bonBonneManagedBean.sel}">
<p:ajax event="keyup" Onstart="fnc(this)"
listener="#{bonBonneManagedBean.ajouterSelected(bonBonneManagedBean.sel)}" />
</p:inputText>

You're close. You've only a typo in the onstart attribute. It should be written in all lowercase.
<p:ajax event="keyup" onstart="fnc(this)"
listener="#{bonBonneManagedBean.ajouterSelected(bonBonneManagedBean.sel)}" />
Refer the VDL documentation for right attribute names.

How to add both server-side and client-side event handler in RichFaces

So, i need to focus a richfaces tag when an option is selected in my suggestionBox. Normally this wouldnt be a problem but I have the following code:
<rich:suggestionbox fetchValue="#{cap.nom_comp}"
suggestionAction="#{gestionRankingBean.autocompleteMedicamento}"
var="cap"
for="statesinput" id="suggestion" tokens=","
onselect="lossFocus()">
<h:column>
<h:outputText value="#{cap.nom_comp}" />
</h:column>
<a4j:support event="onselect" ajaxSingle="true" reRender="target">
<f:setPropertyActionListener value="#{cap.id}"
target="#{gestionRankingBean.sugerencia}" />
</a4j:support>
</rich:suggestionbox>
My problem is the a4j:support tag is not going to work if i leave the onselect event on the line 5.It seems like i cannot use the same event in this way.
lossFocus() is a javascript function that just does what i want ( pure jquery). So any way to do this? I was thinking if there is some way to capture the onselect event of the suggestionBox with jquery an make my life easier. But i dont know how-

Try using oncomplete="lostFocus()" on a4j:support. You could also try onsubmit.

How to add jsf components in javascript?

Is it possible to add JSF Components using javascript? In my case , on change of a select option , i need to display a different combination of input controls (like text box(s)). I thought i could use a element and innerHTML property to display the dynamic controls.But it seems to not work!!!
<h:selectOneMenu id="browseType" class="TextBlackNormal"
value="#{adminBean.browseType}" onchange="showDynamicBox(this);"
valueChangeListener="#{adminBean.theValueChanged}">
<f:selectItems value="#{adminBean.browseTypeList}" />
</h:selectOneMenu>    </td>
<td>
<div id="dynamicBox" style="display:block"><h:inputText
class="TextBlackNormal" size="32" name="browseValue"
id="browseValue" value="#{adminBean.browseValue}" /></div>
</td>
javascript code :
~~~~~~~~~~~~~~~~
function showDynamicBox(selectObjj)
{
//alert('showDynamicBox ' +showDynamicBox);
if(selectObjj.options[selectObjj.selectedIndex].value=='IBD/Office/IP'
|| selectObjj.options[selectObjj.selectedIndex].value=='APA#' )
{
alert('just about to change');
document.getElementById("dynamicBox").innerHTML='<h:inputText class="TextBlackNormal" size="3" name="val1" id="val1" /> <h:inputText class="TextBlackNormal" size="3" name="val2" id="val2" /> <h:inputText class="TextBlackNormal" size="3" name="val3" id="val3" /> ';
alert(' --> ' +document.getElementById("dynamicBox").innerHTML);
}else{
alert('back to pavillion');
document.getElementById("dynamicBox").innerHTML='<h:inputText class="TextBlackNormal" size="32" name="browseValue" id="browseValue" value="#{adminBean.browseValue}" />';
}
}

Is it possible to add JSF Components using javascript?
No - that would be a security nightmare.
JSF controls run on the server (though might emit JavaScript for a richer client-side experience). Those h:foo elements are interpreted by the server's JSP compiler when it translates the JSP to Java.
JavaScript runs in the browser.
I suggest stating what you want to try and achieve and then ask for suggestions about how to do it using JSF.

You can't add jsf components with javascript. You can simply manipulate the visibility (css display and visibility properties) of existing components.
(and you can use jQuery together with richfaces.)

As McDowell says, you can't add a component to the JSF tree via Javascript, but it sounds like all that you want to do is to swap controls on the page between one big input box or three small ones.
There are several ways to do this:
Have all controls on the page and
show/hide them with javascript. You're doing similar already but bind the 3 small boxes to backend values and toggle display none/block rather than dealing with innerHTML.
Have one set of controls on the page and render them selectively with ajax (eg. richfaces).