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.
Related
Primefaces 7.0, JSF 2.1.19
I am trying to replace richfaces 3.3.3 with primefaces 7.0 (and upgrade JSF to 2.1) and got a special behaviour from the fileUpload widget: When I first render the page it works without problems (no fileupload done, just render it), then I navigate again to the same page it is broken:
The fileupload component:
<p:fileUpload disabled="#{antragAttachments.fileUploadDisabled}" id="attachmentUpload" widgetVar="attachmentUpload" binding="#{antragAttachments.fileUpload}"
fileUploadListener="#{antragAttachments.fileUploadListener}" label="Durchsuchen..." uploadLabel="Datei anhängen" cancelLabel="Abbrechen" invalidFileMessage="test typ"
mode="advanced" fileLimit="1" sizeLimit="15728640" invalidSizeMessage="Der Dateianhang ist zu groß! Die maximale Größe beträgt 15MB!" previewWidth="1"
oncomplete="uploadComplete();" auto="true">
</p:fileUpload>
This is the (menu) component the navigate again to the xthtml:
<ui:repeat value="#{name}" var="item" >
<div id="menuOP" class="ebene#{item.shifting} #{item.selected ? 'divselected' : 'divnotselected'} #{item.spriteClass}">
<p:commandLink immediate="#{item.immediate}" value="#{item.label}" rendered="#{item.enabled}" action="#{item.navigate}"
styleClass="#{item.selected ? 'selected' : 'notselected'}" oncomplete="#{item.oncomplete}"/>
<h:outputText id="menuNoLinkText" rendered="#{!item.enabled}" styleClass="disabled" value="#{item.label}" />
</div>
</ui:repeat>
I tried to remove the immediate, set the type to "submit", use h:commandLink (without the oncomplete of course) just to see if I can get this running somehow. Does not work.
I also looked at the Primefaces fileupload introduction from balusC, but my problem is not the fileupload, it is the second rendering. There is also a Primefaces forum entry about something similar, but the trick von melloware did not work also.
What I do not understand, by the first click on the menu the rendering works fine and after every click on the menu-commandlink the browser console tells me that the widget is not available.
I found examples with similar problems, but there is most of the time a javascript call of the widget like PF('attachmentUpload').doSomething(), but this is not the case here.
EDIT:
I found out that when I first click on the commandlink the fileupload.js is loaded:
By the second click this is not the case anymore:
I also found a thread with the same problem: <p:layout> and <p:fileUpload> not working on page refresh, but there the only solution seems to be to take the css and js for fileupload and add it manualy to as resource... which is a little creepy...
In a html page I have a h:commandButton that I want to make it to work in combination with a h:selectBooleanCheckbox, so every time I press the button the checkbox will be checked and otherwise.
Is it possible to do that directly in the html, and not in the java code behind it?
<h:commandButton value="#{userBean.buttonText()}" action="#{userBean.changeOutput()}"/>
<h:panelGrid columns="4" rendered="#{userBean.details}" styleClass="clicked" >
<h:outputText .... />
<h:outputText ..../>
</h:panelGrid>`
If you are using JSF 2, you have to update the area that include your checkbox, using f:ajax tag.
You can find a lot of examples here in stackoverflow, look this example just hide/show a div: After showing / hiding a JSF element with AJAX how to hide the triggering element?
Hope it helps.
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.
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 .
Edit - please see bottom.
I've got a primefaces calendar component on my page. The textbox appears but when I click it the calendar does not appear. Here is the component code.
<p:calendar id="clientApptTime" value="#{ScheduleMB.datePrime}"
pattern="HH:mm" timeOnly="true" />
My facelet and the template both use h:head and h:body tags and I have the
xmlns:p="http://primefaces.org/ui" up top.
I'm using primefaces 3.3.1, java 1.6 and Mojarra 2.1.
Also I'm not getting any error messages on either the server or my error console.
Anybody have any ideas?
And here is the rendered page source:
span id="j_idt34:clientApptTime"><input id="j_idt34:clientApptTime_input"
name="j_idt34:clientApptTime_input" type="text" class="ui-inputfield ui-widget
ui-state-default ui-corner-all" /></span><script id="j_idt34:clientApptTime_s"
type="text/javascript">$(function()
{PrimeFaces.cw('Calendar','widget_j_idt34_clientApptTime',
{id:'j_idt34:clientApptTime',popup:true,locale:'en_US',dateFormat:'m/d/y
hh:mm',timeOnly:true,stepHour:1,stepMinute:1,stepSecond:1,hourMin:0,hourMax:23,minuteMin:0,
minuteMax:59,secondMin:0,secondMax:59});});</script>
Answer seems to be that Primefaces will not work with Tomahawk. After I removed all the Tomahawk references Primefaces worked fine. Anyone know what I can do about that (this may be a question for another post)?