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.
Related
I am trying to emulate the Primefaces Showcase to have a result set that uses filtering and a row expansion. I get errors whenever I try either one. The page loads without errors. In the code example, I have stripped the filtering to isolate the issue. It appears that any time an AJAX request is triggered it will give an error. The error is triggered when trying to use the row expansion as that uses an AJAX call to fetch the expanded row.
We are using Primefaces 8.0 on IBM Rad local server (Eclipse). Result set is pulled from DB2 using Hibernate and that part works.
Please help by suggesting why the AJAX fails everytime?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</h:head>
<h:body>
<ui:composition template="/template/maintemplate.xhtml">
<ui:define name="title">Search Results</ui:define>
<ui:define name="content">
<h:form id="formId">
#{searchResultsBean.init}
<p:dataTable id="parameterList" var="data"
value="#{searchResultsBean.parameterList}">
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column value="#{data.companyId}" >
<f:facet name="header">
<h:outputText value="Company ID" />
</f:facet>
<h:outputText value="#{data.companyId}" />
</p:column>
<p:column value="#{data.companyName}" >
<f:facet name="header">
<h:outputText value="Company Name" />
</f:facet>
<h:outputText value="#{data.companyName}" />
</p:column>
<p:column value="#{data.alertNumber}">
<f:facet name="header">
<h:outputText value="Alert Number" />
</f:facet>
<h:outputText value="#{data.alertNumber}" />
</p:column>
<p:column value="#{data.comment}">
<f:facet name="header">
<h:outputText value="Comment" />
</f:facet>
<h:outputText value="#{data.comment}" />
</p:column>
<p:rowExpansion>
<p:panelGrid columns="2" columnClasses="label,value"
style="width:300px">
<h:outputText value="Company ID" />
<h:outputText value="#{data.companyId}" />
<h:outputText value="Company Name" />
<h:outputText value="#{data.companyName}" />
<h:outputText value="Alert #" />
<h:outputText value="#{data.alertNumber}" />
<h:outputText value="Alert Description" />
<h:outputText value="$#{data.alertNumber}" />
</p:panelGrid>
</p:rowExpansion>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Error received in console:
ReferenceError: ajaxWaitCursorOn is not defined
Specific error in primefaces generated javascript:
$(function(){PrimeFaces.cw("AjaxStatus","widget_j_id878804506_56ad391e",{id:"j_id878804506_56ad391e",delay:0,start:function(){ajaxWaitCursorOn()},success:function(){ajaxWaitCursorOff()}});});
Note 1: We tried changing it to use #Inject instead of calling the init method and got the same result.
Note 2: We verified that jQuery is loaded using a simple alert in the console.
The issue was this line above: template="/template/maintemplate.xhtml
It was loading a template file. We didn't make this, but copied it from another project. The template file had this line in for some reason: <p:ajaxStatus onstart="ajaxWaitCursorOn()" onsuccess="ajaxWaitCursorOff()" />
I am not sure if this answer provides value to anyone except for this: Check your template files if you have any.
I have extracted this problem out into a simple scenario. obviously I can work around the issue, but curious as to what the explanation might be, and why this does not work.
using h:dataTable as an example, if I put a <h:panelGroup> inside one of the <f:facet>'s of the table, whats inside the <h:panelGroup> does not get displayed, and I dont see why.
this is in a project using Spring, Hibernate and Primefaces with JSF2 and facelets, running on Tomcat, but this appears to be stock standard JSF behaviour?
In the example below, the contents of both h:panelGroup do not get displayed, unless I put an element before the h:panelGroup (for example some text) then it does get displayed?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>-- Nothing --</title>
</f:facet>
</h:head>
<h:body>
<h:form id="nothingForm">
<h:dataTable id="nothingData" value="#{null}" var="item">
<h:column>
<f:facet name="header"> col1 </f:facet>
things
</h:column>
<h:column>
<f:facet name="header">
<h:panelGroup id="headerGroup" rendered="#{true}">
crappo
</h:panelGroup>
col2
</f:facet>
stuff
</h:column>
<f:facet name="footer">
<h:panelGroup id="footerGroup" rendered="#{true}">
crappo
<h:commandButton id="btn1" value="Button 1" />
</h:panelGroup>
<h:commandButton id="btn2" value="Button 2" />
</f:facet>
</h:dataTable>
</h:form>
</h:body>
</f:view>
</html>
thanks for looking!
<f:facet> must contain a single node, while your <h:panelGroup> and the text "col2" are two nodes.
Try moving the text inside of the <h:panelGroup>...
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>
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
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.