I save in my selectBooleanCheckbox only boolean values in a backingbean which named "bean". To set a label for this checkbox in my JSF xhtml page i´m using a JSF outputText component.
Here is the JSF code (they are 2 checkboxes in this example):
<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue1}" />
<h:outputText value="My Labeltext1"/>
<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue2}" />
<h:outputText value="My Labeltext2"/>
Now i want to get the selected checkboxes with java script. I´m using the onselect event:
<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue1}" onselect="MyObject.update(this.options[this.selectedIndex].text);"/>
<h:outputText value="My Labeltext1"/>
<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue2}" onselect="MyObject.update(this.options[this.selectedIndex].text);"/>
<h:outputText value="My Labeltext2"/>
But this gets only the boolean values of the selected checkboxes. Is it possible to get the value of the outputText components? Is tehre any way to connect the output component with the selectBooleanCheckbox component?
You should give a unique ID to the components and then try getting these values in java script by their ID , Also you can use 'onclick' to call the java script method.
for ex:
<h:selectBooleanCheckbox id="firstBox" class="extern" value="#{bean.booleanValue1}" onclick="update(this)"/>
<h:outputText id="firstOutput" value="My Labeltext1"/>
And your java script function would look something like this:
function update(val){
var box= document.getElementById("firstBox");
var outPut = document.getElementById("firstOutput");
var boxValue = box.value;
var outPutValue = outPut.value;
}
Related
I have these JSF inputHidden, I need that at the time of confirmation button , they are disabled via JS or JQuery. Can someone tell me how to do it?
I use them only to take values from the backend, after which I do not need them anymore.
<h:inputHidden id="Xlist" rendered="true" value="#{praticheDettaglioController.listaXUbicazionePratichePendenti}" />
<h:inputHidden id="Ylist" rendered="true" value="#{praticheDettaglioController.listaYUbicazionePratichePendenti}" />
Use inputText with type="hidden" and disabled="true" instead like :
<p:inputText id="Xlist" value="..." type="hidden" disabled="true"/>
<p:inputText id="Ylist" value="..." type="hidden" disabled="true"/>
You could also use h:outputText with display:none style which would be rendered as a <span> element and would not be posted back at all:
<h:outputText id="Xlist"
value="#{praticheDettaglioController.listaXUbicazionePratichePendenti}"
style="display:none;"/>
<h:outputText id="Ylist"
value="#{praticheDettaglioController.listaYUbicazionePratichePendenti}"
style="display:none;"/>
A furhter alternative is to have your values assigned to simple javascript variables:
<h:outputScript>
var Xlist = '#{praticheDettaglioController.listaXUbicazionePratichePendenti}';
var Ylist = '#{praticheDettaglioController.listaYUbicazionePratichePendenti}';
</h:outputScript>
This way, you can read them anywhere in javascript.
I have a datatable in which first and second column is checkbox , first one is multiselect and second one id single select, I have done till this,
Now I have to auto select the first chckbox when user click the second checkbox which is for default .
as I am new to javascript please assist.
below is my datatable
<h:dataTable value="#{roundingBean.elementDetailsDTOList}" var="v" styleClass="updateitem">
<h:column>
<f:facet name="header"> Select</f:facet>
<h:selectBooleanCheckbox id="checkBox" value="#{v.isCheckBoxSelected}" />
</h:column>
<h:column>
<f:facet name="header"> Default Category</f:facet>
<h:selectBooleanCheckbox id="radio" value="#{v.isRadioSelected}" onclick="dataTableSelectOneRadio(this);"/>
</h:column>
<h:column>
<f:facet name="header"> Category</f:facet>
#{v.categoryName}
</h:column>
You can do something like this:
<h:selectBooleanCheckbox id="checkBox" value="#{v.isCheckBoxSelected}" onclick="document.getElementById("radio").checked = true;" />
You will have to take help of css and jquery here.
If you have a unique id variable in ElementDetailsDTO, use it to define a css class for the checkbox.
<h:selectBooleanCheckbox id="checkBox" value="#{v.isCheckBoxSelected}" styleClass="#{v.id}StyleClass" />
Then for the radio button, add an onselect attribute like below
<h:selectBooleanCheckbox id="radio" value="#{v.isRadioSelected}" onclick="$('.#{v.id}StyleClass').prop('checked',true)"/>
Using id attribute to get elements inside a data table is not advisable since in the actual html that is generated, these ids will be prefixed with the table id and column id.
in Jquery i am sending value to managed bean with success
document.getElementById('formId:inputId').value = "blavla";
document.getElementById('formId:someId').click();
and my jsf code is :
<h:inputText id="inputId" value="#{gestionduplanning.testvalue}" >
<f:ajax/>
</h:inputText>
<h:inputText id="inputId3" value="#{gestionduplanning.testvalue2}" />
<h:commandButton id="someId" value="Button" action="{gestionduplanning.exec2(gestionduplanning.testvalue)}" style="display:none">
<f:ajax render="someId" execute="#all"/>
</h:commandButton>
and my managed bean methode :
public void exec2(String x) {
this.testvalue2 = testvalue;
}
the problem is when i give the value of testvalue to testvalue2 i have nothing .
how i can give the value to this value and be showen in the h:inputText
I did it with Primefaces before. Maybe It can help you;
Here is my code part in page;
<p:commandButton id="linkButton2" process=":form:receivedMessage"
style="display:none" />
<h:inputText id="receivedMessage" style="display:none"></h:inputText>
And the Javascript code part;
document.getElementById('form:receivedMessage').value = 'myValue';
document.getElementById('form:linkButton2').click();
These code parts worked for me to send data from javascript to backing managed bean.
When your command button is clicked your bean variable will also be filled by input value. So you don't need to send it as a function parameter.
I have a list of values from ,from the list of values i want to check some values means at that corressponding text box will show in bottom.Otherwise the text box will be hidden.I have done this process using javascript. But my issues is i have to validate using required=true attribute. But the problem is the hidden text box also validated.
Primefaces pages for List values:
<p:selectManyCheckbox onchange="checkValue();" value="#{volunteerBean.knowAbt}" layout="pageDirection" id="s" immediate="true" required="true" requiredMessage="Select how to konws about cv?" style="width:300px;height:170px;">
<f:selectItems value="#{volunteerBean.hearLst}" var="he" itemLabel="#{he}" itemValue="#{he}" />
<p:ajax event="change" update="msg1111" />
</p:selectManyCheckbox>
Input Text Box coding:
<p:inputText style="display:none;" id="searchEngine" value="#{volunteerBean.searchEngine}"><p:watermark for="searchEngine" value="Search Engine"/>
JavaScript for hidden and show inputText through checking the list of checkBox:
function checkValue() {
var chk = document.getElementById("volunteerForm:s:10");
if (chk1.checked) {
document.getElementById('volunteerForm:searchEngine').style.display='';
}else {
document.getElementById('volunteerForm:searchEngine').style.display='none';
}
}
I am using primefaces 3.0 and jsf 2.0. How to solve it
You're changing only the HTML DOM tree and you're not changing the JSF component tree. JSF is not aware at all that the HTML element has been hidden in the client side. You need to show/hide the JSF component instead by its rendered attribute and include its client ID in the <p:ajax update>.
<p:selectManyCheckbox ... value="#{volunteerBean.knowAbt}">
<f:selectItems value="#{volunteerBean.hearLst}" />
<p:ajax event="change" update="msg1111 searchEngine" />
</p:selectManyCheckbox>
<p:inputText id="searchEngine" ... rendered="#{volunteerBean.knowAbt.contains('valueOfItem10')}" />
where valueOfItem10 is the exact value of the item at index 10, like as you tried to check in JS. Note that I assume that knowAbt is a List<String>, exactly as your hearLst suggests (for which I have removed the superfluous var, itemLabel and itemValue from the above example as they are the defaults already). Otherwise you'd need to perform the job in a helper method of the backing bean instead.
I am using JSF2 and Java to build a web application. I want to build a form like the one at the picture below:
When somebody unchecks the checkbox the form should disappear:
Here is an example with gwt.
So far,
I tried some stuff with the <f:ajax> tag and an PropertyActionListener in the managedBean but it didn't work. Can somebody give me an example or at least some hints to accomplish my goal. I would be really thankfull
Use <f:ajax render="idOfPanelContainingInputFields"> in the checkbox and give the component containing the input fields a rendered attribute which depends on the checkbox's state. No need for another JS code clutter.
<h:form>
<fieldset>
<legend>
<h:selectBooleanCheckbox binding="#{showUserInfo}">
<f:ajax render="idOfPanelContainingTextBox" />
</h:selectBooleanCheckbox>
<h:outputText value="User information" />
</legend>
<h:panelGroup id="idOfPanelContainingTextBox" layout="block">
<ui:fragment rendered="#{not empty showUserInfo.value and showUserInfo.value}">
<p>
<h:outputLabel for="firstName" value="First name:" />
<h:inputText id="firstName" value="#{bean.user.firstName}" />
</p>
</ui:fragment>
</h:panelGroup>
</fieldset>
</h:form>
The above example binds the checkbox to the view, you can of course also bind it to a boolean bean property, you can then remove the not empty check from the rendered attribute.
<h:selectBooleanCheckbox value="#{bean.showUserInfo}">
...
<ui:fragment rendered="#{bean.showUserInfo}">
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
As suggested by amorfis, the idea of using Ajax here is not the best solution, as you will do a call to your server for a client-side manipulation.
The best solution is to use Javascript to hide your component(s). For example, if all your labels and input texts are nested in a <h:panelGrid> component, you can do that:
<script type="text/javascript">
function hideOrShow(show) {
// Get the panel using its ID
var obj = document.getElementById("myForm:myPanel");
if (show) {
obj.style.display = "block";
} else {
obj.style.display = "none";
}
}
</script>
<h:form id="myForm">
<h:selectBooleanCheckbox id="myCheckbox" onclick="hideOrShow(this.checked);"/>
<h:panelGrid id="myPanel" columns="2">
...
</h:panelGrid>
</h:form>
You could do it by jQuery, or another JavaScript. It is also possible by <f:ajax>, but it connects to the server, which you don't need here.
By jQuery you can just hide the form, not changing the DOM. As far as I understand, it should be enough.
Post some .xhtml if you want more :)