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();
});
});
Related
I have a primefaces datatable with cell editing which is toggled on a boolean variable in the view.
I have three issues:
In edit mode, I change a value and I click the save button on the page it doesn't keep the new value, If I click anywhere else first on the page then click save it will keep the value. I need it to keep the value if you click save first.
If I edit a cell which is an input text and I click out the field now is a output text until I click in there again. I want the field to look like a input text while in edit mode.
When the save button is clicked the backing method sets the editable boolean to false, and the rest of the page obeys, and the dataTable looks like it obeyed but if you click a cell it will let you edit it.
Here is the code:
<p:dataTable value="#{view.LineItems}" var="lineItem" rowKey="#{lineItem.lineItemId}"
resizableColumns="false" editable="#{view.editable}" editMode="cell"
editingRow="#{view.editable}" id="requestLineItemsTable">
<p:ajax event="cellEdit" listener="#{view.cellEdited}" immediate="true" update="#this" />
<p:column styleClass="centerColumnData" headerText="Item Name" style="width: 140px;">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{lineItem.title}"/>
</f:facet>
<f:facet name="input">
<h:inputText value="#{lineItem.title}"/>
</f:facet>
</p:cellEditor>
</p:column> ...
and this is the back end (not doing anything with this yet)
public void cellEdited(CellEditEvent event)
{
Object oldValue = event.getOldValue();
}
and here is the save and edit buttons on the same .xhtml page as datatable
<p:commandLink process="#this"
action="#{view.changeModeToEdit}"
update="#form"
rendered="#{!view.editMode">
<h:graphicImage library="images" name="edit20.png" title="#{__Common.edit}"
style="height: 15px; width: 15px;"/>
</p:commandLink>
<components:linkWithSpinner linkStyle="margin-right: 20px;" loadingImageStyle="margin-right: 20px;"
linkStyleClass="activeButton saveButtonRequestDetails" loadingImageStyleClass="saveButtonRequestDetails"
linkText="#{__CommonButton.save}"
process="#form" update="#form"
actionMethod="#{view.updateRequest()}"/>
view.updateRequest() sets the editable to false. I am using Primefaces 4.0
So I figured out a way around these issues. I was focused on using the built in edit table , but you can just have a normal datatable and the columns can contain input text fields. Then you don't have to worry about most of the issues in my question above. If you need to switch between edit and non-edit view then I still don't know how to fully fix it except have two datatables in your file with render tags, but then you are duplicating the table one with input text fields and one with output text fields, and that is not the best way to do it.
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.
When using the <p:dialog> tag (in Prime Faces 3.3.1) with the modal attribute set to true I get strange behaviour. The "dark semi-transparent panel" - which stands between the popup and the page - covers the page size from top to bottom correctly, but when I scroll down the page it is cut.
I think the Prime Faces (or jQuery) is retrieving the size of the window instead the size of the page to calculate the dark semi-transparent panel dimensions.
Any ideas?
This is my code:
<p:dialog draggable="false" id="dialogAddItems" header="Add item" modal="true" resizable="false" widgetVar="widgetDialogAddItems" width="600" height="200">
<h:form>
...
</h:form>
</p:dialog>
I had this problem with primefaces 3.4, setting the attribute appendToBody="true" of <p:dialog> solved the problem. I hope this solves your problem too.
So, I tried appendToBody="true" and placing the tag in many different places on the page. Nothing worked. Tried even updating Prime Faces to lastest version. Didn't work either. So, my solution was a workaround, but it's because I have no other ideas:
.ui-widget-overlay {
position: fixed !important;
top: 0px !important;
}
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>
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!