Keep primefaces tooltip visible until its manually closed - jsf

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

Related

p:overlayPanel does not render sub-component properly

I have curious rendering problem. I'm trying to attach overlay panel with the button. When I press the button, panel is rendered. However a sub-component in the panel is not. When panel is visible and I do double click on the button, sub-component get's rendered. In the same time, when panel is not rendered and I do double click, sub-component is not rendered (and panel not displayed).
Generated html and computed CSS is the same for both painted/non-painted components.
Do you know where the problem can be? Am I missing some setting? Have I overlooked something or is it a bug?
PrimeFaces template:
<p:layoutUnit position="center">
<h:form>
<p:commandButton id="chooseLangBtn" value="Btn" type="button" />
<p:overlayPanel id="langPanel" for="chooseLangBtn" showCloseIcon="true" dismissable="true">
<p:selectOneListbox id="langSelect"
rendered="true"
value="#{selectOneLanguageView.language}"
converter="languageConverter"
var="t" filter="true"
filterMatchMode="startsWith">
<f:selectItems value="#{languageService.languages}"
var="lang"
itemLabel="#{lang.name}"
itemValue="#{lang}" />
<p:column>
<h:graphicImage width="22px" alt="#{lang.name}" library="main" name="images/flags/var/#{t.code}.svg"/>
</p:column>
<p:column>
<h:outputText value="#{t.name}" />
</p:column>
</p:selectOneListbox>
</p:overlayPanel>
</h:form>
Empty/Rendered images:
It's a bug in the Omega theme. See current status here: https://github.com/primefaces/themes/issues/10

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>

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

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?

Primefaces CommandLink target blank not work properly

I'm trying to open a new window from dataTable using primefaces. I've tried differents options:
h:commandLink
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<h:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</h:commandLink>
</p:column>
</p:dataTable>
</h:form>
2.p:commandLInk
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<p:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'"
process="#this" ajax="false" target="_blank">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
It works, but not correctly. I mean, I get the new page open, but the original page becomes useless, all methods in this pages are not invoked when you clicked on them.
Has anyone experimented this before? Any idea to solve this?
I tried and I still couldn't get a 'commandLink' to open in a new window while at the same time using 'setPropertyActionListener'. I think you have to modify the underlying Primefaces javascript to open in a new window (I didn't try that).
You can try passing a parameter argument.

primefaces datatable selection issue

I have some weird issue with datatable selection (most likely i'm doing something wrong).
Idea is simple - datatable with selection and a dialog to edit the records. The problem is that if i use <h:inputText> tag (or <p:inputText>) it appears to be blank, though the object in the backing bean (indicatorBean.indicator.code) contains data. Interestingly if i put <h:outputText> instead of input the data is shown.
here are contents of my body
<!-- language: xml -->
<h:body>
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:dataTable id="indicatorsTable" var="ind"
value="#{indicatorBean.indicators}"
selectionMode="single"
selection="#{indicatorBean.indicator}"
rowKey="#{ind.id}">
<p:column headerText="Name" style="width:125px">
#{ind.name}
</p:column>
<p:column headerText="Code" style="width:125px">
#{ind.code}
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View"
icon="ui-icon-search" update=":form:display"
oncomplete="indDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog id="dialog" header="Indicator Detail"
widgetVar="indDialog" resizable="false"
width="400" showEffect="fade" hideEffect="fade">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Code:"/>
<!-- PROBLEM IS HERE -->
<h:inputText value="#{indicatorBean.indicator.code}"/>
<h:outputText value="Name:"/>
<h:outputText value="#{indicatorBean.indicator.name}"/>
</h:panelGrid>
<p:commandButton value="Save" onclick="indDialog.hide()"/>
<p:commandButton value="Cancel" onclick="indDialog.hide()"/>
</p:dialog>
</h:form>
</h:body>
Backing bean is nothing other that accessors.
Another thing i spotted is if i replace el expression in <h:inputtext> with a static text (like <h:inputText value="static text"/>), it is shown.
Here are some pictures:
Dialog with inputtext
Dialog with outputtext
Dialog with static text
primefaces 3.4
The problem as you seem to have already figured out is that you are placing the dialog itself inside of a form. This is an issue because of the way the jQuery dialog control works, which is the client side foundation of the Primefaces dialog. Essentially it will move DOM elements associated with the dialog elsewhere, possibly outside of the form that you intend to enclose it.
This problem can be easily solved by putting the dialog outside of the form, and putting a form inside of the dialog body instead.
<p:dialog id="dialogId" ...>
<h:form id="dlgForm">
....
</h:form>
</p:dialog>
In this way when jQuery UI moves the dialog control elsewhere in the DOM, the contents of that DOM, including the form come with it.

Resources