Rerendring a component inside popupPanel fails - jsf

I have popupPanel with a simple form (for search) and a dataTable (for search results). I try to Rerender the dataTable after submitting the form and populating the search results which fails. Here is the source code
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:rd2="http://www.logica.com/raindance/webcomp"
xmlns:a4j="http://richfaces.org/a4j" template="/layout/template.xhtml">
<ui:define name="head">
</ui:define>
<ui:define name="body" >
.......................................
<rich:popupPanel id="ruleSearchPanel" width="600" lenght="400" autosized="true">
<f:facet name="header">
<h:panelGroup id="modelPanelHeader">
<h:outputText styleClass="modalpanel-header"
value="Search and select a rule set"></h:outputText>
</h:panelGroup>
</f:facet>
<h:form id="searchForm">
<h:panelGrid columns="2" styleClass="center" width="100%">
<h:inputText id="searchForKey" value="#{authRuleRegisterManager.rulSetSearchCriteria}"/>
<a4j:commandButton id="SearchRuleSets" styleClass="plain-btn fright" reRender="ruleSearchPanel"
value="#{messages.search}" type="submit" action="#{authRuleRegisterManager.searchAuthRulesMap(authRuleRegisterManager.rulSetSearchCriteria)}"
/>
</h:panelGrid>
<rich:extendedDataTable id="resultRuleSets"
value="#{authRuleRegisterManager.searchResultsForAuthRuleSets}" selectedClass="active-row"
rows="#{systemSettingsAction.systemSettings.paginationRows.value}"
var="ruleSet"
rowClasses="odd-row-selectable,even-row-selectable"
selectionMode="single">
<rich:column label="ruleset name"
headerClass="left"
styleClass="left" width="70">
<f:facet name="header">
<h:outputText value="name" styleClass="right" />
</f:facet>
<h:outputText value="#{ruleSet.description}" />
</rich:column>
</rich:extendedDataTable>
</h:form>
</rich:popupPanel>
</ui:define>
</ui:composition>
why I cannot rerender my datatable , do I miss something here?
any help will be appreciated.

There is no reRender attribute for <a4j:commandButton> for the version you are using. You can check the tag reference below
a4j:commandButton.
Based on the code I'm seeing (ui:composition not taken into account), if you want to update the dataTable simply change
reRender="ruleSearchPanel"
to
render ="searchForm:resultRuleSets"
If you are confused about determining ids check the link below
How can I know the id of a JSF component so I can use in Javascript
Note: Some of the attributes that you are using are not defined in some of the components that you are using. For example
lenght for rich:popupPanel
selectedClass for rich:extendedDataTable
label for rich:column

Related

How to update an element with a certain ID [duplicate]

This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 7 years ago.
What I would like to do is to update orderList in every time when checkbox has been (un-)checked.
My component is unaccessible with faces error. The component is inside form with id="form"
14:33:29,614 SEVERE [javax.enterprise.resource.webcontainer.jsf.application] (default task-9) Error Rendering View[/pages/view.xhtml]: javax.faces.FacesException: Cannot find component with expression ":form:orderList" referenced from "form:j_idt34:j_idt88:j_idt96:0:j_idt100".
I have tried several solutions including: :form, form, :orderList, orderList, form:panelGridChoice:orderList, :panelGridChoice:orderList, :form:panelGridChoice:orderList, :form:orderList
This is my view
<composite:implementation>
<h:outputStylesheet library="css" name="form.css" />
<h:outputScript>
replaceMedia();
</h:outputScript>
<ui:decorate template="answerDecorator.xhtml">
<ui:define name="additionalForms">
<h:outputText value="#{cc.attrs.question.additionalExplanation}" styleClass="text-normal" escape="false" />
</ui:define>
<ui:define name="component">
<p:panelGrid id="panelGridChoice" columns="1" cellpadding="0" styleClass="inline" columnClasses="" >
<p:dataTable var="answer" value="#{cc.attrs.question.possibleAnswers}">
<p:column headerText="#{msg['survey.question.chooseAnswerList']}" styleClass="thirty-percent">
<h:outputText value="#{answer.text}" />
</p:column>
<p:column headerText="#{msg['survey.question.chooseAnswer']}" styleClass="ten2-percent" >
<p:selectBooleanCheckbox value="#{answer.checked}" >
<p:ajax event="change" process="#this" update=":form:orderList" listener="#{cc.attrs.question.setCheckedAnswers}" />
</p:selectBooleanCheckbox>
</p:column>
</p:dataTable>
<p:orderList id="orderList" value="#{cc.attrs.question.checkedAnswers2Order}" var="answer" itemLabel="#{answer.text}"
converter="entityConverter" itemValue="#{answer}" controlsLocation="left" >
<f:facet name="caption">#{msg['survey.default.makeOrder']}</f:facet>
</p:orderList>
</p:panelGrid>
</ui:define>
</ui:decorate>
</composite:implementation>
Where answerDecorator.xhtml is defined as
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:panelGrid columns="1" style="margin-bottom:10px" cellpadding="5" styleClass="borderless survey-panel-max">
<h:outputText value="#{cc.attrs.question.questionText}" styleClass="text-header"/>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5" styleClass="borderless top-alignment">
<ui:insert name="additionalForms" />
</h:panelGrid>
</h:panelGrid>
<ui:insert name="component" />
This can be really annoying, so in situations like this I usually target the components by style class. Try adding styleClass="orderList" to <p:orderList>, and target it with #(.orderList).

Unable to find facet named 'header' in parent composite component

I have implemented a composite component in JSF using primefaces.
<ui:component ...>
<cc:interface>
<cc:facet name="header"/> ...
<cc:interface>
<cc:implementation>
<p:dataTable>
<f:facet name="header">
<c:choose>
<c:when test="#{empty cc.attrs.metadata.headerText}">
<cc:insertFacet name="header" required="true"/>
</c:when>
<c:otherwise>
#{cc.attrs.headerText}
</c:otherwise>
</c:choose>
</f:facet> ...
</dataTable>
</cc:implementation>
When I use it in a normal page it works fine as expected rendering the datatable.
<ui:composition>
<nav:dataTable/>
<f:facet name="header">
<h:outputText value="headerText" />
</f:facet>
</ui:composition>
But when I use it inside a dialog which uses the above composite component, it throws
component.xhtml #28,54
Unable to find facet named 'header' in parent
composite component with id 'j_idt129'
I am making a ajax call to invoke this dialog on click of a link. The dialog comes in different shape and throwing this error in console. Has anyone faced it ? Any help is really appreciable.
cc:insertFacet inserts the whole f:facet tag, so you shouldn't wrap it into another f:facet tag within the composite implementation. As you are writing a custom p:dataTable I think it's easier to overwrite the already existing header facelet as an interface declaration and conditionally render it using JSTL utilities:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
<composite:interface>
<composite:facet name="header" />
<composite:attribute name="title" />
</composite:interface>
<composite:implementation>
<p:dataTable>
<!-- If the facet is given at parent, insert it.
Otherwise, provide the title given by the attribute -->
<c:choose>
<c:when test="#{not empty cc.facets.header}">
<composite:insertFacet name="header" />
</c:when>
<c:otherwise>
<f:facet name="header">
#{cc.attrs.title}
</f:facet>
</c:otherwise>
</c:choose>
<p:column headerText="column" />
</p:dataTable>
</composite:implementation>
</h:body>
</html>
Using it as:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:comp="http://java.sun.com/jsf/composite/comp">
<f:view>
<h:head />
<h:body>
<h:form>
<comp:myTable title="header">
<f:facet name="header">
<h:outputText value="text" />
</f:facet>
</comp:myTable>
<comp:myTable title="Custom header" />
<p:commandButton type="button" onclick="dialog.show()"
value="show in dialog" />
<p:dialog widgetVar="dialog">
<comp:myTable title="header">
<f:facet name="header">
<h:outputText value="text" />
</f:facet>
</comp:myTable>
</p:dialog>
</h:form>
</h:body>
</f:view>
</html>

JSF selectOneMenu not rendering at all

I'm trying to add a JSF selectOneMenu in a UI fragment using icefaces 1.8 and cannot get it to render no matter what I do. I can get it to render in a normal jspx page but not within a ui fragment.
<ui:fragment xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ice="http://www.icesoft.com/icefaces/component">
<ice:selectOneMenu id="myselect"
style="width:100px"
value="#{someField}"
rendered="true">
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
<f:selectItem itemValue="3" itemLabel="3"/>
</ice:selectOneMenu>
</ui:fragment>
Am I missing something basic? I am new to JSF. If I pull out the exact same selectOneMenu into a jspx it works as it should but when I include a ui fragment it does not.
Edit for BalusC:
The fragment is used later in a jspx file that is pulled in with
<ui:include src="myfile.jspx">
<ui:param name="someField" value="#{beanName.someField}"
</ui:include>
I am going off of an existing . There is a lot more in the include that all works as expected and I can add other components like outputText into the ui:fragment but it doesn't make any difference. The full fragment is below. I can post the full include from the jspx as well.
<ui:fragment xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ice="http://www.icesoft.com/icefaces/component">
<ice:panelGrid cellspacing="0" cellpadding="0" columns="3">
<!-- This component is displayed when the form is opened for editing or display mode-->
<ice:panelGroup rendered="#{not beanName.outputOnlyView }">
<!-- This component is displayed when the form is opened for display mode in EDM stage-->
<ice:panelGroup rendered="#{beanName.displayMode}">
<ice:outputText
id="#{fieldId }"
style="#{inlineStyleField}"
value="#{fieldValue}" >
</ice:outputText>
</ice:panelGroup>
<ice:selectOneMenu id="myselect"
style="width:100px"
value="#{someField}"
rendered="#{not beanName.outputOnlyView}">
<f:selectItem itemValue="IntranetID" itemLabel="Intranet ID"/>
<f:selectItem itemValue="Name" itemLabel="Last Name, First Name"/>
<f:selectItem itemValue="KnownAs" itemLabel="Known As"/>
</ice:selectOneMenu>
<!-- This component is displayed when the form is opened for editing mode in Submitter stage-->
<ice:panelGroup rendered="#{!beanName.displayMode}" panelTooltip="#{fieldId}Help">
<ice:panelGrid style="#{inlineStyle}" cellspacing="0" cellpadding="0" columns="3">
<!-- Column 1 the component -->
<ice:selectInputText id="#{fieldId }"
binding="#{feildBinding}"
options="{frequency:0.4}"
rows="20"
width="100"
partialSubmit="true"
immediate="true"
autocomplete="true"
value="#{fieldValue}"
rendered="#{not beanName.outputOnlyView}"
readonly="#{beanName.globalReadOnly }"
listVar="employee"
listValue="#{beanName[employeeSelect].employeeNamePossibilities}"
valueChangeListener="#{beanName[valueChangeListener] }"
textChangeListener="#{beanName[textChangeListener]}">
<f:facet name="selectInputText">
<ice:panelGrid columns="1">
<ice:panelGrid columns="2" columnClasses="searchCol1,searchCol2">
<ice:outputText id="name" value="#{employee.name}"/>
<ice:outputText id="email" value="#{employee.email}"/>
</ice:panelGrid>
<ice:panelGrid columns="3" columnClasses="searchCol4,searchCol3,searchCol5">
<ice:outputText id="function" value="#{employee.function}"/>
<ice:outputText id="subfunction" value="#{employee.subfunction}"/>
<ice:outputText id="stat1" value="#{employee.stat1}"/>
</ice:panelGrid>
</ice:panelGrid>
</f:facet>
</ice:selectInputText>
<!-- Column 2: Error Messages for this component -->
<ice:message style="color:red;" id="#{fieldId}Error" for="#{fieldId}" showDetail="true"/>
<!-- Column 3: HoverHelp if required -->
<ui:include src="../inc-components-pcr/sub-components-pcr/hoverHelpColumnAndTooltip.jspx"/>
</ice:panelGrid>
</ice:panelGroup>
</ice:panelGroup>
</ice:panelGrid>
</ui:fragment>
I was including the template multiple times on the page which was causing multiple instances of the same id causing it to not render at all. Hence the behavior at the end where an initially hidden one was able to show since the initial render would not render any leaving that ID as available. Dumb mistake.

Primefaces - all inplaces toggled when validation fail

I am using JSF 2.1 and primefaces 3.5. Let's say I have a following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Web application</title>
</h:head>
<h:body>
<h1>Editor</h1>
<h:form>
<p:wizard>
<p:tab title="Edit">
<h2>Edit:</h2>
<p:dataTable value="#{editorBean.applications}" var="app">
<p:column headerText="Id">
<p:inplace emptyLabel="Value not assigned" editor="true" effectSpeed="fast">
<p:inputText value="#{app.id}" />
</p:inplace>
</p:column>
<p:column headerText="Name">
<p:inplace emptyLabel="Value not assigned" editor="true" effectSpeed="fast">
<p:inputText value="#{app.name}" required="true" />
</p:inplace>
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="Summary">
<h2>Summary:</h2>
<p:dataTable value="#{editorBean.applications}" var="app">
<p:column headerText="Id">#{app.id}</p:column>
<p:column headerText="Name">#{app.name}</p:column>
</p:dataTable>
</p:tab>
</p:wizard>
</h:form>
</h:body>
</html>
When I press next on the wizard, and validation fails (application name is blank) then all inplaces included on the page are toggled to editor mode.
I think that they shouldn't be toggled since validation for each input is performed when you accept editor for this input.
It looks awful, especially that I have a lot of inplaces.
I would like to disable toggling of each inplace editor when validation fails. Does anyone have an idea of how to solve this problem?
That's because of p:inplace component is not made for this usage purpose. There are few other components makes problems when used in data tables like inplace but for your requirement this can be useful:
<p:column headerText="Year" style="width:25%">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
<f:facet name="input"><p:inputText value="#{car.year}" style="width:96%" label="Year"/></f:facet>
</p:cellEditor>
</p:column>
You can check the full example from primefaces showcase.

Datatable selection not working

When I select a row in my primefaces datatable the row highights, but the selection event is not being invoked and the selected row data is not going to it. Also I notice that my eclipse debugger seems to just hang with PrimeFaces, anyone else notice this? Below is my .xhtml.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<h:outputStylesheet library="css" name="table-style.css" />
</h:head>
<h:body>
<center>
<p:dataTable var="user" value="#{customer.getCustomerList()}"
selection="#{customer.selectedCustomer}" selectionMode="single"
rowSelectListener="#{custmoer.onUserSelect}" onRowSelectUpdate="userUpdateForm"
onRowUnselectUpdate="userUpdateForm"
paginator="true" rows="5" rowKey="#{user.customerID}" >
<p:column>
<f:facet name="header">
<h:outputText value="Id" />
</f:facet>
<h:outputText value="#{user.customerID}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{user.name}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Address" />
</f:facet>
<h:outputText value="#{user.address}" />
</p:column>
</p:dataTable>
<p:inputText id="userUpdateForm" value="#{customer.selectedCustomer.name}" />
</h:form>
</center>
</h:body>
your onXXX attributes are bound to opaque strings, when they're supposed to be bound to javascript fragments (either a method call or a fragment that executes some code). i'm guessing javascript is throwing an exception, and nothing gets sent to the server because execution in the browser halts.
Put the <p:datatable> into a <h:form> component.
May be this is only a missing <h:form> start tag in your post (the </h:form> end tag is included). But forgetting to wrap a data posting component into a <h:form> is a common mistake which leads to the symptoms described by you.
Seems the problem was IE9. Problem disappeared with Firefox.
This can happen if there is another issue in the data table for example in my case the table is editable but I did not add editMode attribute after I added it selection also started working.

Resources