Inside one tab, I can cilck on a button to display an "h:groupPanel". If I do this, and then change the active tab, the groupPanel that has just appeared is still visible, and appears on top of the now current tab.
The code for the tabView is:
<p:tabView dynamic="true" cache="false" id="characterTabView">
<p:tab title="View" id="viewTab">
<ui:include src="/sections/character/view.xhtml" />
</p:tab>
<p:tab title="Upgrade" id="upgradeTab">
<ui:include src="/sections/character/upgrade.xhtml" />
</p:tab>
</p:tabView>
The "upgrade" page looks like
<h:panelGroup id="searchCompetencies" rendered="#{characterBean.rightPanel == 'searchResult'}">
<h:panelGroup styleClass="characterUpgradeLeft">
<ui:include src="/sections/character/searchViewLeft.xhtml" />
</h:panelGroup>
<h:panelGroup id="competencyCreation" rendered="#{characterBean.rightPanel == 'competencyCreation'}">
<!-- The panel that is made visible -->
</h:panelGroup>
And the page in which the component is made visible (searchViewLeft):
<p:fieldset legend="Create competency" styleClass="createCompetencyStart">
<h:form>
<p:commandButton value="Create competency" type="button" onclick="toggleCreate()" update="upgradeTab" />
</h:form>
</p:fieldset>
where "toggleCreate" changes the value of "characterBean.rightPanel".
Would you have any idea as to what I am missing here?
Thanks a lot :)
Related
I want to know how to do show a panelgroup if is selected specific tab of accordionPanel Primefaces.
<p:accordionPanel id="myAccordion" activeIndex="1">
<p:tab title="first" id="tab0">
...
</p:tab>
<p:tab title="second" id="tab2">
...
</p:tab>
</p:accordionPanel>
<h:panelGroup id="myPanelGroup" rendered="#{myAccordion.activeIndex=='0'}">
...
</h:panelGroup>
Thank you.
H
Just check prime face showcase they have ajax event for your reference
<p:ajax event="tabChange" listener="#{tabbedView.onTabChange}" update=":form:msgs" />
<p:ajax event="tabClose" listener="#{tabbedView.onTabClose}" update=":form:msgs" />
Once you get your tab index you can do whatever you want to do and update your panel according your need.
https://www.primefaces.org/showcase/ui/panel/accordionPanel.xhtml
I have 2 pages. Page 1 shows list of users in a datatable with 2 buttons for creating new user and editing existing user. On click of create and edit button both, a pop-up is opened(Page2) with a inputbox and a save button.
The issue that I am facing is if I click create(on Page1), Page2 opens. If I input something in the inputbox name, click cancel and then select an existing row in the datatable on Page1 and click edit,Page2 is opened again and whatever I inputted on create button click is retained and the PrimeFaces component is not updated even though I catch the dialog's onClose event on click of cancel button and reinitialize my view objects.
Page1:
<ui:composition template="template.xhtml>"
<ui:define name="center" >
<h:form id="myForm1">
<h:panelgroup id="panel1">
<p:datatable ..... />
This datatable shows list of users
<p:panelGrid id="buttonMenu1" >
<p:commandButton id="Create" actionListener="#{myBean1.onCreate}" oncomplete="PF('id2Var').show();" update=":myForm2" />
</p:panelGrid>
</h:panelGroup>
</h:form>
</ui:define>
<ui:define name="dialog">
<ui:include src="Page2" />
</ui:define>
</ui:composition>
Page2:
<p:dialog id="id2" widgetVar="id2Var" >
<p:ajax event="close" listener="#{myBean.onClose}" update=":myForm2" />
<h:form id="myForm2">
<h:panelgroup id="panel2">
<p:outputLabel value="Name" />
<p:inputText id="name" value="myBean.myList.name" />
<p:panelGrid id="buttonMenu" >
<p:commandButton id="Save" actionListener="#{myBean.onSave}" update=":myForm2" />
<p:commandButton id="Cancel" actionListener="#{myBean.resetInput}" update=":myForm2" oncomplete="PF('id2Var').hide();" />
</p:panelGrid>
</h:panelgroup
</h:form>
</p:dialog>
i have just 2 xhtml pages . first page contains a form with a button and i have set the navigation rule in such a way that upon this button click , i'm just returning "success" from the backing been and as a result the second page opens which contains the accordion panel . But the problem is , after the page has been loaded the page freezes and you know the tabs present in the accordion panel cannot be expanded . (i.e) accordion panel fails to work.
page 1:
<h:form>
<p:commandButton action="#{Bean.check}" value="click"></p:commandButton>
</h:form>
page 2:
<h:form>
<p:accordionPanel activeIndex="#{Bean.store}">
<p:tab title="tab1">
<h:commandLink value="click"></h:commandLink>
<br />
<h:commandLink value="next"></h:commandLink>
<br />
<h:commandLink value="previous"></h:commandLink>
</p:tab>
<p:tab title="tab2" id="jun" >
<p:commandLink value="click" action="override.xhtml"
>
<p:effect event="click" type="highlight"></p:effect>
</p:commandLink>
<br />
<p:commandLink value="next" action="header.xhtml"></p:commandLink>
<br />
<p:commandLink value="previous"></p:commandLink>
</p:tab>
<p:tab title="tab3">
<h:commandLink value="click"></h:commandLink>
<br />
<h:commandLink value="next"></h:commandLink>
<br />
<h:commandLink value="previous"></h:commandLink>
</p:tab>
</p:accordionPanel>
</h:from>
Thanks in Advance
This usually happens when there is no value coming form ManagedBean.
Verify if the #{Bean.store} is generated correctly or not.
Or remove acticeIndex attribute.
I'm using PF 3.5 and JSF Mojarra 2.1.
I have a dialog which I want to use appendToBody=true. This usually results in "unpredictable behavior" though.
Basically what the dialog does is, when I choose an entry (a persn entity) from a datatable, it gives me filled up input boxes which I can edit, thus editing the particular entry (person details).
Sometimes the input boxes get filled up properly with the entries data. Sometimes they dont.
This behavior does not happen with appendToBody=false.
Aside from that I'm pretty sure there are no nested forms.
As you will notice I am trying out a "One page design" with purely ajax navigation.
Main page (index.xhtml)
<h:body>
<pe:layout id="page" fullPage="true">
<!-- North -->
<pe:layoutPane id="north" position="north" minSize="140"
closable="true" resizable="false">
....
</pe:layoutPane>
<!-- West -->
<pe:layoutPane id="west" position="west" minWidth="150" size="180"
style="font-size: 14px !important;" closable="true"
styleClassHeader="menuBar" resizable="false">
<f:facet name="header">Main Menu</f:facet>
<h:form id="form1">
<p:panelMenu id="panelMenu" style="width: 160px !important">
<!-- On menu click update with Ajax centerpanel and msgPanel -->
<p:submenu label="Persons" style="font-size: 10px ">
<p:menuitem value="Person List" update=":centerpanel"
actionListener="#{layout.setAll('formPersonList.xhtml', 'Person List')}"
action="#{person.init()}">
</p:menuitem>
</p:submenu>
.....
</p:panelMenu>
</h:form>
</pe:layoutPane>
<!-- Center -->
<pe:layoutPane id="content" position="center"
style="font-size: 14px !important" styleClassHeader="menuBar">
<h:panelGroup id="centerpanel" layout="block">
<ui:include id="include" src="#{layout.navigation}" />
</h:panelGroup>
</pe:layoutPane>
</pe:layout>
The dialog is in a file formPersonList.xhtml and is outside the form
<ui:composition ....>
<h:form id="mainForm">
<p:contextMenu for="personTable">
<p:menuitem value="View Details"
process="#form" actionListener="#{person.handleSelectedPerson()}"
update=":dlgPersonGrp"
oncomplete="dlgPerson.show();">
</p:menuitem>
</p:contextMenu>
<p:dataTable id="personTable ....>
....person entities
</p:dataTable>
</h:form>
<p:dialog widgetVar="dlgPerson" showEffect="size"
width="1100" appendToBody="true">
<h:panelGroup id="dlgPersonGrp">
<ui:include src="formPerson.xhtml" />
</h:panelGroup>
</p:dialog>
</ui:composition>
Finally, the form with the input boxes: formPerson.xhtml
<ui:composition ....>
<h:form id ="subForm">
....Input boxes that are supposed to be filled up from a backing bean
and then resubmitted to edit the chosen entry
</h:form>
</ui:composition>
I have tried to dumb it down as much as possible. Let me know if you need more detail.
I know this is a old question, but I was having the same problem with Primefaces 5.
The solution was simple, I've included the attribute appendTo="#(body)" in tag.
<p:dialog header="Title" widgetVar="dlg" modal="true" appendTo="#(body)">
<h:outputText value="Dialog text..." />
<p:commandButton value="Ok" onclick="PF('dlg').close()" />
</p:dialog>
Perhaps the answer is not to use appendToBody. Do you really need it?
One of the common reasons for using appendToBody is to avoid error resulting from putting modal dialogs inside layouts. This workaround, as you've already noted, results in "unpredictable behaviour".
The better way would be just to place the dialog outside the layout.
For more details please see:
http://forum.primefaces.org/viewtopic.php?f=3&t=6154
http://forum.primefaces.org/viewtopic.php?f=3&t=16504
I'lve already searched, but even implementing the solutions I've found, I was not able to get this working. I select a row in a datatable and click on delete button to delete the selected object, but the object gets deleted but the datatable is not updated. Here's my code:
<h:form id="formPesquisa">
...
<h:panelGroup id="panelToRender" layout="block">
<h:panelGroup id="panelDataTable" rendered="#{not empty bean.dataList}" layout="block">
<div id="dataTableRegion">
<p:panel id="panelBtnsUp" styleClass="cleanPanel">
<ui:include src="/templates/btnDataList.xhtml" />
</p:panel>
<h:panelGroup id="panelTableHolder" layout="block">
<p:dataTable id="dataTableBusca" value="#{bean.dataList}" var="entidade"
rendered="#{not empty bean.dataList}" paginator="true" style="width:100%;"
selection="#{bean.entidadesSelecionadas}" onRowSelectUpdate="panelBtnsUp,panelBtnsDown,dataTableBusca"
onRowUnselectUpdate="panelBtnsUp,panelBtnsDown,dataTableBusca" rowUnselectListener="#{bean.rowUnselectListener}" selectionMode="multiple">
<p:column>
<p:graphicImage url="/icons/checkbox_no.png" rendered="#{!bean.containsSelection(entidade)}" />
<p:graphicImage url="/icons/checkbox_yes.png" rendered="#{bean.containsSelection(entidade)}" />
</p:column>
<ui:insert name="colunasPesquisa" />
</p:dataTable>
</h:panelGroup>
<p:panel id="panelBtnsDown" styleClass="cleanPanel">
<ui:include src="/templates/btnDataList.xhtml" />
</p:panel>
</div>
</h:panelGroup>
</h:panelGroup>
....
</h:form>
And the Delete Button is in the included file:
<div style="margin:5px 0;">
<p:commandButton value="#{msg['commons.excluir']}" image="delete" disabled="#{bean.disableDelete()}" action="#{bean.delete}" update="panelDataTable" />
<p:commandButton value="#{msg['commons.editar']}" image="edit" disabled="#{bean.disableEdit()}" action="#{bean.prepareEdit}" ajax="false" />
</div>
I already tried:
update="dataTableBusca"
update="panelTableHolder"
update="formPesquisa:dataTableBusca"
update="formPesquisa:panelTableHolder"
What am I doing wrong???
Thanks for any help.
The first two approaches will only work if your button and the updated elements are siblings.
For the third and the fourth approach you have to traverse all containing elements in order to get the right id. You panelTableHolder is inside two other h:panelGroup (panelToRender, panelDataTable) and a div (dataTableRegion).
Furthermore to make sure that you start from highest level, prepend a : before the form id.
Try this:
update=":formPesquisa:panelToRender:panelDataTable:dataTableRegion:panelTableHolder"
You could check in the rendered html if this is the correct path for your panelTableHolder.