I want to place 2 primefaces pie charts side by side horizontally. I've put them into a panelGrid like that:
<h:panelGrid columns="2">
<p:pieChart title="chart1" value="#{chartController.modelChart1}" legendPosition="w" showDataLabels="true" id="chartOne" />
<p:pieChart title="chart2" value="#{chartController.modelChart2}" legendPosition="w" showDataLabels="true" id="ChartTwo" />
</h:panelGrid>
But they simply disappeared when I added the panelGrid.
What's the problem or is there another way to place the 2 charts side by side (on the same line) without using the panelGrid??
Try this :
<h:panelGrid columns="2">
<p:panel style="width:100px;">
<p:pieChart title="chart1" value="#{chartController.modelChart1}" legendPosition="w" showDataLabels="true" id="chartOne" />
</p:panel>
<p:panel style="width:100px;">
<p:pieChart title="chart2" value="#{chartController.modelChart2}" legendPosition="w" showDataLabels="true" id="ChartTwo" />
</p:panel>
</h:panelGrid>
Related
Hi I've been stuck for sometime getting a modal form to update, it's loading the data, and it's calling the function - it's just not passing the data back to the server
<h:form id="modal">
<p:dialog widgetVar="modalText" styleClass="modalSceneText" modal="true" dynamic="true" >
<p:panel id="sceneText">
<p:inputTextarea id="sceneName" immediate="true" style="width: 200px" rows="1" counter="labelCount" maxlength="20" counterTemplate="{0} characters remaining." value="#{CustomerDashboardController.selectedScene.title}"/><h:outputText id="labelCount" /><br/>
<p:inputTextarea id="sceneDescription" immediate="true" rows="10" cols="50" value="#{CustomerDashboardController.selectedScene.description}" counter="descriptionCount" maxlength="1000" counterTemplate="{0} characters remaining." autoResize="false" /><br/>
<h:outputText id="descriptionCount" />
</p:panel>
<p:ajax event="close" process="#form" immediate="true" update=":form:locationScenes" listener="#{CustomerDashboardController.saveSelectedScene()}" />
</p:dialog>
</h:form>
I've tried it inside and outside the form, I've tried everything I can think off..
The sceneName & sceneDescription are loading the correct data, they're just not saving any changes when the modal/dialog is closed. saveSelectedScene() is being called fine.
EDIT
I can get it to save with a
<p:commandLink value="save" action="#{CustomerDashboardController.saveSelectedScene()}"/>
Which isn't very pretty. Seems the problem is trying to save on the close event.
Your problem here is that the saveSelectedScene() method which is called from the listener in the ajax component is using the old values of the inputTextarea's.
As a workaround you can use a remoteCommand component and call that on your close event instead:
<h:form id="modal">
<p:remoteCommand name="rc" update=":form:locationScenes" actionListener="#{CustomerDashboardController.saveSelectedScene()}" />
<p:dialog widgetVar="modalText" styleClass="modalSceneText" modal="true" dynamic="true" >
<p:panel id="sceneText">
<p:inputTextarea id="sceneName" immediate="true" style="width: 200px" rows="1" counter="labelCount" maxlength="20" counterTemplate="{0} characters remaining." value="#{CustomerDashboardController.selectedScene.title}"/><h:outputText id="labelCount" /><br/>
<p:inputTextarea id="sceneDescription" immediate="true" rows="10" cols="50" value="#{CustomerDashboardController.selectedScene.description}" counter="descriptionCount" maxlength="1000" counterTemplate="{0} characters remaining." autoResize="false" /><br/>
<h:outputText id="descriptionCount" />
</p:panel>
<p:ajax event="close" process="#form" immediate="true" oncomplete="rc()" />
</p:dialog>
</h:form>
Also consider if the immediate="true" are really necessary in your code
Have you tried removing immediate="true" from both input elements and p:ajax tag? It seems to me that you don't need it - especially not on p:ajax tag.
Hope this helps!
I've got a JSF page with <rich:tabPanel> which contains 4 tabs.
On the 4th tab I'm trying to use <a4j:commandButton> to execute the action and render resulTable.
Here is the shorten example
<rich:tab header="Journal">
<h:form id="filterForm">
<a4j:jsFunction name="submitByEnter"
action="#{smsLogList.refresh}" render="smsTable" />
<s:div id="divSearch">
<rich:collapsiblePanel header="#{messages['search']}"
switchType="client">
<h:panelGrid column="1">
<s:decorate template="/layout/edit.xhtml">
<ui:define name="label">Package number</ui:define>
<h:inputText id="packNum" style="width:200px"
value="#{smsLogList.packNum}">
<a4j:ajax event="keyup" listener="#{smsLogList.refresh}"
ignoreDupResponses="true" requestDelay="1500"
render="smsTable" />
</h:inputText>
</s:decorate>
<!---some other search elements-->
<s:div styleClass="actionButtons">
<a4j:commandButton id="search" value="#{messages['search']}"
render="smsTable" action="#{smsLogList.go}" />
<a4j:commandButton id="reset" value="#{messages['clear']}"
onclick="document.getElementById('filterForm').reset();"
action="#{smsLogList.clear}" render="divSearch,smsTable" />
</s:div>
</h:panelGrid>
</rich:collapsiblePanel>
</s:div>
<!--- results table-->
<h:panelGrid id="smsTable">
<s:div>
<rich:dataTable value="#{smsLogList.resultList}" var="sms"
id="table" rendered="#{not empty smsLogList.resultList}">
<rich:column>
<f:facet name="header">Type</f:facet>
<h:outputText value="#{sms.smsType}" />
</rich:column>
<!---- some other columns-->
</rich:dataTable>
<rich:dataScroller for="table" />
</s:div>
</h:panelGrid>
</h:form>
</rich:tab>
So, when I'm clicking on the <a4j:commandButton> - nothing happens, but if I'm switching to the other tab and back - the result is as necessary.
I tried to change a4j to <h:commandButton>, but after it's pressed the page switches to the first tab.
Is any solution how to work this out?
The solution is quite simple.
I used <h:form> inside other <h:form>. It will not work anyway. When I remove internal - the jsf works smooth and as it should.
I have a p:dialog. My intention is to create a list using p:datagrid and when user clicks an item this dialog will open and show its details. Please consider the example of p:datagrid in the showcase. However, currently it works fine in IE but not in Chrome. If I define "modal=true" then the browser turns black but the dialog doesn't show up.
<p:commandButton update=":form:sharePanel" value="Share" style="font-size: 10px" oncomplete="PF('dlg').show()" rendered="false">
<f:setPropertyActionListener target="#{shareController.current}" value="#{status}" />
</p:commandButton>
<p:dialog widgetVar="dlg" resizable="false" id="sharePanel" styleClass="no-border" modal="true">
<h:outputText value="#{shareController.current.url.url}" />
<h:panelGrid columns="3">
<p:dataGrid value="#{shareController.current.url.NLinkList}" var="nshare" columns="1" rendered="#{shareController.current.url.NLinkList.size() > 0}">
<h:panelGroup styleClass="tag noun">
<h:outputText value="#{nshare.noun}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.VLinkList}" var="vshare" columns="1" rendered="#{shareController.current.url.VLinkList.size() > 0}">
<h:panelGroup styleClass="tag verb">
<h:outputText value="#{vshare.verb}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.PLinkList}" var="pshare" columns="1" rendered="#{shareController.current.url.PLinkList.size() > 0}">
<h:panelGroup styleClass="tag prep">
<h:outputText value="#{pshare.prep}" />
</h:panelGroup>
</p:dataGrid>
</h:panelGrid>
</p:dialog>
What is wrong here?
If you are using Primefaces versions before 4.0 use dlg.show() instead of PF('dlg').show().
And try appending the dialog in body using attribute appendToBody="true", because if the Facelet is more complex and if you are using Layouts the dialog won't fire ind some browsers only model will appear.
<p:dialog appendToBody="true" >
I'v a Carousel with the possiblity to update pictures (stored in db) and to view them in a bigger size. That works fine. But now, i would like to remove them. And that works almost. Almost means, the picture is deleted but the carousel is not correctly refreshed. Here is my code:
<p:tab title="#{vms_uimsgs['vehicle.tab.images']}">
<h:form id="pictures" enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{vmsVehicleActionBean.handleFileUpload}" mode="advanced" update="vehiclePictureCarousel" sizeLimit="10000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:carousel id="vehiclePictureCarousel" var="imageId" value="#{vmsVehicleActionBean.imageIds}" itemStyleClass="vehiclePictureItem" effect="fade">
<f:facet name="header" value="#{vms_uimsgs['vehicle.tab.images']}"/>
<p:panelGrid columns="1" style="width:100%" cellpadding="5">
<p:graphicImage value="#{graphicImageStore.streamedImageById}" rendered="#{graphicImageStore.hasImage(imageId)}">
<f:param name="id" id="id" value="#{imageId}" />
</p:graphicImage>
<p:commandLink id="deleteImage" update="vehiclePictureCarousel" oncomplete="#{vmsVehicleActionBean.deleteImage()}" title="Delete Picture">
<h:outputText styleClass="ui-icon ui-icon-close" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{imageId}" target="#{vmsVehicleActionBean.selectedImageId}" />
</p:commandLink>
</p:panelGrid>
</p:carousel>
</h:form>
</p:tab>
Or asked differently, why is my carousel correctly refreshed when i add a picture with my file uploader and not when i remove one with a commandlink inside the carousel?
Of course, when a reload the whole page, everything is correct. But I don't want that.
The problem come from oncomplete="#{vmsVehicleActionBean.deleteImage()}", oncomplete is an attribute to call javascript method when ajax have completed, so you should use:
facelet:
actionListener="#{vmsVehicleActionBean.deleteImage(imageId)}"
bean:
public void deleteImage(String imageId){
//delete here
}
I'lve already searched, but even implementing the solutions I've found, I was not able to get this working. I select a row in a datatable and click on delete button to delete the selected object, but the object gets deleted but the datatable is not updated. Here's my code:
<h:form id="formPesquisa">
...
<h:panelGroup id="panelToRender" layout="block">
<h:panelGroup id="panelDataTable" rendered="#{not empty bean.dataList}" layout="block">
<div id="dataTableRegion">
<p:panel id="panelBtnsUp" styleClass="cleanPanel">
<ui:include src="/templates/btnDataList.xhtml" />
</p:panel>
<h:panelGroup id="panelTableHolder" layout="block">
<p:dataTable id="dataTableBusca" value="#{bean.dataList}" var="entidade"
rendered="#{not empty bean.dataList}" paginator="true" style="width:100%;"
selection="#{bean.entidadesSelecionadas}" onRowSelectUpdate="panelBtnsUp,panelBtnsDown,dataTableBusca"
onRowUnselectUpdate="panelBtnsUp,panelBtnsDown,dataTableBusca" rowUnselectListener="#{bean.rowUnselectListener}" selectionMode="multiple">
<p:column>
<p:graphicImage url="/icons/checkbox_no.png" rendered="#{!bean.containsSelection(entidade)}" />
<p:graphicImage url="/icons/checkbox_yes.png" rendered="#{bean.containsSelection(entidade)}" />
</p:column>
<ui:insert name="colunasPesquisa" />
</p:dataTable>
</h:panelGroup>
<p:panel id="panelBtnsDown" styleClass="cleanPanel">
<ui:include src="/templates/btnDataList.xhtml" />
</p:panel>
</div>
</h:panelGroup>
</h:panelGroup>
....
</h:form>
And the Delete Button is in the included file:
<div style="margin:5px 0;">
<p:commandButton value="#{msg['commons.excluir']}" image="delete" disabled="#{bean.disableDelete()}" action="#{bean.delete}" update="panelDataTable" />
<p:commandButton value="#{msg['commons.editar']}" image="edit" disabled="#{bean.disableEdit()}" action="#{bean.prepareEdit}" ajax="false" />
</div>
I already tried:
update="dataTableBusca"
update="panelTableHolder"
update="formPesquisa:dataTableBusca"
update="formPesquisa:panelTableHolder"
What am I doing wrong???
Thanks for any help.
The first two approaches will only work if your button and the updated elements are siblings.
For the third and the fourth approach you have to traverse all containing elements in order to get the right id. You panelTableHolder is inside two other h:panelGroup (panelToRender, panelDataTable) and a div (dataTableRegion).
Furthermore to make sure that you start from highest level, prepend a : before the form id.
Try this:
update=":formPesquisa:panelToRender:panelDataTable:dataTableRegion:panelTableHolder"
You could check in the rendered html if this is the correct path for your panelTableHolder.