I use primefaces version 5.3 and jsf version 2.2.6.
I implemented a tabClose ajax event for a tabview, but the problem is that for the first tab, the tabClose event isn't triggered and the method remove isn't called, for all the other tabs, it is and it works and I can't understand why.
Additionally, if I try to close the first tab, all the tabs are closed.
The code looks like this:
<p:tabView id="tabs" activeIndex="#{mainPage.index}">
<p:ajax event="tabClose" listener="#{mainPage.remove}" update="formTabs" />
<p:ajax event="tabChange" listener="#{mainPage.changeTab}" update="formTabs" />
<c:forEach items="#{mainPage.tabs}" var="tab" varStatus="loop">
<p:tab title="#{tab.title}" closable="true">
<f:subview id="tab#{loop.index}">
<ui:debug />
<ui:include src="#{tab.url}">
<ui:param name="focusedTab" value="#{tab.id}" />
</ui:include>
</f:subview>
</p:tab>
</c:forEach>
</p:tabView>
Does anybody know what the cause could be?
The above explained problem was solved by adding dynamic="true" in the tabView. But after that it appeared another obstacle, when the switch between tabs was made, all the tabs disappeared. That was solved by adding cache="false"
Related
I tried to use draggable component https://www.primefaces.org/showcase/ui/dnd/draggable.xhtml for inputTextArea component but it does not work for me. Do you know any workarounds for making input components draggable?
My code:
<p:outputPanel>
<p:inputTextarea id="test">
</p:inputTextarea>
</p:outputPanel>
<p:draggable for="test" containment="parent" />
I don't have any errors in console. But drag function does not work as it work for p:panel, for example.
try to wrap the component in a panel and assign "for" to that panel.
<p:outputPanel>
<p:panel id="test">
<p:inputTextarea />
</p:panel>
<p:draggable for="test" containment="parent"/>
</p:outputPanel>
I am using Primefaces 6.1 and if I do this in a plain xhtml page, it actually works fine. However, my problem is that I need to adopt the corporate look and feel and I am not enough of a CSS guru to know where to start debugging the issue that results from the inherited styles that cause the carousel to render all content in a list on the first "page", clicking on the other tabs shows empty content. I am trying to have each tab contain an iframe so I though that might be the problem. So, I tried simply using a simple example, slightly modified from the primefaces showcase:
<p:carousel numVisible="1" headerText="Tabs" style="margin-bottom:0" >
<p:tab title="Content I">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText
value="content 1" />
</h:panelGrid>
</p:tab>
<p:tab title="Content II">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText value="Content 2" />
</h:panelGrid>
</p:tab>
<p:tab title="Content III">
<h:panelGrid columns="1" cellpadding="10">
<h:outputText value="Content 3" />
</h:panelGrid>
</p:tab>
</p:carousel>
However, the output still gets rendered like this...
Carousel screenshot
How do I get it to use the proper style shown in the Primefaces showcase and/or debug the problematic inherited CSS from the corporate CSS templates? Is there a way to force the standard primefaces function local to my application that would override the inherited issues?
I have a problem that a I couldn't solve. When I click first time on a a4j:commandButton there is not action. The second and following time it works perfectly. I have read about this problem however I have not clear the solucion.
I am new, and I have find this solucion: (h:commandButton/h:commandLink does not work on first click, works only on second click) however I do not know where should I introduce the script code.
I have found this: however I think is an old jsf version:
(https://community.jboss.org/thread/165031)
And I have tried to repare it with: https://community.jboss.org/wiki/ProgrammaticControlOfPartialProcessingInRichFaces4. However, I have not been success
If someone could explain me the #BalusC solution step by step, it could be really hepful
Thanks very much:
My code is: (everything in the same file)
<ui:define name="table">
<h:form id= "formListCompanies">
<a4j:outputPanel id="tablePaneRegion">
<rich:extendedDataTable ....
<rich:column sortable="false" width="100%">
...
<a4j:commandLink id="editCmd" styleClass="no-decor" render="editGrid, editPane"
execute="#this" oncomplete="#{rich:component('editPane')}.show()">
<a4j:param value="#{it.index}" assignTo="#{myBean.currentIndex}" />
<f:setPropertyActionListener target="#{myBean.selected}" value="#{mypojo}" />
</a4j:commandLink>
....</rich:column>
....
<rich:popupPanel id="editPane" header="#{...}" domElementAttachment="body"
moveable="true" modal="true" resizeable="false" autosized="true"
onshow="focus(#{rich:component('name')});">
....
<!-- h:Inputtext ..-->
<h:panelGrid columns="2">
<a4j:commandButton value="#{'save'}" action="#{myBean.edit}"
render="dataTable" execute="editPaneRegion" />
<a4j:commandButton value="#{...}"
onclick="#{rich:component('editPane')}.hide(); return false;" />
</h:panelGrid>
</h:form>
</a4j:outputPanel>
</rich:popupPanel>
What I have already tried is to take out the h:form id= formListCompanies, and put there a h:panelgrid and a h:panelgroup
Is the problem related to the doble clicking issue? Am i in the right way?
rerender panel and form (form state lost error in jsf spec)... render="richPanelMantenimientoTipoVisualAjaxWebPart,frmMantenimientoTipoVisual"
I'm having a issue with JSF / Primefaces to display the popup.
As a background, I'm using JSF templates to generate my pages:
The inline works to show the datatable but when I click the button to show the dialog nothing happens. I don't see any error in the logs.
<h:body>
<p:dataTable id="lstUsers" var="u" value="#{userController.userList}" selectionMode="single"
selection="#{userController.selectedUser}" rowKey="#{u.login}" paginator="true" rows="10">
<p:column headerText="Username">
<h:outputLabel value="#{u.login}"></h:outputLabel>
</p:column>
<p:column headerText="Role" rowspan="2">
<h:outputLabel value="#{u.role}"></h:outputLabel>
</p:column>
<f:facet name="footer">
<p:commandButton id="bttAdd" type="button" value="Add" update=":contentView:idPanelPop" oncomplete="userDialog.show()" ></p:commandButton>
<p:commandButton id="bttEdit" value="Edit"></p:commandButton>
<p:commandButton id="bttRemove" value="Remove"></p:commandButton>
</f:facet>
</p:dataTable>
<p:dialog id='userDialog' header="User Details" widgetVar="userDialog"
resizable="false" width="200px" height="200px" showEffect="clip" hideEffect="fold">
<h:panelGrid id="idPanelPop" columns="2">
<h:outputLabel id='dOutUser' value="Username"></h:outputLabel>
<h:outputLabel id='dOutUserValue' value="#{userController.selectedUser.login}"></h:outputLabel>
<h:outputLabel id='dOutRole' value="Role"></h:outputLabel>
<h:outputLabel id='dOutRoleValue' value="#{userController.selectedUser.role}"></h:outputLabel>
</h:panelGrid>
</p:dialog>
</h:body>
The above code is used as part of
<ui:composition template="./maintemplate.xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define id="contentViewIndex" name="content">
<ui:include src="#{navigationController.currentPage}"></ui:include>
</ui:define>
</ui:composition>
My template page contains the following:
<p:layoutUnit position="center">
<h:form id="contentView">
<ui:insert name="content">
Default Content
</ui:insert>
</h:form>
</p:layoutUnit>
The navigationController.current value changes as per menu click to navigates across the pages.
I'm following the oficial primafaces showcase PrimeFaces datatable
I'm current setup is Netbeans 7.3 RC1 / Apache 7.0.34.0 / Mojarra 2.1.13
I'll appreacite if someone could point me to the right direction to solve this :)
EDIT: After taking account the answer inline nothing works.
Maybe I should had checked first the brower console, and in this case it's weird cause it complains that it does not recognize the widgedVar.
I already tried to put the Dialog outsite the form and the result is the same error. :/
Your bttAdd button is ordinary push button (you set it explicitly with type="button" attribute). This means it just do some JavaScript, without any AJAX requests. To do an AJAX request, and update your panel remove type="button" and try than.
I would change 2 things (first maybe not important):
Add 2 forms: one with data table inside and another inside dialog
change widgetVar="userDialog" to something unique. widgetVar="userDialogWidget"
Found the issue ...
After lots of tests and digging and taking into account the previous answers. The problem was two things:
1st. The diagonal height and width cannot have px in it.
2nd. And as per previous answers, it has to be outside as
here explained.
The p:dialog cannot have px in the sizes.
I'm using Primefaces 3.4 (also tried 3.3) and Mojarra 2.1.7. But I have a problem updating my dynamical tabs within a p:tabView.
I have 2 buttons which should add an additional tab. The first button is outside the p:tabView. When clicking this button, the backing bean is called, the p:tabView is updated, and the new tab is shown. But when I click the second button, which is inside a tab of that tabView, the backing bean is called, but the tabView is NOT updated.
This lack of updating occures only in dynamic tabs. When I modify the given example to have only one tab, and displaying a value which changes when clicking the buttons, the tabView is updated by both buttons, and the new Value is shown. So it is an problem only occuring in dynamic tabs.
Here is my code.
<f:view contentType="text/html">
<h:form>
<p:commandButton value="press me" action="#{idTestBean.addTab}" update=":ApplicationTab"/>
</h:form>
<p:tabView id="ApplicationTab" cache="false" dynamic="false" var="tab" value="#{idTestBean.tabList}">
<p:tab title="tab" closable="false" >
<p:panel>
<h:form>
<p:commandButton value="press me" action="#{idTestBean.addTab}" update=":ApplicationTab"/>
</h:form>
#{idTestBean.count}
</p:panel>
</p:tab>
</p:tabView>
</f:view>
The different tabs contains separate forms that needed to be submitted separate. therefore I had the approach of more than one form.
Well this must do the trick:
<f:view contentType="text/html">
<h:form>
<p:commandButton value="press me" action="#{idTestBean.addTab}" update="#form"/>
<p:tabView id="ApplicationTab" cache="false" dynamic="false" var="tab" value="#{idTestBean.tabList}">
<p:tab title="tab" closable="false" >
<p:panel>
<p:commandButton value="press me" action="#{idTestBean.addTab}" update="#form"/>
#{idTestBean.count}
</p:panel>
</p:tab>
</p:tabView>
</h:form>
</f:view>
Today i did the same problem too, I had a dynamic tabview, and inside tabs, there're some panels that needed to be updated when tab changes, so what i did was, i added the p:ajax on event TabChange, and in the update attribute, i added the form id and tabviewId like this:
:formID:tabViewID
and it worked at last.
Just so you know.