This is the code in the body of my .xhtml file. The bars were showing before (I don't remember changing anything significant) but now just the value is displayed.
<p:progressBar value="#{bean.value}" labelTemplate="{value}%" styleClass="animated"/>
<p:progressBar id="progress" interval="100" rendered="true" ajax="true" value="#{bean.value}" widgetVar="pbAjax" labelTemplate="{value}%" style="width:300px; font-size:12px"/>
The second bar is derived from this answer but the problem still remains the same.
<p:progressBar value="50" labelTemplate="{value}%" displayOnly="true"/>
This is the code from primefaces, which also does not show up as a bar but just as a value.
I would appreciate it you could clarify if I have some major misunderstanding of how the progressBar works.
Use Firebug or your browser's WebDevelopment Tools to check if the progressbar is properly rendered:
Check for Javascript Errors
Is the right CSS Style applied or are you overwriting primefaces css classes?
Are you using your own JQuery Version? It can come to conflicts between your JQuery and Primefaces' one.
Related
I have a jsf page in the form of
<h:form>
<rich:dataTable id="myTable">
<!--Table Data-->
</rich:dataTable>
<rich:dataScroller for="myTable"/>
</h:form>
When the table is in a <h:form> it doesn't scroll (the scroller is disabled) but once I take them out of the <h:form> it works fine. Issue is I need them to be in a form for the rest of my code to work. Anyone know the reason for the issue? I've seen people ask about it but no good answers.
I figured it out. I was using the form in a modal pane and the <ui:include> was within a <h:form> so there was an issue with it being a form within a form.
View:
<p:dialog header="Search in code tables" widgetVar="dlg" resizable="true">
<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
required="true" label="tableId">
<f:selectItems value="#{xxx.tables}" ></f:selectItems>
</p:selectOneMenu>
The z-index for the dialog causes the menu options to hide behind it.
I am following standard example from Primefaces showcase:
http://www.primefaces.org/showcase/ui/overlay/dialog/loginDemo.xhtml
This appears to be a know n issue
http://forum.primefaces.org/viewtopic.php?f=3&t=33972
Can someone suggest a proper fix.
okay I have managed to figure this out.
I was missing a appendTo telling which component to append the select:
<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
required="true" label="tableId" appendTo="#this" >
This fixes the z-index as well as adding a scrollbar to the drop down.
I have not been able to find this anywhere so posting this self answer.
Try to use panelStyle for selectOneMenu.
Using appendTo = "#this" may cause something like this:
You could use panelStyle = "position:fixed" instead.
Regards.
I want to show the icons without buttons but it doesn't work. I get the following message: no Mime-Type was Found.
The two icons are default icons from Primefaces.
I use JSF 2.1 and primefaces 3.5
<h:graphicImage rendered="#{!task.IS_SEEN}" name="ui-icon-mail-closed"/>
<h:graphicImage rendered="#{task.IS_SEEN}" name="ui-icon-mail-closed"/>
If I use buttons it would work or can I set that the button can not be pressed
<p:commandButton rendered="#{!task.IS_SEEN}" icon="ui-icon-mail-closed" />
<p:commandButton rendered="#{task.IS_SEEN}" icon="ui-icon-mail-open" />
If you want just a clickable image that trigger an action in the backing bean I suggest wrapping a graphic image in a h:commandLink.
<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
<h:graphicImage value="your-image-here"/>
</h:commandLink>
If you want easy to use, nice, vectorial icons I suggest you to check Font Awesome http://fontawesome.io/icons/ as well.
To use Font Awesome just include the following line in your <h:head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>
Then you can easily put the icons inside commandLinks in this simple way:
<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
<i class="fa fa-envelope"></i>
</h:commandLink>
Also you need specify css class ui-icon like this:
<h:panelGroup styleClass="ui-icon ui-icon-mail-closed" />
those are in fact CSS classes that point to a sprite file, so technically they are not icons.
try using:
<h:panelGroup styleClass="ui-icon-mail-closed" rendered="#{!task.IS_SEEN}" />
and if there's a need style it accordingly with padding.
I am looking for something like <rich:popupPanel> in RichFaces 4, but then for RichFaces 3. I haven't found anything like in documenation. There is only <rich:modalPanel> which doesn't suit my needs, because it has problems displaying my datamodel in table. The selection doesn't work, it always returns no rows selected. If I put my table component in <rich:panel> or <rich:togglePanel>, then it works fine.
Is there any popup window excluding <rich:modalPanel> in RichFaces 3?
I dont have 50 reputation to ask you more details in a comment, so i will answer directly hoping this is what you're asking about.
I think you mean that your problem is that the content of the ModalPanel is not rerendered dynamically. but for this you can wrap your table (or the components you want to update) in an <a4j:outputPanel> with ajaxRendered="true"
Setting ajaxRendered="true" will cause the <a4j:outputPanel> to be updated with each Ajax response for the page, even when not listed explicitly by the requesting component. This can in turn be overridden by specific attributes on any requesting components.
http://docs.jboss.org/richfaces/latest_4_0_X/Component_Reference/en-US/html/chap-Component_Reference-Containers.html#sect-Component_Reference-Containers-a4joutputPanel
In my code I have something like :
<a4j:commandLink id="timelineBtn" action="#{timelineBean.doGenerateLog}"
oncomplete="Richfaces.showModalPanel('timelinePnl');return false;"
value="#{labels['timeline.button.lbl']}"/>
that opens the modalPanel :
<rich:modalPanel style="width:800;height:600;" id="timelinePnl">
<a4j:outputPanel id="dataPanel" ajaxRendered="true">
<!-- your components to be updated go here -->
</a4j:outputPanel>
</rich:modalPanel>
So my content is updated with the results of my timelineBean.doGenerateLog method each time i open the modalPanel .
I am using PrimeFaces 4.0, JSF2, jBoss EAP 6.1, Bootsrtap 3. I've got two places in my project where I use <p:autocomplete>, one renders OK the other does not. Suggestion part of auto complete should appear inside a <div> container at the bottom of the page:
<div id="searchForm:j_id_8t_5k_panel" class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"></div>
but my buggy one renders in the same place where <p:autocomplete> tag should be, it actually replaces input with plain <ul> with suggestions that you can not click.
I am using proper JSF tags like <h:body> etc.
My autocomplete component:
<p:autoComplete value="#{search.item}" completeMethod="#{search.autocomplete}"
var="item" itemLabel="#{item.label}" itemValue="#{item}" converter="objectConverter"
forceSelection="true" minQueryLength="3" scrollHeight="200"
global="false" />
Anyone had a similar problem?
The cause of my problem was that I've put my <p:autocomplete> inside a <p:outputPanel autoUpdate="true">. After removing autoUpdate everything works fine! Don't really know why it should break an autocomplete element, but it does. Hope it helps someone.