I have this module in my webapp where i need to update come catalogs.
The idea is to disable the h:commandButton and show a h:graphicImage, both actions are supposed to happen right after the button was clicked.
Finally, when the update process has ended it should do the other way, hide the h:graphicImage, enable the h:commandButton but this time also show a label h:outputText that says either 'Update Success' or 'Update Failure'.
The problem in my code is that the image and the label appear right after the process is finished and I can't find the way to do what I described above.
Where or what am I missing?,
Cheers.
<a4j:commandButton id="btnActualiza" value="Actualizar catálogos"
render="messageCatalogos actualizacionCorrecta
#this imgProcesando"
onclick="this.disabled=true;"
oncomplete="this.disabled=false"
actionListener="#{administrationBean.doImgProcesandoVisible}"
action="#{administrationBean.doActualizaCatalogos}"/>
<a4j:outputPanel id="imgProcesando">
<h:graphicImage rendered="#{administrationBean.imgProcesandoRendered}"
url="img/imgLoading.gif"/>
</a4j:outputPanel>
<h:panelGroup/>
<h:panelGroup/>
<a4j:outputPanel id="actualizacionCorrecta" style="font-size: 14px; color: #D17100">
<h:outputText rendered="#{administrationBean.actualizacionCorrectaLabelRendered}"
value="Actualización correcta !"/>
<h:outputText rendered="#{administrationBean.actualizacionFalloLabelRendered}"
value="Fallo la actualización !"/>
</a4j:outputPanel>
UPDATE
My dev environment:
Mojarra 2.1.6
RichFaces 4.1.0.Final
Tomcat 7.0.14(test) / Tomcat 7.0.22(prod)
You need to show and hide the image by JS instead.
<h:graphicImage id="loading" url="img/imgLoading.gif" style="display:none" />
with
<a4j:commandButton ...
onbegin="this.disabled=true; $('#formId\\:loading').show()"
oncomplete="this.disabled=false; $('#formId\\:loading').hide()"
/>
Related
I am looking for solution that p:overlayPanel content should update it self while clicking commendButton or commendLink. But its showing blank white p:overlayPanel when i click the button. The updating with the p:overlayPanel id in that button or link. I have tried many ways nothing worked out. Is my code wrong?
Please suggest some solution.
Here is my code :
<ui:repeat id="profiles" value="#{items.lstProfiles}" var="profile">
<p:commandLink id="profileLink" value="show" update="moviePanel"
actionListener="#{dashBoardController.showProfileOverlay}"/>
<p:overlayPanel id="moviePanel" for="profileLink" hideEffect="fade"
dynamic="true" style="width:300px; height: 150px;">
<h:panelGrid columns="2">
<h:outputText value="Name : "/>
<h:outputText value="#{dashBoardController.selectedProfile.name}"/>
</h:panelGrid>
</p:overlayPanel>
</ui:repeat>
Usually dynamic="true" should do the job but some times it fails.So to update the contents inside the Overlay.
There are many ways to do this by tweaking Jquery.
Simplest one I can think of is:
Since ui:repeat generates dynamic ID for p:overlayPanels you can update by providing unique css class name from every iteration.
In Primefaces you can select a component using css class also using: #(.myclass).
And so you can update that component also:- update="#(.mystyle)"
Example:
<h:form>
<ui:repeat var="patient" value="#{dataCenter.patientList}">
<p:commandLink value="#{patient.firstName}" id="patientNameLnk" update="#(.overlay-class-#{patient.patientId})"/><br/>
<p:overlayPanel for="patientNameLnk">
<h:panelGroup styleClass="overlay-class-#{patient.patientId}">
#{patient.firstName}
#{patient.lastName}
#{patient.dob}
</h:panelGroup>
</p:overlayPanel>
</ui:repeat>
</h:form>
In the above example css class name for every h:panelGroup will be generated as overlay-class-<PATIENT_ID> so every h:panelGroup will have unique class name(if patientId is unique).
Note: Note that I'm updating h:panelGroup inside p:overlayPanel because if you update p:overlayPanel then it might start flickering(it happened to me while executing above example).
I am using Primefaces 5.0.2 with Glassfish 4 (Mojarra 2.2.0).
I've been trying to add a command button to delete/remove the selected image in a p:galleria component. I tried adding a button within the galleria component like this:
<p:galleria id="images" value="#{someBean.images}" var="image">
<p:graphicImage value="#{image}"/>
<p:commandButton icon="ui-icon-trash" title="Delete #{image}" style="position:absolute; top:0; right:0; z-index:10;"
actionListener="#{someBean.deleteImage(image)}"
update="growl images" />
</p:galleria>
I can display the image path fine within the button, but passing the image parameter in the EL Expression #{someBean.deleteImage(image)} does not work as expected.
The issue I have is that when deleteImage is called the image parameter (String) is always empty instead of containing the image name. However, title="Delete #{image}" displays fine, so I suspect image isn't resolved correctly within the actionListener or action attributes.
If I enter a literal string in the xhtml, e.g. #{someBean.deleteImage('deleteme')} it is passed correctly. Passing null also gives an empty string.
someBean.images is a List<String> (image paths).
I am at a loss :/ could anyone point me in the right direction? Is this a bug or am I doing something wrong?
I have also thought about adding a button outside the galleria component, but I am unclear as to how to determine the selected image without having to modify the p:galleria component.
There is also an unanswered question about this (1yr old) How to get the selected image from <p:galleria
Update:
Appending "test" to image using ui:param or c:set will actually give me the string "test" within the deleteImage method, but the h:outputText component correctly renders the value of image with "test" appended. This suggests to me that they are rendered at different times - and the commandButton is rendered at a time when image is null?
<p:galleria id="images" value="#{someBean.images}" var="image">
<p:graphicImage value="#{image}"/>
<ui:param name="img" value="#{image}test"/>
<h:outputText value="#{img}"/>
<p:commandButton icon="ui-icon-trash" title="Delete #{image}" style="position:absolute; top:0; right:0; z-index:10;"
actionListener="#{someBean.deleteImage(img)}"/>
</p:galleria>
Update 2
This could be related to a similar issue in Primefaces Extensions - maybe it is a bug after all. http://forum.primefaces.org/viewtopic.php?f=14&t=39992
I also started a thread in the PF forum: http://forum.primefaces.org/viewtopic.php?f=3&t=40055
<p:galleria id="photoGalleria"
panelHeight="400"
panelWidth="450"
widgetVar="photoGalleriaWidgetVar"
style="width: 100%;"
autoPlay="false"
value="#{partEditBean.selectedPart.partPictures}" var="img">
<p:panelGrid columns="1" styleClass="wf" style="text-align: center;">
<p:commandButton id="delete_pic_button"
update="#form"
value="#{msg['part_view.delete']}" process="#this"
actionListener="#{partImageEditBean.deleteListener}">
<f:param name="pic_id" value="#{img.picId}"/>
</p:commandButton>
</p:panelGrid>
<p:graphicImage styleClass="wf galleriaOver" value="#{img.picUrlPath}"
title="#{partEditBean.selectedPart.partTreeNode.partPathName}"
onclick="window.open('#{img.picUrlPath}','_blank');"/>
</p:galleria>
FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("pic_id")
I need a rich:popup that shows a rich:extendedDataTable, and when the user presses a button, the popup should be shown, and the extendedDataTable must be re-rendered, here is the code:
<rich:popupPanel id="popupId" show="false" modal="true">
<h:form>
<rich:extendedDataTable
value="#{bean.list}"
var="item" rows="5" id="table">
<rich:column>
<h:outputLabel value="#{item}" />
</rich:column>
</rich:extendedDataTable>
<a4j:commandButton value="x" immediate="true"
oncomplete="#{rich:component('popupId')}.hide(); return false;"/>
</h:form>
</rich:popupPanel>
<h:form>
<a4j:commandButton value="show"
oncomplete="#{rich:component('popupId')}.show(); return false;"
render="table" immediate="true" />
</h:form>
The first time I press the show it works fine, but when I close the panel with the X button and press again the show button, the extendedDataTable appears empty (It's rendered but appear empty, see image below).
The problem is fixed if I add an empty extendedDataTable before the popup, like this:
<rich:extendedDataTable />
<rich:popupPanel>
...
With rich:dataTable the problem doesn't exits, but I need a extendedDataTable.
And aditional extrange behaviour is when I resize the browser, the data appears.
Platform
RichFaces: 4.2.2.Final
Spring: 3.1.1.RELEASE
Cheers
Use onclick instead of oncomplete. ExtendedDataTable doesn't render properly inside invisible elements (it's a bug) so the popupPanel has to be made visible before the rerendering.
I had kinda the same issue.
I solved it in a not 100% richface correct way:
<a4j:commandButton
value="show"
action="#{actionForm.setShowEditor('true')}"
oncomplete="javascript:location.reload(true)"/>
<a4j:region layout="block" rendered="#{actionForm.showEditor}" id="panelArea">
<rich:popupPanel id="#{popupID}" modal="true" show="true" domElementAttachment="parent">
....
tabel
buttons
....
</rich:popupPanel>
</a4j:region>
The popup is always shown (show="true") inside the a4j:region.
But the a4j:region is only shown if variable to show the popup = true.
The full page refresh was in my case needed because otherwise my ckeditor had some initialisation errors. It should also work if you only rerender the a4j:region after you set the "#{actionForm.setShowEditor('true')}.
Here is my code. When I click the link Comment, a inputTextarea and commandButton suppose to appear
<h:outputLink id="link" value="javascript:void(0)">
<h:outputText value="Comment"/>
<p:effect type="fade" event="click" for="reply">
<f:param name="mode" value="'show'"/>
</p:effect>
</h:outputLink>
<h:panelGrid id="reply" style="display:none;">
<h:inputTextarea id="keyword" rows="2" />
</h:panelGrid>
</h:outputLink>
When I click on the link, nothing seem to happen, nothing appear. Any idea. I run this on Glassfish. The showcase from primeface.org is running under Tomcat.
There are two problems:
First, according to the PrimeFaces User Guide the appear effect is not supported.
Following is the list of effects supported by PrimeFaces.
blind
clip
drop
explode
fold
puff
slide
scale
bounce
highlight
pulsate
shake
size
transfer
So change the p:effect to:
<p:effect type="blind" event="click" for="reply">
<f:param name="mode" value="'show'" />
</p:effect>
Second, the generated source of the link tells the following:
<a href="javascript:void(0)">Comment<script type="text/javascript">
YAHOO.util.Event.addListener('j_idt6:j_idt7', 'click', function(e) {
jQuery(PrimeFaces.escapeClientId('j_idt6:reply')).effect('blind',{mode:'show'},1000);
});</script></a>
The client ID j_idt6:j_idt7 doesn't appear anywhere in the source. It has to be the link itself. So adding an id to the h:outputLink should fix it. Look like a bug in PrimeFaces.
I have created a page with primefaces where I use the Lightbox component.
I use it in a dynamic matter as I create tumbnails on the fly with a servlet call.
The first page shows up nice and the lightbox works as expected but when I load a new set of pictures for the next page the pictures are shown but when you click on it, it just shows the original picture in a new page, when I then return with the previous button and click on a a thumbnail it works as expected.
This is the jsf code:
<h:outputLabel id="curpage" value="#{pictureBean.currentPage}" />
<h:commandButton value="next" action="#{pictureBean.nextPage}" id="next">
<f:ajax render="lightBox curpage" />
</h:commandButton>
<br/>
<p:lightBox height="500px" id="lightBox">
<ui:repeat value="#{pictureBean.pictures}" var="pic">
<h:outputLink value="#{pic.url}" title="#{pic.description}">
<h:graphicImage value="#{pic.urlThumb}" style="width:100px;height:75px;"/>
</h:outputLink>
</ui:repeat>
</p:lightBox>
I fixed it myself :-) I was forgotten to add the tags between form tags.