I have a JSF page using richfaces with a few help buttons like this:
<rich:componentControl for="panelHelp" event="oncomplete" operation="show" />
The panel called is this:
<rich:modalPanel id="panelHelp" minHeight="250" minWidth="500"
keepVisualState="true" resizeable="true" moveable="true">
<f:facet name="header">
<h:outputText value="Help" />
</f:facet>
<f:facet name="controls">
<h:commandLink value="">
<h:graphicImage value="/close2.png" title="Close" />
<rich:componentControl for="panelHelp" event="onclick" operation="hide" />
</h:commandLink>
</f:facet>
<h:panelGrid columns="1" width="100%">
<h:outputText escape="false" id="txtHelp"
value="#{msgHelp}" style="width: 100%; height: 190px" />
</h:panelGrid>
</rich:modalPanel>
However, whenever I press the button to close the panel, it reloads the whole page, instead of simply hiding the panel.
Am I doing something wrong, or is there a better way to do this?
I'm using richfaces version 3.3.3
Use a4j:commandLink instead of h:commandLink and provide an a4j:support as well. This should fix the problem.
It's reloading the entire page because of your use of the <h:commandLink/>, which is going to trigger the entire JSF request processing lifecycle. To get your desired results you don't need the command link component. All you really need is:
<f:facet name="controls">
<h:graphicImage id="closeButton" value="/close2.png" title="Close" />
<rich:componentControl attachTo="closeButton" for="panelHelp" event="onclick" operation="hide" />
</f:facet>
What we're doing here is firing the <rich:componentControl/> on click of the image; there's no need for a link. I'm assuming you're using Richfaces 3.X. (RF 4.X has deprecated the attachTo attribute)
Above answer will work in Richfaces 3.x, If you are using Richfaces 4.x then the given code will work.
<f:facet name="controls">
<h:graphicImage value="/close2.png" >
<rich:componentControl target="closeButton" operation="hide" event="click" />
</h:graphicImage>
</f:facet>
Add disableDefault="true" attribute to your rich:componentControl to disable default behavior of the link on click.
Related
I wanted to create a tooltip with dynamic content on a button hover and show a data table inside it. After a little bit of googling i managed to get that working but with a small issue. I am not able to keep the tooltip visible until its manually closed and primesfaces tooltip options do not seem to have any property to achieve something like that.
Code for tooltip:
<h:panelGroup>
<h:outputLink id="lnk" value="#">
<h:outputText value="Sample Tooltip"/>
</h:outputLink>
<p:tooltip for="lnk" position="right" />
<p:dataTable var="car" value="#{preOrderController.cars}">
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.name}" />
</p:column>
</p:dataTable>
</h:panelGroup>
The tooltip works fine, what I want to do is once the mouse is hovered over the button and tooltip is shown, I want to keep it visible until the user manually clicks the close button at the top right corner or somewhere else on the screen. It is not necessary that I use tooltip, if primefaces has something else that can used to get similar functionality I am open to suggestions.
The solution is here
<h:form>
<h:panelGrid>
<h:panelGroup>
<p:commandButton value="Hide" type="button" onclick="PF('tooltip').hide();"/>
</h:panelGroup>
<h:panelGroup>
<p:commandLink id="focus" value="link" onmouseover="PF('tooltip').show()"/>
<p:tooltip value="This is a tooltip" for="focus" hideEvent="blur" widgetVar="tooltip"/>
</h:panelGroup>
</h:panelGrid>
</h:form>
Try this:
<h:form onclick="PF('tooltip').hide()">
<p:commandLink id="focus" value="link" onmouseover="PF('tooltip').show()"/>
<p:tooltip value="This is a tooltip" for="focus" hideEvent="blur" widgetVar="tooltip"/>
</h:form>
Take note that you need to click inside the <h:form> in order to hide the tooltip
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>
The following code in my .xhtml works fine:
<h:commandButton id="btnConsultar"
action="#cadastrarProponenteBean.consultarCnpj}"
value="#{messages.tx_consultar}"
styleClass="btnAcao" />
But, when I add a4j:support:
<h:commandButton id="btnConsultar"
action="#{cadastrarProponenteBean.consultarCnpj}"
value="#{messages.tx_consultar}"
styleClass="btnAcao">
<a4j:support event="onclick" />
</h:commandButton>
the application breaks, I get strange errors, and my validation messages('getFacesContext().addMessage') are not shown.
Since I'm using a4j:support just to show a loading gif when user clicks, any advice on how to fix this problem?
I'm using JSF and RichFaces.
PS: already tried a4j:commandButton instead of h:commandButton but same problems...
You should use <a4j:status> similar to:
<a4j:status id="ajaxstatus" rendered="true">
<f:facet name="start">
<h:panelGroup>
<h:graphicImage value="/images/loading.gif" />
</h:panelGroup>
</f:facet>
<f:facet name="stop">
</f:facet>
</a4j:status>
I have it in template. Loading image is displayed during any long action.
I want to create gallery for images which uses <p:galleryImage/>. The problem is that when gallery contains a lot of images it download all of them and after that shows them. It is really annoying and it must work in different way. Now gallery looks like this:
<p:lightBox>
<h:commandButton class="button button-1-3 graphics-portfolio-plakaty" onclick="plakaty.show();" />
<f:facet name="inline">
<p:galleria value="#{galleryBean.imageNames}" var="imageName" panelWidth="800" panelHeight="500">
<p:graphicImage value="/gallery?img=#{imageName}" cache="false" />
</p:galleria>
</f:facet>
</p:lightBox>
I want to load images using ajax so it should look like this.
<p:lightBox>
<h:commandButton class="button button-1-3 graphics-portfolio-plakaty" onclick="plakaty.show();" />
<f:facet name="inline">
<p:galleria value="#{galleryBean.imageNames}" var="imageName" panelWidth="800" panelHeight="500">
<p:graphicImage value="/gallery?img=#{imageName}" cache="false">
<p:ajax event="ready" />
</p:graphicImage>
</p:galleria>
</f:facet>
</p:lightBox>
I'm new in JSF so there may be so better way to do this or how can I load image using ajax?
My problem is that I am trying to make dynamic tabs with tabPanel, so I want to read some information about that tabs from my bean. And that is why I am using c:foreach. So here is that piece of code:
<a4j:outputPanel id="output">
<rich:tabPanel width="40%" headerAlignment="right" switchType="client" binding="#{searchRequest.tabPanel}">
<rich:tab header="#{lang.tab_basic}" id="tabBasic" name="tabBasic">
............Content of the first non-dynamic tab..............
</rich:tab>
<c:forEach items="#{searchSession.tabs}" var="tab">
<rich:tab name="#{tab.name}" >
<f:facet name="label">
<h:panelGrid columns="2">
<h:outputText value="#{tab.name}" />
<h:graphicImage value="images/icons/delete.gif"
style="width:12px; height:12px;"
onclick="myFunc('#{tab.name}'); Event.stop(event);"/>
</h:panelGrid>
</f:facet>
<h:outputText value="#{tab.html}" escape="false"/>
</rich:tab>
</c:forEach>
</rich:tabPanel>
</a4j:outputPanel>
Everything seems clear to me, but as usual, there is something that I don't see, so I would be very thankful if someone could tell me what is that.
I don't think there is a label facet for rich:tab (at least its not mentioned in the docs).