Dynamic Primefaces:tabView doesn't update - jsf

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.

Related

Update form after closing dialog

I am new to JSF, checking related questions did not give me right answer.
I have 2 xhtml files. I specially delete all of items, like style, rendered, beans, etc. All the values displays good, but i cant make it update after pressing button.
1st of them named for example Description is a form with 3 tabs, each of them is a dataTable. Structure is a
<p:tabView id="tabs">
<p:tab id="first">
<h:form id="one">
<p:dataTable id="firstTable/>
</h:form>
</p:tab>
<p:tab id="second">
<h:form id="two">
<p:dataTable id="secondTable/>
</h:form>
</p:tab>
<p:tab id="third">
<h:form id="three">
<p:dataTable id="thirdTable/>
</h:form>
</p:tab>
2nd is a dialog, opened by some button in other component, here i can edit some inputs, and with commandButton "Save"
<h:form id="dialog">
<p:dataTable id="one">
<p:column headerText="FirstColumn">
<p:inputText onfocus="this.select()" id="newInput"
value="#{data['rmp']}"/>
</p:column>
</p:dataTable>
<p:commandButton id="save"
actionListener="#{dialogView.submit}"/>
</h:form>
After pressing "save" button i want my 2nd tab in first xhtml to update and display new value. It is only updates after i refresh the page manually.
I tried to add update="#([id$=':tabs:second'])" but it doesn't work right.
Please help me

Check page for modifications if the user browses away from page

I've have a primefaces web application, which consists of several tabs in which the user can enter and edit some data. If a user edits data and want to save this, he presses a save button and the data will be persisted to an database. If he want's to revert his entries he simply press the reset button.
Each tab is a own included .xhtml page.
Now we want to check, if the user navigates away with the menu or press the reset button, if there were made some changes and ask him if he really want to browse away without saving.
Do you have any suggestions?
Here the page of the tabs:
<p:tabView id="tabView"
activeIndex="#{management.activeTabIndex}"
rendered="#{management.dataFetched}"
styleClass="tab-view">
<p:ajax event="tabChange" update=":tabForm" />
<p:tab id="firstTab" title="First">
<p:panel id="firstPanel" styleClass="info-panel">
<ui:include src="/home/test/infoHost.xhtml" />
</p:panel>
</p:tab>
<p:tab id="secondTab" title="Second">
<p:panel id="secondPanel" styleClass="info-panel">
<ui:include src="/home/test/infoDb.xhtml" />
</p:panel>
</p:tab>
<p:tab id="thirdTab" title="Third">
<p:panel id="thirdPanel" styleClass="info-panel">
<ui:include src="/home/test/infoSt.xhtml" />
</p:panel>
</p:tab>
</p:panel>
</p:tab>
</p:tabView>
</h:form>
Many thanks in advance!
I would write jQuery function when tab is clicked and bind it to tabs. In this function I would get the content of data, create <p:remoteCommand> which invoke backing bean function. As a parameter I would pass data from jQuery function and in backing bean compare it with the value of field storing data. If these things differ call a dialog from backing bean "Are you sure...".
http://www.primefaces.org/showcase/ui/overlay/confirmDialog.xhtml
http://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml

JSF: Dynamic include page into primefaces dialog

I want to include the content of a primefaces dialog from another page with ui:include. The included page must be set dynamic depending on which button user clicked. I used the very helpful answer from BalusC from JSF dynamic include using Ajax request.
It works very fine as in the example. But problems come if I use a p:dialog instead of h:panelGroup:
<h:form>
<f:ajax render=":dialog">
<p:commandButton value="page1" action="#{productBean.setDialogPage('/page1.xhtml')}" oncomplete="dialogWidget.show()"></p:commandButton>
<p:commandButton value="page2" action="#{productBean.setDialogPage('/page2.xhtml')}" oncomplete="dialogWidget.show()"></p:commandButton>
</f:ajax>
</h:form>
<p:dialog id="dialog" widgetVar="dialogWidget" >
<ui:include src="#{productBean.dialogPage}" />
</p:dialog>
1st problem: Sometimes, I have to click a button several times before dialog appears. It seems not to follow any pattern but is a random effect. Sometimes I need to click twice, sometimes I need to click four times on the button.
2nd problem: Sometimes, the dialog appears not with the selected page but with the old one. When I close dialog and select again, the current page is loaded. It seems to be a random effect, too.
Why do I get this problems with dialog?
hy,
i don't know why you are using this mode to display dynamique dialog,
for me, i like use this mode:
<h:form>
<p:commandButton value="page1"
actionListener="#{productBean.setDialogPage('page1')}" oncomplete="PF('dialogWidget').show()" update="dialog"/>
<p:commandButton value="page2"
actionListener="#{productBean.setDialogPage('page2')}" oncomplete="PF('dialogWidget').show()" update="dialog"/>
</h:form>
<p:dialog id="dialog" widgetVar="dialogWidget">
<ui:include src="/#{productBean.dialogPage}.xhtml" />
</p:dialog>
and:
page1.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:form>
<!-- your code -->
</h:form>
</ui:composition>
it's working fine :)
If you reverse engineer existing tables with Netbeans 8 (generate entities + generate jsf pages), it will do something very similar out of the box; on the list page there is a create-button, which shows a dialog included from another page. You should try it, be sure to select "primefaces" in the last page in the guide for generating jsf pages. They do it like this:
List.xhtml:
<p:commandButton id="createButton" icon="ui-icon-plus" value="#{bundle.Create}" actionListener="#{kornstoranalyseStdController.prepareCreate}" update=":KornstoranalyseStdCreateForm" oncomplete="PF('KornstoranalyseStdCreateDialog').show()" />
Create.xhtml is included with <ui:include src="Create.xhtml"/> below </h:form> in the list-page.
Create.xhtml starts with:
<ui:composition>
<p:dialog id="KornstoranalyseStdCreateDlg" width="500px" widgetVar="KornstoranalyseStdCreateDialog" modal="true" resizable="true" showEffect="clip" appendTo="#(body)" header="#{bundle.CreateKornstoranalyseStdTitle}" hideEffect="clip" position="top">
<h:form id="KornstoranalyseStdCreateForm">
Hopefully you can tweak to suit your needs.

Primefaces Reload an XHTML Page On Tab Change

I am using a Primefaces Accordion component. Each tab displays a xhtml page containing a DataTable.
I need to be able to refresh the page when the user selects the tab so that they can see changes to the Favorites list or the Contacts list. Each list page has its own Managed Bean.
I am very new to JSF and PrimeFaces. Would appreciate any help :)
<p:accordionPanel widgetVar="accordion">
<p:tab title="My Favorites" id="myFavorites">
<ui:insert name="favorites" >
<ui:include src="/xhtml/favoritesList.xhtml" />
</ui:insert>
</p:tab>
<p:tab title="My Contacts" id="myContacts">
<ui:insert name="contacts" >
<ui:include src="/xhtml/contactsList.xhtml" />
</ui:insert>
</p:tab>
</p:accordionPanel>
Replace your first line by the following code which satisfies your requirement (uncached lazy loading).
<p:accordionPanel widgetVar="accordion" dynamic="true" cache="false">

Execute listener corresponding to selected tab in p:tabview on tabChange event

I need to fetch corresponding data into bean whenever some certain tab is selected from the tabview. For this I have been trying to use f:event with preRenderComponent but that doesnt help with desired.
How can I execute listener corresponding to the tab whenever a certain tab is selected in tabview.
<p:tabView dynamic="true" cache="false">
<p:tab title="People I'm following" >
<f:event type="preRenderComponent" listener="#{listRetriever.retrieveFollowies()}"/>
<ui:repeat value="#{listRetriever.list}" var="person">
#{person}<br/>
</ui:repeat>
</p:tab>
<p:tab title="People following me" >
<f:event type="preRenderComponent" listener="#{listRetriever.retrieveFollowers()}"/>
<ui:repeat value="#{listRetriever.list}" var="person">
#{person}<br/>
</ui:repeat>
</p:tab>
</p:tabView>
TabChangeEvent passes you the selected tab instance, live sample;
http://www.primefaces.org/showcase-labs/ui/tabviewChangeListener.jsf

Resources