I have table that display equipments. There is a button below to enter page number for pagination. when click on that button ajax call updates the tableId table. But I have an error <f:ajax> contains an unknown id 'tableId'
Can't I refer table ID from ajax update? if not what is the solution? I cannot use datatable as I need to manupulate the column headings at runtime.
<table id="tableId">
<tr>
<td>
<h:commandLink ...>
<f:ajax render="tableId" />
</h:commandLink>
</td>
</tr>
</table>
The <f:ajax render> (and <f:ajax execute>) has to refer a fullworthy JSF component, not a plain HTML element. JSF will namely pass the specified ID to UIComponent#findComponent() in order to find in the component tree the component responsible for producing the desired piece of HTML output. A plain HTML element is not interpreted as a true JSF component and therefore not present by its ID in the JSF component tree.
Either make it a true JSF component,
<h:panelGrid id="tableId" columns="1">
<h:commandLink ...>
<f:ajax render="tableId" />
</h:commandLink>
</h:panelGrid>
or wrap it in a true JSF component and reference it instead.
<h:panelGroup id="tableIdWrapper" layout="block">
<table id="tableId">
<tr>
<td>
<h:commandLink ...>
<f:ajax render="tableIdWrapper" />
</h:commandLink>
</td>
</tr>
</table>
</h:panelGroup>
Related
I want to implement functionality like, when I'm selecting one radio button it has to show one text box otherwise it should be in the hidden state. I wrote code like this
<tr>
<th><label for="selection">Register as ::</label></th>
<td> <h:selectOneRadio id="selection" value="#{LoginBean.role}" label="Action" required="true">
<f:selectItem itemValue="Customer" itemLabel="Customer" />
<f:selectItem itemValue="Manager" itemLabel="Manager" />
<p:ajax process="console" update="#form" />
</h:selectOneRadio>
</td>
</tr>
<tr>
<th><h:outputLabel value="Enter your Fee ::" rendered="#{LoginBean.role eq 'Manager'}"></h:outputLabel></th>
<td><h:inputText id="fee" value="#{LoginBean.fee}" rendered="#{LoginBean.role eq 'Manager'}" required="true" requiredMessage="Fee is required." class="form-control" a:placeholder="200.00" ></h:inputText></td>
</tr>
Here, If I select Manager radio button it should show the outputLabel and inputeText.
There are getter and setters in the Bean Class.
Is there anything wrong?
instead of the input row as in your code,
I would recommend you put it in another form with rendered="#{LoginBean.isManager }", take out both rendered in your h tag.
Duplicate this form without any child tag, this form comes with rendered="#{!LoginBean.isManager }"
In your Bean, declare new boolean isManager with getter setter.
As you process your radio choice form, Bean will set isManager to false or true based on your choice and render the form according to your isManager.
I used this way to quick add "Edit" form. It works without POSTBACK. I hope it works for you!
PS: You may only need to set rendered to tr tag instead of h tag.
In my JSF page I am using a datatable with tooltip on a row column like this:
<p:dataTable var="item" ...>
<p:column headerText="#{bundle['item.name']}">
<!--
<h:outputText value="#{item.name}" title="#{simpleTooltipGenerator.generate(item)}"/>
-->
<h:outputText id="name" value="#{item.name}"/>
<p:tooltip for="name" escape="false" value="#{simpleTooltipGenerator.generate(item)}"/>
</p:column>
</p:dataTable>
The simpleTooltipGenerator.generate() is a method which generates the following HTML tooltip:
<div class="ui-tooltip-text ui-shadow ui-corner-all">
<table>
<tbody>
<tr><td class="key">Lastname</td><td class="value">Doe</td></tr>
<tr><td class="key">Firstname</td><td class="value">John</td></tr>
</tbody>
</table>
<div class="adresse spacer"></div>
<div class="adresse title">Address</div>
<table>
<tbody>
<tr><td class="key">OFFICE</td><td class="value">...</td></tr>
<tr><td class="key">HOME</td><td class="value">...</td></tr>
</tbody>
</table>
</div>
This works as expected, but when I use a global tooltip <p:tooltip escape="false"/> together with <h:outputText value="#{item.name}" title="#{simpleTooltipGenerator.generate(item)}"/> only the generated HTML code is shown in the tooltip! Using a fixed text for the global tooltip works?!
Is this a bug, that global tooltip does not support HTML content, even if set escape="false", or is this not supported?!
My environment is Primefaces 6.0 on WildFly 10.0.0-Final
From PrimeFaces Documentation:
Global Tooltip
...
As global tooltips are more efficient
since only one instance of tooltip is used across all tooltip targets, it is suggested to be used instead
of explicit tooltips unless you have a custom case e.g. different options, custom content.
First I would say this is not supported. As i tried it worked nevertheless. So your problem seems to be missing globalSelector attribute which defaults to a,:input,:button
If you want to support <h:outputText /> (which renders as <span />) binding, just add a propper selector like:
<p:tooltip escaped="false" globalSelector="a,:input,:button,span" />
I am using JSF 1.2, Richfaces 3.3.3 with Tomcat 6.
I have called two AJAX event methods for a single component and both event reRender the component.
My Sample code :
<h:outputLabel id="ct3lbl1" value="CT3 No " />
<rich:spacer width="1" height="1" />
<h:selectOneMenu id="ct3serial" value="#{PurchaseOrder.ct3SerialNo}" style="width:160px;">
<f:selectItems value="#{PurchaseOrder.ct3serialList}" />
<a4j:support event="onchange" action="#{PurchaseOrder.loadSupDetails}" ajaxSingle="true" reRender="ct3serial,tablepanel" />
<a4j:support event="onblur" action="#{PurchaseOrder.ct3validate}" ajaxSingle="true" reRender="valctserial,ct3serial" />
</h:selectOneMenu>
<h:outputText id="valctserial" value="#{PurchaseOrder.valct3serial}" style="color: red;" />
I stuck at an issue Duplicate Id Exception in auto generated client id.
My Question is using more than one AJAX request for a component and rendering the component is a reason for this exception.Suggest me to overcome this issue.
I have a loop that contains a list of properties
I would like to display this list on 2 columns, but I can not.
they are displayed by unordered, against if I use c: For Each place of ui: repeat
the problem is resolved
<p:panel id="panlecart2" header ="Caracteristique selon la categorie" toggleable="true" rendered="true" style="width=900px;">
<h:panelGrid id="panlecart" columns="2" cellpadding="5" rendered="true" style="width=900px;">
<ui:repeat var="var1" value="#{composantbean.categorie.proprietes.toArray()}">
<h:outputText value="#{var1.nomProp }(#{var1.unite} )" />
<h:inputText value="" />
</ui:repeat>
</h:panelGrid>
</p:panel>
Haw can I fixe the problem .helpe please :)
You could switch to using <h:dataTable> to iterate over the components:
<h:dataTable var="var1" value="#{composantbean.categorie.proprietes.toArray()}">
<h:column>
<h:outputText value="#{var1.nomProp }(#{var1.unite} )" />
</h:column>
<h:column>
<h:inputText value="" />
</h:column>
</h:dataTable>
Enclose it within a <p:panel> to make it work. Otherwise, make use of <c:forEach> as it's a good fit for your use case.
ui:repeat is rendered in a later phase than c:forEach. Here's an explanation.
c:forEach is the way to go here, since this is invoked in view build time.
ui:repeat is invoked during view render time, so p:panel would have no knowledge of the data being created by ui:repeat.
I'm embedding here a simplified version of a code that is not working for me.
What happens here is that there are 2 forms.
The first form contains an ajaxified <h:commandLink> (Using <f:ajax>)
The second form contains a form with values.
When the <h:commandLink> is pressed, the values in the second form are supposed to be submitted.
What happens in practice is that values are retrieved (the getter function is run) but are not submitted (the setter function never runs).
The <f:ajax> runs because I can see the listener method running and the second form does get rerendered after clicking the <h:commandLink> but, again, the setter functions are never run.
<body>
<h:form prependId="false">
<h:panelGroup >
<h:commandLink >
<f:ajax event="click"
execute=":form_with_values_to_update" render=":form_with_values_to_update"
listener="#{mrBean.clickListenerAction}" />
Do something
</h:commandLink>
</h:panelGroup>
</h:form>
<h:panelGroup>
<h:form id="form_with_values_to_update">
<fieldset>
<ui:repeat value="#{mrBean.aMemberOfBean.aListInAMemberOfBean}" var="listItem">
<h:panelGroup>
<h:outputText value="#{listItem.label}" />
<h:inputText id="contact_details_input"
value="#{listItem.value}" />
</h:panelGroup>
</ui:repeat>
</fieldset>
</h:form>
</h:panelGroup>
</body>
P.S - Using MyFaces JSF 2.1
The commandlink/button has to go in the same form as where the data of interest is in.
If that's not an option due to some design or business restrictions, then you need a second commandlink/button. First move the original commandlink/button back in the right form, give it an id and hide it using CSS display: none;.
Then put the second commandlink/button in the other form which does something like
<h:commandLink onclick="document.getElementById('form_with_values_to_update:linkid').click(); return false;">
Do something
</h:commandLink>