I am new to JSF, I having the difficulty to implement the partial refresh/rendering in my JSF 2.2, I'm using .xhtml page, I've searched through Internet for solutions but won't work. Was my practice wrong?
Here is my code:
<h:form>
<div class="container">
<div class="section">
<!-- Icon Section -->
<h:panelGroup id="result" styleClass="row">
<ui:repeat var="project" value="#{homeBean.displayProjectList}">
<div class="col s12 m6 l4">
<div class="card">
<div class="card-image">
<img src="resources/materialize/background1.jpg" />
<span class="card-title">#{project.title}</span>
</div>
<div class="card-content">
<p>#{project.summary}</p>
</div>
<div class="card-action">
More
</div>
</div>
</div>
</ui:repeat>
</h:panelGroup>
<div class="row center">
<h:commandButton styleClass="btn-large yellow lighten-2 black-text" value="SHOW MORE" actionListener="#{homeBean.showMore()}" >
<f:ajax render="result" />
</h:commandButton>
</div>
</div>
</div>
</h:form>
When the command button is pressed, I wish to refresh only the section covered in panelGroup id="result", it did update but I wish to refresh the section only instead of the entire page.
Greatly appreciate for your time and effort.
This looks good to me, should work. Are you sure the entire page is getting refreshed?
The <f:ajax> should do the trick.
I found the answer, for my case I am using JSF 2.2 by importing javax.faces-2.2.7.jar, I should set the following outputScript declaration in head tag
<h:outputScript library="javax.faces" name="jsf.js" target="head" />
and now works like charm.
Refer to :
Programatically adding Ajax Behaviour - “Mojarra is not defined”
remove the actionListener from h:commanButton and put listener in f:ajax and try
Related
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
I am using JSF 2.0 with a Bootstrap 3 framework. Everything seems to be working fine, but I get problems when I want to populate forms in a Bootstrap modal from a RequestScoped CDI bean. It seems to me, after debugging, that the bean is instantiated when the page the modal is in loads, and not when the modal is opened. So, when I then open the modal, the bean does not exist anymore. Here is some of my code:
This is where I open the modal
<li><span class="glyphicon glyphicon-edit"></span> Rediger bruker</li>
This is the modal content, which is on the same page. farmer is the name of bean
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Endre bruker</h4>
</div>
<div class="modal-body">
<div class="well">
<ul class="nav nav-tabs">
<li class="active">Profil</li>
<li>Passord</li>
<li>Referanseperson</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="profile">
<h:form class="form-horizontal form-group">
<fieldset>
<div class="input-group">
<h:outputText id="email" class="form-control" value="#{farmer.theFarmer.email}"/>
Is there any way to prevent the bean from constructing when the page is loaded, but instead when the actual form is rendered?
Looked around on the internet for a long time, but I cannot seem to find anything that helps me.
You can make the component lazily loaded, so that the content is retrieved on a new HTTP request. Assuming you use something like primefaces, you can use p:fragment. If you use RichFaces you can use a rich:outputPanel. Just make sure both of these are set to be rerendered.
You can also use something low level like a JSF panelGrid, and rerender that based on an AJAX call.
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.
I'm working with JSF and PrimeFaces and I am using Facelets as view technology. But I got an issue for which I can't find out the cause of the problem and the solution.
This is the Facelets template:
<div id="right">
<div id="top">
<ui:insert name="top"></ui:insert>
</div>
<div id="content">
<div id="content-top">
<ui:insert name="content-top"></ui:insert>
</div>
<div id="content-content">
<ui:insert name="content-content"></ui:insert>
</div>
</div>
</div>
I'm using <p:layout> and <p:tabView> in content-content. When I try to add for example <h:form> to content-top, then I lose content-content from my index. How is this caused and how can I solve this?
Problem resolved by removing form id
Hope that help's someone
I want to call a Servlet which exists in a different war from my war. When user clicks a button we need to call the post method of the servlet. To implement this I did see an existing example which is slightly different but works in that case.
I am using jsf, so in the jsp there is a h:form with another html form inside of it. Below is the code:
<h:form>
<div id="gform" class="column span-20 append-1">
<h:outputText value="Text." /><br/><br/>
<h:commandLink id="addPaymentButton" styleClass="button" onclick='autorenew();return false;'> <span><h:outputText value="Payment Option"/></span> </h:commandLink>
<a id="noThanksButton" href="#"><span><h:outputText value="No Thanks"/></span></a><br/><br/><br/>
<h:outputText style="color:grey" value="Some text" />
<div> </div>
</div>
<form id="hiddenSubmit" method="post" action="https://localhost.myapp.com/myapp/LoginRouter" >
<input type="hidden" name="redirectUrl" value="/myapp/customers/addNewSavedCCInfo.faces"/>
<input type="hidden" name="jump_message" value="IAmJumpingToCC"/>
<input type="hidden" name="jump_url" value="/premiumServices/myPage.htm"/>
<input id="hiddenSubmitButton" type="submit" name="submit" style="display: none" value='' />
</form>
</h:form>
<script language="javascript">
function autorenew(){
window.alert('In js fnt');
document.hiddenSubmit.getElementById('hiddenSubmitButton').click();
window.alert('In js fnt COMPLETE');
return false;
}
So when the button is clicked, javascript is executed which submits the form to the servlet. However I can see in firebug that the second form which I need to submit does not appear. I am not sure how I can call the post method of a servlet class in a different war. Any ideas welcome, I am really stuck!
Thanks.
As per the HTML specification it's forbidden to nest <form> elements. The (mis)behaviour is browser dependent. Some browsers will send all parameters, some browsers will send only the data of the parent form, other browsers will send nothing.
You want to have a single form here. You can perfectly replace the <h:form> by a plain vanilla HTML <form> with the desired action pointing to the servlet in question.