p:selectOneMenu does not work - jsf

I am developing an Application with Primefaces 3 and the p:selectOneMenu just doesn't work.
The first option is always selected and when I press the drop-down button to the right nothing happens. h:selectOneMenu works just fine, but I want the style of the primefaces component.
<h:form>
<!-- Country-->
<div class="control-group">
<label class="control-label">Country</label>
<div class="controls">
<p:selectOneMenu value="#{userService.sessionBean.currentUser.country}">
<f:selectItem itemLabel="Austria" itemValue="Austria" />
<f:selectItem itemLabel="Germany" itemValue="Germany" />
<f:selectItem itemLabel="Italy" itemValue="Italy" />
</p:selectOneMenu>
</div>
</div>
<div class="form-actions">
<p:commandButton type="submit" id="submitButton" action="#{userService.update()}" value="Update your Profile" styleClass="btn btn-primary btn-large" ajax="false">
<f:param name="update" value="true" />
</p:commandButton>
</div>
</h:form>
I even copied the showcase example from the primefaces homepage but it still does not work. I tested this also at a friends computer and with firefox and chrome on Ubuntu and Mac OS X.
Is this a problem with my Primefaces Version (3.5)?

I commented on this issue over a year ago, but just ran into the same issue and found this post again when looking for a solution.
The fix in my case was that the page had an import of an older version of jQuery (1.11.2) that was clashing with the jQuery that PrimeFaces uses and imports to the page.
I removed my jQuery import and the p:selectOneMenu now drops down and works as expected.

Related

<h:commandButton> Create a new CDI #ViewScoped on Click, instead of using existing one

In a JSF 2.2 application, a user visit the link test.xhtml?id=324 , The page must have the paramater id. The page is backed by a CDI #ViewScoped Bean called TestBean.
The fields get initiliazed using a #postconstruct method
#PostConstruct
public void initialize() {…}
and this method that, load data based on id, if id is not present or correct, then direct the user to another page
<f:metadata>
<f:viewAction action="#{testBean.redirectNoParameters}"></f:viewAction>
</f:metadata>
public String redirectNoParameters() {
//method load data based on id, if id is not present or correct, then direct the user to another page
test = testDao.find(id);
In this page there is a comment section
<h:form role="form" prependId="false" >
<h:selectOneMenu value="#{testBean.sortComment}" valueChangeListener="#{testBean.orderComments}">
<f:ajax event="change" execute="#this" render="comment-listing" />
<f:selectItem itemLabel="Recent" itemValue="1"></f:selectItem>
<f:selectItem itemLabel="Oldest" itemValue="2"></f:selectItem>
<f:selectItem itemLabel="Popular" itemValue="3"></f:selectItem>
</h:selectOneMenu>
</h:form>
<div jsf:id="comment-listing">
<div >
<h:form role="form" prependId="false">
<ui:repeat var="comment" value="#{testBean.comments}" >
<div >
<div >
<div>
<h:commandButton value="#{comment.votes.size()}" action="#{testBean.upVote(comment)}" >
<f:ajax execute="#this" render="comment-listing" immediate="true"/>
</h:commandButton>
</div>
</div>
<div >
<h4 >
<h:link outcome="channel">
<f:param name="handle" value="#{comment.commentor.handle}"></f:param>
#{comment.commentor.handle}
</h:link>
on <span class="c-date">#{comment.creationDate}</span>
</h4>
#{comment.comment}
</div>
</div>
</ui:repeat>
</h:form>
</div>
</div>
As You can see for each comment there is a <h:commandButton> for a user to upvote the comment (like in youtube, stackoverflow…) . When the method is clicked it works as inteded. The method testBean.upVote(comment), is called and the ui is updated.
THEN I use the first form above to Re-order comments, say for example the change is from popular -> Recent. Also the method does its job and the ui is updated.
Till now all is working great.
However, When I click the upvote btn/method (of a different comment) AGAIN. The contsructor get called, so is #postconstruct, and the redirectNoParameters().
I have tried removing all ajax tag to see if it is an ajax problem. And The problem still occurs. So it’s not an ajax issue.
I have tried remove the parameter comment from the method "#{testBean.upVote(comment)}" to see if that’s what producing the problem. And The problem still occurs.
I have tried using <c:forEach instead of <ui:repeat . Still no hope.
What’s produce the problem? Why is this happening instead of just calling the method of the command button ?? Thanks.

Primefaces Client Side Validation not displaying message in Growl

I am tying to use the primefaces client side validation framework. Most of it is working correctly, but for some reason the validatorMessage doesn't display in my growl. When I just have the server side validation it appears fine. I have added a standard message and this also appears fine, it just won't appear in the growl.
My growl is defined as:
<p:growl id="errorMsg" showDetail="true" sticky="true" autoUpdate="true" widgetVar="growlErrorMsg" />
A snippet of my xhtml is:-
<div class="field">
<p:outputLabel for="Amt1"
rendered="#{MyWebPage.amt1.isRendered()}"
value="Amt: "
binding="#{MyWebPage.amt1Prompt}" >
<span class="required">*</span>
</p:outputLabel>
<p:inputText id="Amt1" maxlength="10"
validatorMessage="Input must match this pattern: -ZZZZZZZZZ9"
value="#{flowScope.amt}"
binding="#{MyWebPage.amt1}"
disabled="#{MyWebPage.isDisabledAmt1('')}"
styleClass = "numeric" >
<f:converter converterId="zero" />
<f:validateRegex pattern="^-?([0-9]{1,10})$" />
<p:clientValidator />
</p:inputText>
<p:message for="Amt1" />
</div>
The code above includes the <p:message> which displays successfully. Without this, the field error is still highlighted but no message appears.
I am using Primefaces 6.0, JSF 2.1.13 (Mojarra), and running on Tomcat 8.5.4.
Any guidance would be much appreciated.

Preset checked state of h:selectOneRadio with passthrough elements

I am trying to implement the solution described in
<h:selectOneRadio> renders table element, how to avoid this?
<div class="form-group">
<h:outputLabel styleClass="control-label"
value="#{msgClient.legalPersonality} " />
Selected value : <h:outputText value="#{msgClient['legalPersonality.' += clientBean.clientDto.legalPersonality.label]}" />
<div>
<f:metadata>
<f:viewParam name="legalPersonality" value="#{clientBean.clientDto.legalPersonality}" />
</f:metadata>
<ui:repeat var="legalPersonality" value="#{clientBean.legalPersonalities}">
<label class="radio-inline">
<input type="radio" jsf:id="legal" pt:name="legalPersonality" value="#{legalPersonality}">
<f:ajax execute="#this" render="#form" />
</input>
<h:outputText value="#{msgClient['legalPersonality.' += legalPersonality.label]}" />
</label>
</ui:repeat>
</div>
</div>
Everything seems to work fine, the selected value is correctly updated with the f:ajax component (setter is called with the correct value) BUT radio buttons are never checked. I mean it is checked when I click on it but it goes unchecked immediatly after. Even at page load, with a default value in clientDto.legalPersonality, everything is unchecked.
How it looks like : http://oi58.tinypic.com/242788g.jpg
Any help will be greatly appreciated. Thank you.
Indeed, the example in the question you found was a bit too oversimplified. It was missing the checked attribute which is necessary in order to preset the current selection on page load and/or after ajax render as in your case. In HTML, the checked state of a radio button is achieved by setting the checked attribute.
You can use <f:passThroughAttribute> to set the checked attribute, whereby you make sure that you set #{null} in unchecked case, so that it wouldn't render the checked attribute at all. It's namely a minimized attribute; even if we used checked="false", HTML would still consider it checked.
<input type="radio" jsf:id="legal" pt:name="legalPersonality" value="#{legalPersonality}">
<f:passThroughAttribute name="checked" value="#{legalPersonality eq clientBean.clientDto.legalPersonality ? 'checked' : null}" />
<f:ajax execute="#this" render="#form" />
</input>
The example in the question you found has in the meanwhile been updated. Thanks!

Tooltip with Fontawesome Icons

I want to use fontawesome for a tooltip text, but I don't know how to implement it. It worked with a overlay Panel but I want to use the <p:tooltip> tag.
I use primefaces 4.0 and jsf 2.1
Here is the Code with the tooltip
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<p:graphicImage id="grap" class="fa fa-question-circle fa-2x"/>
<p:tooltip for="grap" value="Some Help" showEffect="fade" />
If I use the following it works
<h:panelGroup id="mail" class="fa fa-question-circle fa-2x" />
<p:overlayPanel for="mail" showEvent="mouseover" hideEvent="mouseout" hideEffect="fade">
<p:panel>
TEXTTEXTTEXT
</p:panel>
</p:overlayPanel>
Maybe this is what you are looking for. It works on Primefaces 6.0 and JSF 2.3.0.
<p:outputLabel id ="idEmptyLabel">
<i class="fa fa-question-circle fa-2x"/>
</p:outputLabel>
<p:tooltip for="idEmptyLabel" value="It works!" />
#Dylan Law's solution will definitely work.
However, if you do not always want to wrap your standard HTML elements such as <i>, <span>, <img> and <div> you can follow this strategy:
Define the following line in a template or a file:
<p:tooltip globalSelector="a,:input,:button,span,img,i,div" />
globalSelector is under the hood a jQuery selector, that defaults to a,:input,:button. Hence, I also added these also to my custom selector.
Now you you can simply write for example:
<i class="fas fa-info-circle" title="This will be the content of the tooltip">
Here you can read more about Global Tooltips:
https://primefaces.github.io/primefaces/8_0/#/components/tooltip?id=global-tooltip

ui:repeat is not rendered

I wrote a web program in the Netbeans IDE 7.1.2 in java server faces
and I have a problem with ui:repeat tag
<h:form id="arrangmentForm" rendered="false" >
<ui:repeat value="#{arrangement.arItemArrangment}" var="itemArrangment" >
<h:panelGrid style="position: absolute;top:#{itemArrangment.place.top / 10}px;left: #{itemArrangment.place.left/10}px;height: 30px;width:30px">
<h:commandLink id="linkItemArrangment" actionListener="#{arrangement.showbtnArrangement()}" style="text-decoration: none;color: black">
<p:graphicImage value="../images/#{itemArrangment.place.objType}.jpg" />
<h:outputText value="#{itemArrangment.place.objTitle}" />
<br />
<h:outputText value="#{itemArrangment.gethOrder().gethOrdersTotal()}" />
<br />
<f:setPropertyActionListener value="#{itemArrangment}" target="#{arrangement.selectPlace}" />
</h:commandLink>
</h:panelGrid>
</ui:repeat>
</h:form>
This code works fine in Netbeans.
When I tried to deploy my program to a web server (Tomcat7, Glassfish open source and enterprise edition) the ui tag didn't work, though, and in my web browser I just receive the form tag and nothing else.
You have rendered="false" in your h:form so nothing is display. It's the normal behavior.
If you want to display the content of the form remove the rendered="false"

Resources