How to update a dynamically generated datatable without touching the rest of the page? - jsf

I have a setup in a view, where I display datatables dynamically. That is happening inside a p:accordion-Element, which is generating the tabs dynamically (and therefore the datatables inside).
The user now has the possibility (well, should have..) to add, edit and remove objects to the datatable and therefore to the object that is represented by the tab.
The add- and edit-functions work via dialogs. After successful adding or editing I want to update the datatable containing the data.
If I update the whole accordion-panel I lose the focus on the current tab which is really bad for the user-experience, especially because the other sub-pages of the project always only update the datatable.
After some googling I found out that I can't generate the IDs of JSF-components dynamically, what would make the whole thing a process of minutes.
I also do not have any index I could use to "cheat" and save in my backing-bean when I open the dialog.
I also found out that I could work-around this issue by using JSTL but this is prohibited due to a limited set of allowed languages.
The current setup looks like this:
<p:accordionPanel id="academicYearAccordionPanel"
value="#{academicYearAndClassController.academicYears}"
var="academicYear" multiple="true" dynamic="true" activeIndex="-1"
style="width:100%;">
<p:tab id="academicYear-#{academicYear.academicYear}" title="Jahrgang - #{academicYear.academicYear}">
<p:outputPanel style="float:right">
<p:commandButton value="Löschen" icon="ui-icon-close"
actionListener="#{academicYearAndClassController.setAcademicYear(academicYear)}"
process="#this"
oncomplete="PF('wConfirmAcademicYearDelete').show();">
</p:commandButton>
</p:outputPanel>
<p:spacer style="height:50px;" />
<p:separator />
<!-- Tabcontent -->
<p:outputPanel>
<p:outputPanel style="float:right">
<p:commandButton value="Hinzufügen" icon="ui-icon-plusthick"
actionListener="#{academicYearAndClassController.setAcademicYear(academicYear)}"
process="#this"
oncomplete="PF('wAddSchoolclassDialog').show();">
</p:commandButton>
</p:outputPanel>
<h:panelGrid columns="2">
<h:outputText
value="Klassen des #{academicYear.academicYear}. Jahrgangs" />
<p:spacer style="height:50px;" />
</h:panelGrid>
<p:dataTable emptyMessage="Keine Klassen vorhanden"
id="schoolclassTable"
var="schoolclass"
selection="#{academicYearAndClassController.schoolclass}"
value="#{academicYearAndClassController.getSchoolclasses(academicYear)}"
selectionMode="single" rowKey="#{schoolclass.name}"
scrollable="true" scrollHeight="500">
<p:column headerText="Name">
<h:outputText value="#{schoolclass.identifier}" />
</p:column>
<p:column headerText="Klassenlehrkraft">
<h:outputText
value="#{schoolclass.teacher.name} (#{schoolclass.teacher.symbol})" />
</p:column>
<p:column headerText="Klassenraum">
<h:outputText
value="#{schoolclass.room.name} (#{schoolclass.room.locationName})" />
</p:column>
</p:dataTable>
</p:outputPanel>
</p:tab>
</p:accordionPanel>
I want to update the element with the ID schoolclassTable. How can I achieve this?

Related

Keep primefaces tooltip visible until its manually closed

I wanted to create a tooltip with dynamic content on a button hover and show a data table inside it. After a little bit of googling i managed to get that working but with a small issue. I am not able to keep the tooltip visible until its manually closed and primesfaces tooltip options do not seem to have any property to achieve something like that.
Code for tooltip:
<h:panelGroup>
<h:outputLink id="lnk" value="#">
<h:outputText value="Sample Tooltip"/>
</h:outputLink>
<p:tooltip for="lnk" position="right" />
<p:dataTable var="car" value="#{preOrderController.cars}">
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.name}" />
</p:column>
</p:dataTable>
</h:panelGroup>
The tooltip works fine, what I want to do is once the mouse is hovered over the button and tooltip is shown, I want to keep it visible until the user manually clicks the close button at the top right corner or somewhere else on the screen. It is not necessary that I use tooltip, if primefaces has something else that can used to get similar functionality I am open to suggestions.
The solution is here
<h:form>
<h:panelGrid>
<h:panelGroup>
<p:commandButton value="Hide" type="button" onclick="PF('tooltip').hide();"/>
</h:panelGroup>
<h:panelGroup>
<p:commandLink id="focus" value="link" onmouseover="PF('tooltip').show()"/>
<p:tooltip value="This is a tooltip" for="focus" hideEvent="blur" widgetVar="tooltip"/>
</h:panelGroup>
</h:panelGrid>
</h:form>
Try this:
<h:form onclick="PF('tooltip').hide()">
<p:commandLink id="focus" value="link" onmouseover="PF('tooltip').show()"/>
<p:tooltip value="This is a tooltip" for="focus" hideEvent="blur" widgetVar="tooltip"/>
</h:form>
Take note that you need to click inside the <h:form> in order to hide the tooltip

How to use BlockUI with treetable

I am working with javaEE, and for my project i used TreeTable and BlockUI to block this table, but i want to make a button appear even if it is blocked
<p:blockUI block=":form:treeTable" widgetVar="tbd" blocked="#{ManagedBean.condition}" />
<h:form id="form">
<p:treeTable id="treeTable" ... >
<f:facet name="header">
<p:commandButton value="SomeAction" actionListener="#{ManagedBean.someAction}" update=":form"/>
</f:facet>
in my example i want to make my commanbutton appear as available even if i use BlockUI
thantk you
This is not a functional problem but a design problem.
As is, the CommandButton is part of the TreeTable, so the CommandButton must be blocked if the TreeTable is blocked.
For sure Raziels answer will work, but a clean solution would be to move the button out of the TreeTable.
<h:form id="form">
<p:commandButton
value="SomeAction"
actionListener="#{ManagedBean.someAction}"
update=":form"
/>
<p:treeTable
id="treeTable"
...
/>
<p:blockUI
block=":form:treeTable"
widgetVar="tbd"
blocked="#{ManagedBean.condition}"
/>
</h:form>
I already Solved this problem by using z-index:99999 inside a style tag
so your code should be like :
<p:blockUI block=":form:treeTable" widgetVar="tbd" blocked="# {ManagedBean.condition}" />
<h:form id="form">
<p:treeTable id="treeTable" ... >
<f:facet name="header">
<p:commandButton value="SomeAction" style="z-index: 99999" actionListener="#{ManagedBean.someAction}" update=":form"/>
</f:facet>

Primefaces Panels don't update collapsed status after a dialog was dismissed

I'm seeing a strange behaviour with Primefaces (4.0) related to Panels whose collapsed-attributes are bound to a property in a backing bean. Updating the state works fine so the panel collapses/expands correctly when the value of the backing bean changes.
The problem is: I have some p:Dialogs that can be opened to enter some additional/optional information. After closing the dialog, the panel fails to expand/collapse when changing the value. Strangely, other attributes bound to the same property get updated like before.
Example:
XHTML of two panels whose collapsed Attribute is bound to a property. Note that the disabled-attribute of the checkboxes are bound to the same property and still get updated after the dialog is closed.
<p:panel id="panel1" style="width:80%;" toggleable="true" collapsed="#{!bean.panel1.enabled}" widgetVar="panel1Var">
<f:facet name="header">
<p:outputLabel value="Panel1"/>
<p:selectBooleanCheckbox id="p1_enabled" style="margin-left:20px;" disabled="#{bean.panel2.enabled}" value="#{bean.panel1.enabled}">
<f:ajax render="panel1 panel2" />
</p:selectBooleanCheckbox>
</f:facet>
<p:panelGrid columns="2" style="width:100%;" columnClasses="input-col1,input-col2">
<!-- omitted -->
</p:panelGrid>
</p:panel>
<p:panel id="panel2" style="width:80%;" toggleable="true" collapsed="#{!bean.panel2.enabled}" widgetVar="panel2Var">
<f:facet name="header">
<p:outputLabel value="Panel2"/>
<p:selectBooleanCheckbox id="p2_enabled" style="margin-left:20px;" disabled="#{bean.panel1.enabled}" value="#{bean.panel2.enabled}">
<f:ajax render="panel1 panel2" />
</p:selectBooleanCheckbox>
</f:facet>
<p:panelGrid columns="2" style="width:100%;" columnClasses="input-col1,input-col2">
<!-- omitted -->
</p:panelGrid>
</p:panel>
XHTML somewhere else on the same page which opens a dialog:
<p:commandLink id="contactbutton" onclick="PF('contactextended').show();">
<h:outputText value="Extended" />
</p:commandLink>
The dialog is configured like this:
<p:dialog widgetVar="contactextended" modal="true" width="600px" height="500px" showEffect="fade" hideEffect="fade" resizable="false" draggable="false">
The backing bean is a straightforward bean with properties and getters/setter which obviously work. Is there a problem in my implementation? Any ideas how to work around this issue?
Thanks in advance!
Fixed this by myself. The solution seems to be to add process="#this"to the commandLink. I am still not sure what the underlying problem is/was, but at least it doesn't get triggered anymore.

p:cellEditor does not save textarea onblur when clicking a link

Saving a text inside a p:cellEditor > p:inputTextarea works perfectly onblur when clicking outside the cell.
However when clicking on a link (e.g. commandButton, commandLink) coming from a p:cellEditor > p:inputTextarea it does not execute the p:ajax cellEdit event beforehand. It instead executes the clicked link.
This is not correct since it works for p:inputTextarea without a p:cellEditor. I realize this might as well be a Primefaces bug. Any idea how to work around this?
<p:dataTable>
<p:ajax event="cellEdit" listener="#{bean.onCellEdit}" />
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{model.text}" />
</f:facet>
<f:facet name="input">
<p:inputTextarea value="#{model.text}" />
</f:facet>
</p:cellEditor>
<p:dataTable>
<p:commandButton actionListener="#{bean.someOtherAction}" />
I submitted the bug to Primefaces. But is there a workaround for this via javascript/jQuery?
After no success on the Primefaces bug report I ended up hooking up the listener to all of the p:cellEditor instances directly. It seems to work and I'm not losing inputs anymore.
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{model.text}" />
</f:facet>
<f:facet name="input">
<p:inputTextarea value="#{model.text}">
<!-- this is the relevant line -->
<p:ajax listener="#{bean.onCellEdit}" global="false" update="#this" />
<!-- end relevant line -->
</p:inputTextarea>
</f:facet>
</p:cellEditor>
I did quite similar but without <p:cellEditor>. In that mode that did not work for me.
But if you use just
<p:column>
<p:selectBooleanCheckbox value="#{listElement.field1}">
<p:ajax listener="#{bean.saveAction}" global="false" update="#this"/>
</p:selectBooleanCheckbox>
</p:column>
<p:column>
<p:inputTextarea value="#{listElement.field2}">
<p:ajax listener="#{bean.saveAction}" global="false" update="#this"/>
</p:inputTextarea>
</p:column>
</p:dataTable>

JSF/PrimeFaces - Approaches for creating reusable data table dialogs

I am using JSF 2.0 with Primefaces. I have a page with a data table containing a list of users in the system. Each user can have a collection of roles, so i would like to have a button to select a bunch of roles. I wanted this to be an ajax selector and reusable from other pages, so this is how i have laid it out.
User List page
<h:form prependId="false">
<p:dataTable id="userList" var="user" value="#{userBean.users}">
<p:column id="modelHeader">
<f:facet name="header">
Name
</f:facet>
<h:outputText value="#{user.name}" />
</p:column>
<p:column>
<f:facet name="header">
Select Roles
</f:facet>
<p:commandButton id="selectButton" oncomplete="roleDialog.show()" icon="ui-icon-search" title="Select Roles" />
</p:column>
</p:dataTable>
</h:form>
Dialog defined inside user list page, but the contents will be moved to an include to promote reusability
<p:dialog header="Roles" widgetVar="roleDialog" resizable="true" id="roleDialog" modal="true">
<h:form prependId="false">
<h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
<p:dataTable id="roleList" var="user" value="#{roleBean.roles}">
<p:column id="modelHeader">
<f:facet name="header">
Name
</f:facet>
<h:outputText value="#{role.name}" />
</p:column>
<p:commandButton id="selectButton" actionListener="#{roleBean.selectRoles}" title="Select Roles" />
</h:panelGrid>
</h:form>
</p:dialog>
My question is, I am not sure how to achieve the following.
I would like to pass arguments to the role selector as criteria before rendering the content in the dialog.I can do this via f:setPropertyActionListener.. correct?
After the role is selected, i would like to pass the selected id back to the user list page. I can do this via addCallbackParam, correct?
Then i would like to pass that value back into the userList bean to an action listener to associate this role(s) to the user
What is the best pattern to achieve this workflow in JSF. I do not want to duplicate my role selector in each page as i would like to re-use that.
Thank you for your patience in reading through this long post. I appreciate your response and
suggestions.
The best pattern for this would be to implement a composite component.

Resources