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.
Related
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')}.
if I change
image="#{pageContext.servletContext.contextPath}/upload
/#{fileUploadController.imagemTemporaria}"
and put
image="/imagens/#{fileUploadController.imagemTemporaria}"
the image is loaded. on the other hand, the method crop stops to work.
my images are in F:\imagens-retaguarda\imagens
my descriptor contains the following
<property name="alternatedocroot_1" value="from=/imagens/*
dir=F:\imagens-retaguarda\" />
do you know why that happens?
below is my code.
<h:form>
<p:outputPanel id="outputPanelUpload">
<h:panelGrid columns="2">
<h:outputText value="Imagem" rendered="#{fileUploadController.exibeBotao}"/>
<h:outputText value="Pré-visualização" rendered="#{fileUploadController.exibeBotao}"/>
<p:imageCropper id="imageCropperImagemTemporaria"
value="#{fileUploadController.croppedImage}"
image="#{pageContext.servletContext.contextPath}/upload/#{fileUploadController.imagemTemporaria}"
initialCoords="0,0,50,50"
maxSize="250,163"
minSize="30,30" />
<h:panelGroup rendered="#{fileUploadController.exibirPreVisualizacao}">
<p:graphicImage value="#{fileUploadController.imagemEnviada}" cache="false"/>
</h:panelGroup>
</h:panelGrid>
<br/>
<p:commandLink action="#{fileUploadController.crop}" update="outputPanelUpload" rendered="#{fileUploadController.exibeBotao}" value="Pré-visualizar" id="preVisualizar"/>
</p:outputPanel>
<br/>
<br/>
<p:fileUpload fileUploadListener="#{fileUploadController.enviarImagem}" sizeLimit="1000000" auto="true" update="outputPanelUpload" label="Escolher"/>
</h:form>
There is a restriction on p:imageCropper that it doesnt work with alternate docroot in glassfish
from primefaces forum
ImageCropper can crop local images in webroot and external images
located with http://. I don't think it is a bug but more like a
limitation as it doesn't support glassfish specific stuff like this.
link to above quoute by optimus.
Some friendly forum user has put together a codesnippet on how to construct the complete url. Havnt tested it myself, but conceptually it should work.
<p:imageCropper id="croppedImg"
value="#{controller.croppedImage}"
image="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}/Screens/Image.png"
initialCoords="10,10,200,200" />
link
I'm using RichFaces with JSF to develop a simple app. One page of this app contains several collapsiblePanel elements. Some of the collapsiblePanel elements are nested, but never more than a second layer.
I would like to provide links or buttons on the page to expand all and collapse all collapsiblePanel elements on the page. How can I do that?
The elements currently use the switchType="client" attribute to let the client handle the expanding and collapsing. I suspect that using a type of ajax instead may help, but I'm not sure nor do I know how I would take advantage of it.
Update: My question may be easier to understand if I include an example of what I'm trying to do:
<h:form>
<a4j:commandButton actionListener="#{bean.setDefaultExpanded(true)}"
render="reportPanel" value="Expand all" />
<a4j:commandButton actionListener="#{bean.setDefaultExpanded(false)}"
render="reportPanel" value="Collapse all" />
<h:panelGrid id="reportPanel">
<ui:repeat var="account" value="#{bean.results.entrySet().toArray()}">
<rich:collapsiblePanel expanded="#{bean.defaultExpanded}">
<ui:repeat var="chargeGroup" value="#{account.value.entrySet().toArray()}">
<rich:collapsiblePanel expanded="#{bean.defaultExpanded}">
<h:outputText value="content: #{chargeGroup.value}" />
</rich:collapsiblePanel>
</ui:repeat>
</rich:collapsiblePanel>
</ui:repeat>
</h:panelGrid>
</h:form>
The <rich:collapsiblePanel> has the expanded attribute, you can bind it to bean property and control the expansion from there. Something like this
<rich:collapsiblePanel id="panel1" expanded="#{bean.expanded}" …>
<a4j:commandButton actionListener="#{bean.togglePanels()}"
… render="panel1, panel2, …"/>
The switchType controls where the content is pulled from, not how you expand/collapse the panel.
I had the same problem when click individual panels and then expand/collapse all. This work for me (richfaces 4.2.3):
<h:commandButton immediate="true" action="#{controllerBean.toggleMin}" value="collapse all" >
<a4j:ajax render="panel1 panel2"></a4j:ajax>
</h:commandButton>
<h:commandButton immediate="true" action="#{controllerBean.toggleMax}" value="expand all">
<a4j:ajax render="panel1 panel2"></a4j:ajax>
</h:commandButton>
...
<rich:collapsiblePanel id="panel1" immediate="true" expanded="#{modelBean.expanded}" header="Title text" switchType="client">
...
</rich:collapsiblePanel>
...
I have a problem that a I couldn't solve. When I click first time on a a4j:commandButton there is not action. The second and following time it works perfectly. I have read about this problem however I have not clear the solucion.
I am new, and I have find this solucion: (h:commandButton/h:commandLink does not work on first click, works only on second click) however I do not know where should I introduce the script code.
I have found this: however I think is an old jsf version:
(https://community.jboss.org/thread/165031)
And I have tried to repare it with: https://community.jboss.org/wiki/ProgrammaticControlOfPartialProcessingInRichFaces4. However, I have not been success
If someone could explain me the #BalusC solution step by step, it could be really hepful
Thanks very much:
My code is: (everything in the same file)
<ui:define name="table">
<h:form id= "formListCompanies">
<a4j:outputPanel id="tablePaneRegion">
<rich:extendedDataTable ....
<rich:column sortable="false" width="100%">
...
<a4j:commandLink id="editCmd" styleClass="no-decor" render="editGrid, editPane"
execute="#this" oncomplete="#{rich:component('editPane')}.show()">
<a4j:param value="#{it.index}" assignTo="#{myBean.currentIndex}" />
<f:setPropertyActionListener target="#{myBean.selected}" value="#{mypojo}" />
</a4j:commandLink>
....</rich:column>
....
<rich:popupPanel id="editPane" header="#{...}" domElementAttachment="body"
moveable="true" modal="true" resizeable="false" autosized="true"
onshow="focus(#{rich:component('name')});">
....
<!-- h:Inputtext ..-->
<h:panelGrid columns="2">
<a4j:commandButton value="#{'save'}" action="#{myBean.edit}"
render="dataTable" execute="editPaneRegion" />
<a4j:commandButton value="#{...}"
onclick="#{rich:component('editPane')}.hide(); return false;" />
</h:panelGrid>
</h:form>
</a4j:outputPanel>
</rich:popupPanel>
What I have already tried is to take out the h:form id= formListCompanies, and put there a h:panelgrid and a h:panelgroup
Is the problem related to the doble clicking issue? Am i in the right way?
rerender panel and form (form state lost error in jsf spec)... render="richPanelMantenimientoTipoVisualAjaxWebPart,frmMantenimientoTipoVisual"
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.