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
Related
This question already has answers here:
Highlighting current page as active link in included navigation menu
(3 answers)
Closed 6 years ago.
I'm using <ui:composition, but was wondering if there would be a way for me to edit a small part of one of my layout components without doing <ui:define> on every individual page. In my case I am creating a sidebar, and just want to change the active class of an li.
commonlayout.xhtml
...
<h:body>
<ui:insert name="sidebar">
<ui:include src="commonsidebar.xhtml"/>
</ui:insert>
</h:body>
...
commonsidebar.xhtml
...
<ui:composition>
<div id="sidebar">
<a href="#" class="visible-phone">
<i class="icon icon-home"></i> Dashboard
</a>
<ul>
<li class="active">
<a href="index.xhtml">
<i class="icon icon-home"></i> <span>Dashboard</span>
</a>
</li>
<li>
<a href="seconpage.xhtml">
<i class="icon icon-def"></i> <span>Second Page</span>
</a>
</li>
</ul>
<div id="sidebar">
</ui:composition>
...
secondpage.xhtml
...
<ui:composition template="commonlayout.xhtml">
?
</ui:composition>
...
I would like to keep my sidebar the same in my second page, but just change the set the correct <li> to active, and as far as I am aware, <ui:define name="sidebar"> would make me rewrite the entire thing. Is there any way in JSF for me to do this?
Thanks in advance!
Try something like this:
<li class="#{view.viewId eq '/seconpage.xhtml' ? 'active' : ''}">
Highlighting current page as active link in included navigation menu
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
I'm trying to combine JSF2.2 with bootstrap 3.2.0 components and got stuck when trying to use the button group with a dynamically generated list of labels. I traced the problem down to the ui:repeat tag being included in the generated html and thus preventing the correct css styling of bootstrap.
The xhtml code is:
<div class="btn-group">
<ui:repeat var="role" value="#{editUserView.allRoles}">
<button class="btn btn-success" type="button">#{role.name}</button>
</ui:repeat>
</div>
and the out put html is this:
<div class="btn-group">
<ui:repeat><button class="btn btn-success" type="button">Label1</button></ui:repeat>
<ui:repeat><button class="btn btn-success" type="button">Label2</button></ui:repeat>
<ui:repeat><button class="btn btn-success" type="button">Label3</button></ui:repeat>
<ui:repeat><button class="btn btn-success" type="button">Label4</button></ui:repeat>
<ui:repeat><button class="btn btn-success" type="button">Label5</button></ui:repeat>
</div>
Is there a way to prevent the JSF tag from the xmlns:ui="http://xmlns.jcp.org/jsf/facelets namespace being printed in the generated html WITHOUT having to write custom components?
Update
Just for curiosity, the buttons are being displayed as normal buttons (with spacing in between them) and not as desired in the group button all together style.
This is recognizable as Mojarra issue 2900 which was fixed in 2.2.2. It's currently already at 2.2.8. So, just upgrading Mojarra to latest version should do.
That said, the <ui:repeat> is not a taghandler, but a true UI component. I fixed your question title. The <c:forEach> is a true taghandler. See also JSTL in JSF2 Facelets... makes sense? for the difference.
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 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.