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.
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 which has a column with a value of commandlink. I want to change the background color of that row, when the user click the commandlink. Any idea?
<o:column id="name" width="8%"
class="result_col" sortingComparator="caseInsensitiveText">
<f:facet name="header">
<h:outputText value="#{message.label_name}" />
</f:facet>
<o:commandLink
action="#{page.getName(name)}"
onajaxend="openHistoryName();">
<h:outputText style="color:#A3A7DC;" value="Click here" />
</o:commandLink>
</o:column>
o:column does not support the class attribute.
Use styleClass instead.
Since you are making an AJAX call on the click of a button, you have two options:
Pass the new CSS styleClass as a response. Ex:
<o:column styleClass='#{someManagedBean.className}'.../>
So when you render your datatable/row, you get the updated style applied automatically.
Using JS/jQuery, you have to manually trigger the updated CSS on the 'onajaxend' method. For this you would need to understand the HTML code that is generated by openfaces. Based on selectors, you can apply the CSS changes.
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;
}
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'm using PrimeFaces dataTable with filterBy on a column. I also have a link that when clicked, empty out the underlying table. Everything works fine until I filter on something. If I then clear the underlying table, the table is still displayed from cache and it won't get update to an empty table until I change the filterBy value. It seems the filterBy input component is still holding on to the event listener. Here's my code snipet:
<h:form id="logFormId" prependId="false">
<p:dataTable value="#{logger.logLines}" var="logMsg"
id="loggerTable" dynamic="false" widgetVar="logTable">
<f:facet name="header">
<h:commandLink action="#{logger.clearList}">
<f:ajax render="#form" execute="#form" />
</h:commandLink>
</f:facet>
<p:column>
<f:facet name="header">
<h:outputText value="#{msgs.LoggerDate}" />
</f:facet>
<h:outputText value="#{logMsg.dateText}" />
</p:column>
<p:column sortBy="#{logMsg.source}"
filterBy="#{logMsg.source}" filterMatchMode="contains" >
<f:facet name="header">
<h:outputText value="#{msgs.LoggerSource} " />
</f:facet>
<h:outputText value="#{logMsg.source}" />
</p:column>
</p:dataTable>
</h:form>
I am not sure I know the answer but here are some things to try. I assume this is primefaces 2.2.
I don't think the dynamic attribute is used anymore in p:datatable.
In your f:ajax element, try render="loggerTable" instead of #form.