i have an issue with nested UI components which is probably a known bug in PrimeFaces and Mojara. However I have no idea how can i solve it.
We have a image gallery with uploader and I want to be able to delete images from the datagrid, so
XHTML:
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{pictureManagementBean.handleFileUpload}"
mode="advanced"
update="gallery messages"
auto="true"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
/>
<p:growl id="messages" showDetail="true"/>
<p:dataGrid var="item" value="#{pictureManagementBean.pictures}" id="gallery">
<p:panel header="#{item.pictureName}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="#{item.thumbnailDir}" />
<h:outputText value="#{item.createdate.toString()}" />
<p:commandLink value="Delete"
action="#{pictureManagementBean.removePicture(item.idpicture)}" ajax="false"/>
</h:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
Basically what is not working at the momment - at all - is the commandLink Delete in the DataGrid. The rest is fine.
Is there any walkaround to this? I've tried: columns, ajax, no ajax... nothing works. All i can do is get the button outside the DataGrid. But that's not really what I want.
Any help apprecieated.
[small thing: surprisingly I have used commandLink in DataTable and Columns with no problem! ]
Primefaces 3.4RC1 from maven. (didnt work on 3.3.1 either)
ok so I've found one thing:
inside <p:dataGrid> if I use anything BUT p:columns its not working.
But then the view is terrible... should I just use CSS to fix it?
#Maple_shaft you are so right!
correct code:
<p:dataGrid var="item" value="#{pictureManagementBean.pictures}" id="gallery">
<p:column>
<p:panel header="#{item.pictureName}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="#{item.thumbnailDir}" />
<h:outputText value="#{item.createdate.toString()}" />
<p:commandLink value="Delete"
action="#{pictureManagementBean.removePicture(item.idpicture)}" ajax="false"/>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>
So just simple column element. I've just places it wrong before. Thanks so much.
Of course backing bean is #ViewScoped!
Related
I tried to use draggable component https://www.primefaces.org/showcase/ui/dnd/draggable.xhtml for inputTextArea component but it does not work for me. Do you know any workarounds for making input components draggable?
My code:
<p:outputPanel>
<p:inputTextarea id="test">
</p:inputTextarea>
</p:outputPanel>
<p:draggable for="test" containment="parent" />
I don't have any errors in console. But drag function does not work as it work for p:panel, for example.
try to wrap the component in a panel and assign "for" to that panel.
<p:outputPanel>
<p:panel id="test">
<p:inputTextarea />
</p:panel>
<p:draggable for="test" containment="parent"/>
</p:outputPanel>
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>
Sorry im just a beginner both in english and primefaces mobile.
I want to use ui:repeat within a datalist to do something like:
<p:dataList id="data" var="tache" value="#{affect.listeDesTaches}">
<p:panel id="basic" header="Taches n° #{tache.idTache}" style="padding-bottom:40px">
<ui:repeat id="etapesId" var="etapes" value="#{taches.liste}" >
<p:panelGrid columns="6">
<p:commandButton value="#{etapes.idEtape}" type="button"/>
<p:commandButton value="#{etapes.name}" type="button"/>
<p:commandButton value="#{etapes.description}" type="button"/>
<p:commandButton value="#{etapes.dimension}" type="button"/>
<p:commandButton value="#{etapes.tempsFab}" type="button"/>
<p:commandButton value="#{etapes.reste}" type="button"/>
</p:panelGrid>
</ui:repeat>
</p:panel>
</p:dataList>
but it not working in primefaces mobile.I have no error message and all the information in the interior of "ui-repeat" are not displayed. please help.
PS: i'm using primefaces mobile 0.9.4 and primefaces 5.0
there is a typo. please use value="#{tache.liste}" instead of value="#{taches.liste}".
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.
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.