I'm using pf4.0 and jsf 2.2 for my webapp. Now I have a nested TabView containing a second TabView with a datatable. Like this:
<p:tabView>
<p:tab>
<p:tabView>
<p:tab>
<p:dataTable>
....
</p:dataTable>
</p:tab>
</p:tabView>
...
the problem now is that if i use a filter in the datatable the following js error occurs:Uncaught TypeError: Cannot read property 'outerHeight' of undefined
Does anyone out there have a solution? Haven't found anything regarding to this problem :(
UPDATE:
I tried to reproduce the problem in an simple application and I found out, that this error only occures when scrollable=true and scrollHeight=250px is set.
Anyone got an idea?
Related
Im running a webapplication JEE /JSF on Jboss 7.3.1. Cause of vulnerability issues we had to upgrade Primefaces 6.2 to 7.0. I doesnt go to 8.x.x cause of too much changes in code and effort to test for now.
Problem as follows : Im using <h:outputText> for display names, sometimes with html inside like <br/>.The linebreak will be displayed correctly for plain use in xhtml, but if that same <h:outputText> is in pf datatable header like this, the linebreak wont be displayed correctly.
<p:column id="#{cc.attrs.cid}actionColumn"
rendered="#{cc.attrs.tableController.actionColumnVisible}"
style="text-align: center; width:#{cc.attrs.tableController.actionColumnWidth.width}px;">
<f:facet name="header">
<!-- to do resource bundle -->
<h:outputText id="#{cc.attrs.cid}actionHeader" value="#{cc.resourceBundleMap.action}" escape="false"/>
</f:facet>
This is the way im building the string to disply :
res.getString("konfiguration.fahrzeugKonfiguration.standard")+"<br/>"+res.getString("konfiguration.fahrzeugKonfiguration.ansageSprache")
Same code leads to :
doesnt breakLine in tableheader
Is that a bug in pf 7.0 or did i do something wrong ? Thanks in advance
I have a strange error that only happens sometimes and I can't figure out what is going wrong.
I get the following error:
Component ID form_lpm:PODports:PODlocalChargeTable:j_idt1665:j_idt1667:chargeDiv has already been found in the view.
Okay we all know that you can't have duplicate IDs in JSF but that ID above doesn't actually exists!
I have something like this:
<ui:repeat id="PODport">
<p:dataTable id="PODlocalChargeTable">
<p:columns>
<my:compositeComp/>
</p:columns>
</p:dataTable>
</ui:repeat>
The composite component (my:compositeComp) has an ID chargeDiv in there.
So in the error message j_idt1665 is the dynamic ID for the p:columns iteration and j_idt1667 the ID for the composite component.
However in the actual generated HTML we get these IDs (as you would expect): The green counter is for the ui:repeat, the blue one for the dataTable and the orange one is for the p:columns.
At first this page is rendered fine (with the IDs shown above) but when I do an ajax request and update the form I get the error with the duplicate ID. The strange thing is that the counters are removed from that ID. Why is that and what can I do?
I have tried to specify IDs for the p:columns (dynCol) and the composite component (compId) and interestingly I now get pretty much the same error but one of the counters is still in the ID:
<ui:repeat id="PODport">
<p:dataTable id="PODlocalChargeTable">
<p:columns id="dynCol">
<my:compositeComp id="compId"/>
</p:columns>
</p:dataTable>
</ui:repeat>
Component ID
form_lpm:PODports:PODlocalChargeTable:dynCol:2:compId:chargeDiv has
already been found in the view
I had the problem with two different composite components. The components were basically just something like this:
<p:outputPanel id="chargeDiv">
content
</p:outputPanel>
<p:tooltip for="chargeDiv">
tooltip content
</p:tooltip>
I am using JSF 2.1 (Mojarra 2.1.29-08) and Primefaces 6.1.18
Update:
I have done a bit more testing and it is definitely related to the use of composite components.
If I have a very simple composite component:
<cc:implementation>
<p:outputPanel id="chargeDiv">
</p:outputPanel>
</cc:implementation>
and I have dynamic columns like
<p:columns var="myvar" value="#{bean.list}" id="dynCol">
<my:compositeComp/>
</p:columns>
I get the error with the duplicate ID.
If I use the content of the composite component directly in the p:columns:
<p:columns var="myvar" value="#{bean.list}" id="dynCol">
<p:outputPanel id="chargeDiv">
content
</p:outputPanel>
</p:columns>
then it works fine.
This question already has answers here:
How to choose the right bean scope?
(2 answers)
Closed 4 years ago.
this is an issue following this one: PrimeFaces datatable.filter() and url parameter
is use PrimeFaces-5.1 and omnifaces-2.1 to render a datatable with pagination, filtering and sorting while using request parameters.
my datatable is constructed like this:
<o:form includeRequestParams="true">
<p:dataTable id="hostStateHistoryTable" value="#{HostHistoryBean.hostStateHistoryList}" var="status" widgetVar="statusTable"
filteredValue="#{HostHistoryBean.filteredHostStateHistoryList}"
rowStyleClass="#{status.state eq 0 ? 'up' : null} #{status.state eq 1 ? 'down' : null} #{status.state eq 2 ? 'unreachable' : null}"
rows="50" paginator="true" paginatorTemplate="{PageLinks} {RowsPerPageDropdown}" rowsPerPageTemplate="10,50,100">
<p:column sortBy="#{status.stateTime}">
<f:facet name="header">Start Time</f:facet>
<h:outputText id="Start" value="#{status.stateTime}" />
</p:column>
... all columns
</p:dataTable>
</o:form>
But Sorting is removing the PrimeFaces Datatable Filtering.
I can sort alone and filter alone without problem, but when i sort the datable after filtering it remove the filter. again Clicking on the same filter won't do anything but filtering on another value will display the expected result.
It seems that the o:form will resend the request, including attribute, instead of using the datatable filteredValue.
Edit:
I uploaded an eclipse based MCVE project here: http://www.dacave.fr/stackoverflow/test.faces.rar
Ok so i found out that filteredValue was reseted on each ajax call because of the #RequestScoped.
I think i was kind of mixing up things.
So i switched all #ManagedBeans to #Named
then i created a new #SessionScoped Bean with most of the attributes and i #inject a #RequestScoped bean with the request based attributes into it.
Now everything works as expected
I have upgraded my application to primefaces 5.1 and my below code started throwing NPE if I use binding attribute with datatable. Do anyone have any idea why after up gradation to new primefaces version I am getting Null pointer exception if I clicks on sort icon to sort the data.
xhtml code
<h:body>
<h:form id="dataForm">
<p:dataTable id="datatableId" value="#{bean.listToDisplay}" var="list" widgetVar="datatableVar" binding="#{bean.dataTable}">
<p:column id="titleColumn" filterBy="#{list.title}" sortBy="#{list.title}" headerText="Title" filterMatchMode="contains">
#{list.title}
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
The following exception I am getting
SEVERE: java.lang.NullPointerException
at org.primefaces.component.datatable.DataTable.findColumn(DataTable.java:785)
at org.primefaces.component.datatable.feature.SortFeature.decode(SortFeature.java:85)
at org.primefaces.component.datatable.DataTableRenderer.decode(DataTableRenderer.java:62)
at javax.faces.component.UIComponentBase.decode(UIComponentBase.java:789)
at org.primefaces.component.api.UIData.processDecodes(UIData.java:246)
at com.sun.faces.context.PartialViewContextImpl$PhaseAwareVisitCallback.visit(PartialViewContextImpl.java:534)
at com.sun.faces.component.visit.PartialVisitContext.invokeVisitCallback(PartialVisitContext.java:183)
at org.primefaces.component.api.UIData.visitTree(UIData.java:692)
at javax.faces.component.UIComponent.visitTree(UIComponent.java:1663)
at javax.faces.component.UIForm.visitTree(UIForm.java:371)
at javax.faces.component.UIComponent.visitTree(UIComponent.java:1663)
at javax.faces.component.UIComponent.visitTree(UIComponent.java:1663)
at com.sun.faces.context.PartialViewContextImpl.processComponents(PartialViewContextImpl.java:383)
at com.sun.faces.context.PartialViewContextImpl.processPartial(PartialViewContextImpl.java:257)
at org.primefaces.context.PrimePartialViewContext.processPartial(PrimePartialViewContext.java:60)
Based on my own experimentation after encountering the same problem, I have discovered that putting the DataTable object in a #RequestScoped managed bean seems to solve the problem.
This can include either changing the managed bean to #RequestScoped, if possible, and if this is not possible, create a separate #RequestScoped bean that includes the DataTable.
How can I use an AJAX listener inside a tabview. Whenever the tab opened(or for a mouse click anywhere), the listener need to execute. I tried with event=click,change,blur etc, but not worked.
<p:tabView activeIndex="#{backingbean.tanIndex}">
<p:ajax event="?" listener="#{backingbean.setTabIndex}" />
in view.jsf:
<p:tabView>
<p:ajax event="tabChange" listener="#{employeeEdit.onTabChange}">
in edit.jsf:
<p:tabView activeIndex="#{employeeEdit.tabIndex}">
in backingBean:
private int tabIndex;
public int onTabChange(TabChangeEvent event)
{
// Here I'm getting event.getTab().getId() and set it to `tabIndex` property.
}
When editing I need redirect to the that tab which is active in view. So if I didn't change the tab onTabChange() will not execute and tabIndex has its old value only.
I'm using Primefaces version-3.0.M3.
It looks like this was a Primefaces bug that was fixed in the newest 3.0.1 release:
http://forum.primefaces.org/viewtopic.php?f=3&t=17288
I had a similar problem with Primefaces 5.1
As long as i put the tabview into a form everything worked fine.
But because i wanted to use seperate forms in my tabs i had to remove the surrounding form of the tabview to avoid nested forms.
Without the surrounding form the ajax event didn´t get triggered any more when changing the tab.
My solution was to use a remotecommand in a form parallel to the tabview.
The remotecommand is triggered by the onTabChange attribute of the tabview element.
At that call i forwarded the index parameter to the global request parameters.
<p:tabView id="rootTabMenu" styleClass="tabcontainer" prependId="false"
activeIndex="#{sessionData.activeTabIndex}" widgetVar="rootTabMenu"
onTabChange="tabChangeHelper([{name: 'activeIndex', value: index}])">
// Tabs...
</p:tabView>
<h:form id="tabChangeHelperForm">
<p:remoteCommand name="tabChangeHelper" actionListener="#{sessionData.onTabChange()}" />
</h:form>
In the backing bean i catched the value again from the request parameter map and set the active index.
public void onTabChange()
{
FacesContext context = FacesContext.getCurrentInstance();
Map<String, String> paramMap = context.getExternalContext().getRequestParameterMap();
String paramIndex = paramMap.get("activeIndex");
setActiveTabIndex(Integer.valueOf(paramIndex));
System.out.println("Active index changed to " + activeTabIndex);
}
Hope that can help you
Not sure if what I am writing is true for ver 3.0.M3. I have in front of the documentation of ver 3.0RC2 and there is a paragraph about this, with explaination and sample code (chapter TabView, paragraph Ajax Behaviour Events). You should have a look at that.
This is the part of the sample code that should help most:
<p:tabView>
<p:ajax event=”tabChange” listener=”#{bean.onChange}” />
</p:tabView>
Jaron has an answer that the 3.0.1 release fixed this but I had this all the way up to 3.5 i believe i was still having this problem. on firefox and IE, the javascript handler for the Tabs weren't firing the ajax event. On google chrome, for whatever reason, it actually worked.
I moved up to Primefaces 5.0 today and this does NOT have the problem any longer. So at the very worst-case, go to Primefaces 5.0 and you'll be all good in the hood