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
Related
Sorry for the simple question. I am learning to use JSF 2.2 to create a form and trying to keep it close to plain HTML5 as possible. I have an ui:repeat generated list that goes like this:
<ul id="nameLst">
<ui:repeat var="d" value="#{controller.names}" varStatus="status">
<li>
<input
jsf:id="nameTxt"
jsf:binding="#{nameTxt}"
jsf:value="#{d}"
type="hidden" />#{d}
</li>
</ui:repeat>
</ul>
It gets rendered like this:
<ul id="nameLst">
<li>
<input id="j_idt14:0:nameTxt" name="j_idt14:0:nameTxt" value="Name1" type="hidden">
Name1
</li>
<li>
<input id="j_idt14:1:nameTxt" name="j_idt14:1:nameTxt" value="Name2" type="hidden">
Name2
</li>
</ul>
Now, I am trying to add names using JavaScript only to this list. Problem is, how can I control this generated id, so I can use it in JavaScript. And mainly, if the list starts empty, how do I generate this id so it can be correctly posted back to the managed bean.
how can I control this generated id, so I can use it in JavaScript
Just give it a fixed id.
<ui:repeat id="names" ...>
Alternatively, use jsfc attribute to turn <ul> into an <ui:repeat>.
<ul id="names" jsfc="ui:repeat" value="#{bean.names}" var="name">
<li>
<input jsf:id="name" type="hidden" value="#{name}" />
</li>
</ul>
And mainly, if the list starts empty, how do I generate this id so it can be correctly posted back to the managed bean
Use JSF for this instead of JS. An example can be found here: How to dynamically add JSF components
See also:
How can I know the id of a JSF component so I can use in Javascript
JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used
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
my left menu page (commonMenu.xhtml) with commandButton:
<body>
<h:form>
<ui:composition>
<ul>
<li>foo </li>
<li><p:commandButton value="foo"
action="pages/foo" /></li>
<li>Menu 3</li>
</ul>
</ui:composition>
</h:form>
</body>
</html>
directory tree look like:
webapp
----->pages
---------->foo.xhtml
---------->templates
---------------->commonMenu.xhtml
Problem:
href is working perfectly, however commandButton is not working at all. What can be a reason?
i tried diffrent strings in action: foo, project/pages/foo, pages/foo etc...
i read somewhere that for simple navigation i need to use <p:button> not <p:commandButton>
and i used that with short pathes like just foo and it works
so simply i change commandButton part for:
<p:button value="foo" outcome="foo" />
anyway ty
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'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