I would like to "bind" a tooltip to a h:selectOneRadio.
Following the example found here, I tried with
<td>
<h:selectOneRadio id="subscriptionType" value="#bean.subscriptionType}">
<f:selectItems value="#{beanModel.subscriptionTypeValues}" />
<rich:tooltip id="tt1" for="subscriptionType" layout="block" >
<span style="white-space: nowrap">
Data is for laptop, modem, ...<br />
Voice is for smartphone, ...
</span>
</rich:tooltip>
</h:selectOneRadio>
<h:messages for="subscriptionType" style="color:red; font-size:12px;" />
</td>
but the tooltip doesn't appear...
Do I miss something or it is not possible to use tooltips with radio buttons?
Problem solved.
I didn't see an error message at the bottom of the page saying
One or more resources have the target of 'body', but no 'body'
component has been defined within the view
So, after having googled for the error message I came to the solution posted here:
use h:body tag, instead of body
and now it works!
Related
Hello I am new to JSF ice faces, and i am stuck on one point.
I have checkboxButton inside a tree. The checkboxes has associated action listeners.
Issue is that the action listener is only invoked for the top level check box (at the root node), not for the checkbox which are at the child or leaf of the tree. Am i missing something?
<ace:tree var="treeNode" value="#{clientUserAdmin.segmentationTree}" expansion="true" selection="false" reordering="false"
rendered="#{!empty clientUserAdmin.clientAccessSelectList and !clientUserAdmin.currentProfile.allSegmentations and user.currentProject.isSegmentationManual}" >
<ace:node>
<h:panelGroup style="display: inline">
<ace:checkboxButton partialSubmit="true"
value="#{treeNode.userObject.treeNodeSelected}"
valueChangeListener="#{clientUserAdmin.onSegmentationAccessChange}"
styleClass="#{treeNode.userObject.classStyle}"
disabled="#{treeNode.userObject.checkBoxDisabled}" >
<ace:ajax execute="#this" render="#all" />
</ace:checkboxButton>
</h:panelGroup>
<h:panelGroup style="display: inline">
<h:outputText value="#{treeNode.userObject.text}"
styleClass="#{treeNode.userObject.classStyle}" />
</h:panelGroup>
</ace:node>
</ace:tree>
I can see that the request is sent to the server and onSuccess is always executed for every check box value change. but value change listener is never invoked for child node check boxes.
thanks in advance
I couldn't find the solution to the original issue.
I changed to my code to use h:selectBooleanCheckbox instead of ace:checkboxButton
Also instead of ace:ajax execute="#this" render="#all", i changed to
f:ajax event="click" execute="#form" render="#form"
Now it is working as expected. If someone can explain what is happening, will be a great help.
thanks.
Question (short version)
I have an issue with richfaces(4.3.2-final).
I'm trying to rerender a row/cells inside a rich:extendedDataTable. I can't get it to work.
The only thing that works is to rerender the whole table.
All examples/tutorials i can find are for version 3.3. Those solutions dont work for me.
I hope you can help me with a solution or a 4.2+ example/tutorial.
Long version of the question
Not selected row cells:
<a4j:outputPanel layout="block" rendered="#{inactive}">
<h:outputText
value="#{cc.attrs.rowItem.getValue(cc.attrs.id)}"
styleClass="outputField"
style="#{cc.attrs.style}">
</h:outputText>
</a4j:outputPanel>
Selected Row cells:
<a4j:outputPanel layout="block" rendered="#{active and field.echoed}">
<h:inputText
value="#{field.value}"
id="#{cc.attrs.id}ID"
disabled="#{field.disabled}"
readonly="#{field.readonly}"
rendered="true"
title="#{field.title}"/>
....
</a4j:outputPanel>
On selection of other rows:
<a4j:ajax event="selectionchange"
listener="#{crudBean.actionForm.selectionListener}"
render="messages,saveButton,deleteButton,multiOccurenceTable"
/>
HTML code, not selected row cell:
<td class="rf-edt-td-j_idt230">
<div class="rf-edt-c rf-edt-c-j_idt230">
<div class="rf-edt-c-cnt">
<div id="multiOccurenceTable:0:soort:soort">
<div id="multiOccurenceTable:0:soort:j_idt140">
<span class=" outputField" style="">VO</span>
</div>
</div>
</div>
</div>
</td>
Selected row cell HTML:
<td class="rf-edt-td-j_idt230">
<div class="rf-edt-c rf-edt-c-j_idt230">
<div class="rf-edt-c-cnt">
<div id="multiOccurenceTable:1:soort:soort">
<div id="multiOccurenceTable:1:soort:j_idt240">
<input id="multiOccurenceTable:1:soort:soortID" name="multiOccurenceTable:1:soort:soortID" value="VO" type="text">
</div>
</div>
</div>
</div>
</td>
My attempts:
The on selectionchange rerender is now put on the table:"multiOccurenceTable".
This works, on every selection change the whole table gets rerendered.
For performance i try to update the table on row or cell level. I can't get get this to work. I tried simple and more complex solutions, none worked. What am i doing wrong?
(most examples/tutorials are for richfaces 3.3 on the internet which could be a reason)
Try 1, manually updating the rows/cells:
all 3 rows: nothing happened when i pressed the 'save' button
<a4j:commandLink actionListener="#{crudBean.actionForm.save}"
render="multiOccurenceTable:0,multiOccurenceTable:1,multiOccurenceTable:2"
reRender="multiOccurenceTable:0,multiOccurenceTable:1,multiOccurenceTable:2">Save
</a4j:commandLink>
One cell: nothing happened when i pressed the 'save1' button
<a4j:commandLink actionListener="#{crudBean.actionForm.save}"
render="multiOccurenceTable:#rows(crudBean.actionForm.rowsToUpdate):soort"
reRender="multiOccurenceTable:#rows(crudBean.actionForm.rowsToUpdate):soort">Save1
</a4j:commandLink>
I've also tried with ajaxKeys with no succes according to this tutorial rich 3.x and this example (rich 3.3)
If you got any possible solutions, please let me know.
My error is fixed. The error was not the rendering. but that the condition for rendering was set outside the component that was rendered. This resulted in rerendering the component with not updated values, which led to no change on the screen.
Lessons learned: If you have render conditions make sure the condition values are inside the rerendered component.
I'm not familiar enough with richfaces 4 to know the details of the extendedDatatable. A quick search led me to believe that it is not possible to automagically render a row since a row isn't a component.
So you seems to be stuck having to render the individual cells.
Rendering works based on the clientId's of the components. You can find the exact ID's in your html code. Because it works on those clientId's the component you want to render already needs to be rendered.
In other words, you need to wrap your components with a panel that has an id and is rendered per default:
<h:outputPanel layout="block" id="soortPanel">
<h:outputText
value="#{cc.attrs.rowItem.getValue(cc.attrs.id)}"
rendered="#{inactive}">
</h:outputText>
<h:inputText
value="#{field.value}"
rendered="#{active}"/>
</h:outputPanel>
The outputpanel should get an id like: multiOccurenceTable:1:soortPanel and you should be able to render that id.
I have a h:form with several inputs and each of them got its own h:message and I'm looking for a way to show (using render or assigning some styleClass) some other element only when specific h:message is being shown (and hide when that h:message is not being displayed).
Here a code snippet
<li>
<h:panelGroup id="current_password_wrapper">
<p:password value="#{myBean.myCurrPass}" id="current_password" required="true"
styleClass="required_field" />
</h:panelGroup>
<h:message for="current_password"/>
</li>
<li>
<h:panelGroup id="new_password_wrapper">
<p:password value="#{myBean.myNewPass}" id="new_password" required="true"/>
</h:panelGroup>
<h:message for="new_password"/>
<h:commandLink value="my value"/>
</li>
I want to make the h:commandLink visible only when the <h:message for="new_password"/> is being displayed
So far I couldn't find anything...
If your environment supports EL 2.2, then you could check if FacesContext#getMessageList() isn't empty for the particular client ID.
<p:password binding="#{new_password}" ... />
<h:commandLink ... rendered="#{not empty facesContext.getMessageList(new_password.clientId)}" />
If the message is being shown as result of a validation error, then you could also just check the UIInput#isValid() state of the component associated with the message.
<p:password binding="#{new_password}" ... />
<h:commandLink ... rendered="#{not new_password.valid}" />
Note that manually adding a faces message to the context won't mark the input component invalid. Therefor either a true Validator should be used which throws a ValidatorException, or an explicit input.setValid(false) call has to be done programmatically.
I think with the answer to this question you requirement can be archived:
How to number JSF error messages and attach number to invalid component
I think you can do something like this:
<h:outputText value="output text" rendered="#{bean.messageIndexes['form:input1'] > 0}" />
I'm porting the servlet/jsp Netbeans' Affableben tutorial to JSF Framework, and want to use Facelets for the view.
I already have the JPA entities, the session beans and the managed beans. I'm starting with the View. However, I have not found the equivalent in Facelets to work around this line:
<a href="<c:url value='category?${category.id}'/>">
This is the full loop, both in jsp and facelets:
JSP code:
<c:forEach var="category" items="${categories}">
<div class="categoryBox">
<a href="<c:url value='category?${category.id}'/>">
<span class="categoryLabel"></span>
<span class="categoryLabelText"><fmt:message key='${category.name}'/></span>
<img src="${initParam.categoryImagePath}${category.name}.jpg"
alt="<fmt:message key='${category.name}'/>" class="categoryImage">
</a>
</div>
</c:forEach>
Equivalent Facelets code:
<ui:repeat var="category" value="${categoryController.items}">
<div class="categoryBox">
<h:link outcome="${category.id}"/>
<span class="categoryLabel"></span>
<span class="categoryLabelText">${category.name}</span>
<img src="./resources/img/categories/${category.name}.jpg"
alt="${category.name}" class="categoryImage"/>
</div>
</ui:repeat>
This line is not working in Facelets as expected:
<h:link outcome="${category.id}"/>
What would be a working equivalent in Facelets?
EDIT 1
public String getName() throws UnsupportedEncodingException {
return URLEncoder.encode(name, "UTF-8");
}
Warning message: Unable to find resource img/categories/fruit+%26+veg.jpg
The <h:link> utilizes JSF implicit navigation and requires a real (implicit) navigation outcome value. You need to specify the view ID in the outcome. You need to specify request parameters by <f:param>. You also need to nest the spans and the image in the link as you did in your initial example. Assuming that you have a category.xhtml file in the root, this should do:
<h:link outcome="category">
<f:param name="id" value="#{category.id}" />
<span class="categoryLabel"></span>
<span class="categoryLabelText">#{category.name}</span>
<img src="./resources/img/categories/#{category.name}.jpg"
alt="#{category.name}" class="categoryImage"/>
</h:link>
Unrelated to the concrete question, you should be using <h:graphicImage> instead of <img> as well. This way JSF will ensure that the src is properly set. In your particular case that would be
<h:graphicImage name="img/categories/#{category.name}.jpg"
alt="#{category.name}" class="categoryImage"/>
(note that I replaced ${} by #{}, just to adhere the standard and for the consistency)
You can change from this line:
<a href="<c:url value='category?${category.id}'/>">
to this:
<h:link outcome="category.xhtml?id=#{category.id}" />
<h:link outcome="category">
<f:param name="id" value="#{category.id}" />
</h:link>
<h:outputLink value="category.xhtml?id=#{category.id}" ></h:outputLink>
I am working on JSF2.0 and Richfaces. I am having an requirement where I need to change the style of the form field(entire row) if the validation fails. I am using the following code to display field label and text box.
<h:panelGrid columns="2">
<h:outputLabel value="#{uit.firstname}:">
<span class="required"><strong>*</strong> </span>
</h:outputLabel>
<h:inputText value="#{editUserProfileBean.firstName}" type="text"
id="firstname" styleClass="basicFormTextBox" size="30"
required="true" requiredMessage="#{uitkem.valueRequired}"
validatorMessage="#{prod.firstNameValidator}">
<f:validateLength maximum="#{prodConf.MaxLengthForFirstName}"
minimum="#{prodConf.MinLengthForFirstName}" />
<f:validator validatorId="trimSpaces" />
</h:inputText>
</h:panelGrid>
Suppose if the validation fails, I need to hightlight the row(both label and textbox).
I can use the following code to hightlight the textbox if the validation fails. But I want to hightlight the entire row, that is not possible using the following code.
<h:inputText value="#{editUserProfileBean.firstName}" required="true" styleClass="#{not component.valid ? 'newStyleClass' : ''}" />
Can anyone help me on this?
Thanks in advance.
You could just write a tiny JS script with jQuery, or use <rich:jQuery> for that.