We Keep Coding

Floating p:calendar when scrolling

I am using PrimeFaces 5.0.5 with GlassFish server 3.1.2.2.
I added <p:calendar> inside a <ui:fragment> which is then included in another XHTML page.
When I open the select menu and scroll with the mouse wheel, the panel will float with the page.
I've already checked this question with a similar issue but not on the same component.
The same trick doesnt work for calendar. I've tried appending it to components around but none of them works.
Any feedback and comment are appreciated.
Many thanks.
<h:panelGrid columns="2" id="..." style="margin: 0px 0px 30px 15px;">
<h:outputText value="#{msg['startDate']}:"/>
<p:calendar
pattern="dd-MM-yyyy"
converterMessage="#{msg['ocs.invalidStartDateFormat']}"
value="#{cc.attrs.inputObject.usageHistoryStartDate}"
disabled="#{cc.attrs.inputObject.usageHistoryBillingPeriodOption != 'CUSTOM_DATE_RANGE'}"
showOn="button">
</p:calendar>
<h:outputText value="#{msg['endDate']}:" />
<p:calendar
pattern="dd-MM-yyyy"
converterMessage="#{msg['invalidEndDateFormat']}"
value="#{...}"
disabled="#{...}"
showOn="button">
</p:calendar>
</h:panelGrid>

Not sure if this would help you, but my workaround is to add a scroll event on the dialog or whatever container component you have. In the scroll event, you look for the datepicker element and hide it. Here is a snippet:
$(document).ready(function() {
var dialog1 = $('.ui-dialog .ui-dialog-content');
dialog1.scroll(function() {
$('#ui-datepicker-div').hide();
});
});

JSF Panels positioning

I am able to set my panel's position then update it however I have trouble when getting its current position.
For example:
Currently, my panel is positioned at (50, 50).
<h:form id="testForm">
<p:panel id="pane" style="position: absolute; left:50px; top:50px;">
<p:panelGrid columns=4>
<p:outputPanel id="ASlot3" styleClass="slot"/>
<p:outputPanel id="ASlot4" styleClass="slot"/>
<p:outputPanel id="ASlot5" styleClass="slot"/>
<p:outputPanel id="ASlot6" styleClass="slot"/>
</p:panelGrid>
</p:panel>
<p:draggable id="drg" for="pane"/>
<p:commandButton id="press" action="#{sbean.press}"/>
</h:form>
I update its position via dragging the panel. After dragging it, I press a button holding this method printing the contents of "style".
//press() method
UIViewRoot viewRoot = FacesContext.getCurrentInstance().getViewRoot();
UIComponent component = viewRoot.findComponent("testForm").findComponent("pane");
Panel p = (Panel) component;
System.out.println(p.getAttributes().get("style"));
The "style" does not update after dragging the panel and pressing the button.
So how can I get my panel's current position after dragging?
EDIT: BTW, the scope I'm using is #ViewScoped

By default the PrimeFaces commandButton component operates with Ajax functionality, meaning that for the form submit to process the component with id pane you would need to declare that in the process attribute.
<p:commandButton id="press" action="#{sbean.press}" process="#this pane"
update="#this pane" />
The other option is to simply process and update the whole form.
<p:commandButton id="press" action="#{sbean.press}" process="#form"
update="#form" />
Or you can simply set Ajax functionality to Off and it will operate like a typical form submit control.
<p:commandButton id="press" action="#{sbean.press}" ajax="false" />
EDIT: I see though that the Primefaces draggable does not update the absolute position of the component to the server's View State. This is unfortunate but it can be worked around using hiddenInputs and a Javascript.
<script type="text/javascript">
function updatePanelPosition() {
var panel = jQuery('#testForm\\:pane');
var hiddenLeftInput = jQuery('#testForm\\:hiddenLeft');
var hiddenTopInput = jQuery('#testForm\\:hiddenTop');
var left = panel.css('left');
var top = panel.css('top');
hiddenLeftInput.val(left);
hiddenTopInput.val(top);
}
</script>
<h:inputHidden id="hiddenLeft" value="#{viewScopedBean.leftProperty}" />
<h:inputHidden id="hiddenTop" value="#{viewScopedBean.topProperty}" />
<p:commandButton id="press" action="#{sbean.press}" process="#form"
update="#form" onstart="updatePanelPosition()" />
The two hidden input components will get updated with the current left and top property of pane just before the submit, and then those values will get updated to managed bean properties where you will be able to fetch the values.
I know it seems messy but in the end this is really what the managed bean is good for, acting like a view controller and containing presentation logic.

Modal ConfirmDialog over modal Dialog -> everything is blocked

I have a modal ConfirmDialog that is shown over a modal Dialog using PrimeFaces 3.0.1.
If the ConfirmDialog is opend, the whole page becomes locked, inclusive the ConfirmDialog itself... rien ne va plus
I found a Bugreport for Primefaces that sounds similar http://code.google.com/p/primefaces/issues/detail?id=576 but since the bug is related to a Layout-Component this does not really apply in my case.
Is there a workaround or something?
Thanks!!!

use the appendToBody="true" attribute of the p:dialog tag to resolve this.
From PrimeFaces 5 on the attribute has changed. If you are using 5+ use appendTo="#(body)" instead, see the migration guide: migration guide
(It would have been helpful to know your Primefaces version)

Use appendTo="#(body)" in the tag it works for me

Since I need a submit-button in the Dialog I unfortunatly had to search for a different solution then appendToBody="true". For everybody who faces the same problem, here comes the solution:
If you want to to the following:
<p:dialog modal="true">
<h:form>
...
<p:confirmDialog>
<p:commandButton action="#{transportBean.execute}" type="submit" .../>
</p:confirmDialog>
...
</h:form>
</p:dialog
This will lead into a completly blocked page. Pull the Form Element two elements higher and it will work:
<h:form>
<p:dialog modal="true">
...
<p:confirmDialog>
<p:commandButton action="#{transportBean.execute}" type="submit" .../>
</p:confirmDialog>
...
</p:dialog
</h:form>

How to center a ice:confirmationPanel within a modal ice:panelPopup (ICEfaces)?

If a (modal) ice:confirmationPanel within a modal ice:panelPopup is used, the confirmationPanel will not be centered; instead it seems to be centered relative to the panelPopups upper left edge.
This seems to be caused by the inline style of the panelPopup. It says position: absolute. Because it is rendered as inline style, I don't know how to change it to position: fixed which seems to solve the problem.
Additional information:
In my case it would be no solution to put the confirmation panel outside the panelPopup, because the confirmationPanel is part of a Facelets-Component (ui:composition). Whenever this component is used inside a panelPopup, this problem arises.
Any solution proposals?

Just place the panelConfirmation outside the panelPopup. This way the confirmation panel will be centered, and it will be over the popup panel.
<ice:panelPopup autoCentre="true" modal="true" draggable="true">
<f:facet name="header">
<ice:panelGroup>
<ice:outputText value="Edit" />
</ice:panelGroup>
</f:facet>
<f:facet name="body">
<ice:panelGroup>
<ice:commandLink value="Edit" panelConfirmation="editConfirm" actionListener="#{editor.edit}"/>
</ice:panelGroup>
</f:facet>
</ice:panelPopup>
<ice:panelConfirmation id="editConfirm" />

I ended up creating my own popup component, which uses position: fixed divs instead of iframes - works perfect!

JSF + Primefaces: Problem with "rendered" components with ajax

EDIT
Cant seem to get rendered to work correctly with update attributes. Here is my codes
<ui:define name="left">
<h:form>
<p:commandLink value="Hey"
actionListener="#{bean.setRenderComment}"
update="comment"/>
</h:form>
</ui:define>
<ui:define name="right">
<h:panelGroup id="comment" rendered="#{bean.renderComment}">
hello
</h:panelGroup>
</ui:define>
renderComment is a boolean attributes inside bean. setRenderComment basically toggle the state of renderComment like this
this.renderComment = !this.renderComment;
Right, every time I click on the link Hey, I need to refresh to either render hello on or off. How can I fix it, so that I dont need to refresh

I am not using Primefaces but Richfaces on my projects. So I am not really aware on how the refresh process is done by Primefaces. However, I have an idea that can be tested easily.
Your problem may be due to the fact that the component to re-render (i.e. update) is not found on the HTML page. If your rendered attribute is equals to false, then the <SPAN> with comment id is not integrated in the HTML page generated. Thus, when the Ajax request is received on the client side, the Ajax engine is not able to refresh this <SPAN> as it is not found.
So what you can do is to always render your panelGroup and move your rendered attribute to a nested <h:outputText> that contains the Hello message.
Here is what I am suggesting:
<h:panelGroup id="comment">
<h:outputText value="Hello" rendered="#{bean.renderComment}"/>
</h:panelGroup>
This way, the panelGroup will always be refreshed after the Ajax call, and it will contain the Hello message or not, regarding the value of the renderComment attribute of your bean.

Since the component with the ID comment isn't one of the form's (an UINamingContainer component) children, you need to prefix the ID with : to instruct JSF to scan from the "upper level".
This should do:
<p:commandLink value="Hey"
actionListener="#{bean.setRenderComment}"
update=":comment" />