I’m trying to add link in jsf:
<h:link value="#{msgs.addproject}" styleClass="addBtn" outcome="/ profile/addproject.xhtml" />
But in page source i get only this:
<span class="addBtn">Add project</span>
Where can be problem? Thanks!
If outcome does not evaluate to a proper link JSF renders a <span> tag instead. Check your / profile/addproject.xhtml whether it is correct(there is a space before profile).
Related
In my application after clicking to a link I want to focus to a part of a page after the page load. With static html we can do this by code parts below.
Go to Chapter 4
and the chapter 4 is defined;
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
In jsf 2 I can not find even name attribute in order to use for this purpose.
Any help will greatly be appreciated.
In JSF, the name attribute is computed based on the combination of the 'id' atribute of the jsf component and the 'id' attribute of the form. The reason for this is explained by BalusC here. So if you specify an id for a JSF component, then the name is also computed for it.
Anyways, starting HTML5 usage of name attribute for <a> tag is made obsolete instead it is recommended to use the id attribute of the nearest container. So do not rely on the name attribute.
Though you can try to focus any of these:
<h2 id="top4">This is a heading</h2> or
<h2><a id="top4">This is a heading</a></h2>
Or simply focus a container on the target page like this:
In HTML 4.01
<div id="top4">
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</div>
In HTML 5
<article id="top4">
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</article>
Now in JSF, this is how you focus the container on the target page:
When the outcome is a different page but in the same application:
<h:link id="link1" value="link1" outcome="welcome" fragment="top4" />
where the outcome is welcome.xhtml which is relative to the context root, and "top4" is the id of the container to be focused when the target page is rendered.
When linking an external site:
<h:outputLink id="link2" value="http://www.msn.com/#spotlight">link2</h:outputLink>
Within the same page:
<h:link id="link3" value="link3" fragment="top4" />
Here there is no outcome specified, so the outcome will be the same page.
See also:
http://dev.w3.org/html5/markup/a.html
h:link
h:outputLink
This question already has an answer here:
Ajax update/render does not work on a component which has rendered attribute
(1 answer)
Closed 7 years ago.
Hello I have this code to conditionally render components in my page:
<h:commandButton action="#{Bean.method()}" value="Submit">
<f:ajax execute="something" render="one two" />
</h:commandButton>
<p><h:outputFormat rendered="#{Bean.answer=='one'}" id="one" value="#{messages.one}"/></p>
<p><h:outputFormat rendered="#{Bean.answer=='two'}" id="two" value="#{messages.two}"/></p>
It gets the answer and renders the component but in order to see it on my page, I need to refresh the page. How can I fix this problem? Any suggestions?
The JSF component's rendered attribute is a server-side setting which controls whether JSF should generate the desired HTML or not.
The <f:ajax> tag's render attribute should point to a (relative) client ID of the JSF-generated HTML element which JavaScript can grab by document.getElementById() from HTML DOM tree in order to replace its contents on complete of the ajax request.
However, since you're specifying the client ID of a HTML element which is never rendered by JSF (due to rendered being false), JavaScript can't find it in the HTML DOM tree.
You need to wrap it in a container component which is always rendered and thus always available in the HTML DOM tree.
<h:commandButton action="#{Bean.method()}" value="Submit">
<f:ajax execute="something" render="messages" />
</h:commandButton>
<p>
<h:panelGroup id="messages">
<h:outputFormat rendered="#{Bean.answer=='one'}" value="#{messages.one}"/>
<h:outputFormat rendered="#{Bean.answer=='two'}" value="#{messages.two}"/>
</h:panelGroup>
</p>
Unrelated to the concrete problem, you've there a possible design mistake. Why would you not just create a #{Bean.message} property which you set with the desired message in the action method instead, so that you can just use:
<h:commandButton action="#{Bean.method()}" value="Submit">
<f:ajax execute="something" render="message" />
</h:commandButton>
<p>
<h:outputFormat id="message" value="#{Bean.message}" />
</p>
I know it's not the central point of the question, but as I had this problem many times in the past, I just post it here to help others who are in need.
For those who uses PrimeFaces there's a component in PrimeFaces Extension called Switch.
Sometimes you need to display different outputs or components depending on a value. Usually you can achieve this by using the ui:fragment tag. With the pe:switch util tag you won't have to declare ui:fragment tags, with different checks like ui:fragment rendered="#{!empty someController.value}", anymore.
style="visibility: #{questionchoose.show==false ? 'hidden' : 'visible'}"
Simple question (using JSF 2.0 and primefaces 2.2.1):
I need to create a button or link that will take me to an external url (i.e. www.facebook.com) and I need that button to look like the facebook icon instead of having the literal word. How can I do this? Thank you.
You basically want to end up with the following in the JSF-generated HTML code:
<a><img /></a>
There are several ways how to achieve this in JSF.
Just do it:
<a href="http://www.facebook.com">
<img src="#{request.contextPath}/resources/images/facebook.png" />
</a>
Use <h:graphicImage>:
<a href="http://www.facebook.com">
<h:graphicImage name="images/facebook.png" />
</a>
Eventually, with <h:outputLink>:
<h:outputLink value="http://www.facebook.com">
<h:graphicImage name="images/facebook.png" />
</h:outputLink>
What way to choose depends on whether you really need it to be a JSF component. E.g. in order to be able to grab/manupulate it in backing bean, and/or to re-render by ajax, etc.
I want to use a tag in my JSF page, but i also want to have dynamic href content. I know there is a h:commandLink in JSF but i don`t want use it for my purposes. I have t:dataTable elemet which iterates via results and shows them on my page. Here is the situation:
<t:dataList id="dataTable" value="#{manBean.fullResult}" var="element" first="0" rows="10">
<div class="photos">
<img src="myimages/IN THIS TOO.../image.jpg"
</div>
...
</t:dataList>
I have tried code like this:
<img src="myimages/#element[0]/image.jpg"
. #element[0] is an element of result list from dataTable and contains values like: 0,1,2,3... etc.
this ends witch error that i could not use #{...} in a template. What should i do? Anybody knows a good solution for this?
If you're using JSF on JSP, use <h:outputLink> and <h:graphicImage> instead of <a> and <img>.
<h:outputLink value="myimages/#{element}/image.jpg">
<h:graphicImage value="myimages/#{element}/image.jpg" />
</h:outputLink>
If you're using JSF on Facelets, you can just use EL in template text.
<a href="myimages/#{element}/image.jpg">
<img src="myimages/#{element}/image.jpg" />
</a>
When I want to hide some content in JSF, what tag is made for this purpose? There are several tags that can do the job:
<f:subview rendered="#{...condition...}" />
and
<c:when test="#{...conditon...}" />
Which is the right one to use?
in JSF, using rendered is the best approach.
Using JSTL tags like <c:when>, is not recommended at all, and even break some functunality of JSF like ViewScope annotation. Always try to use JSF tags (like ui:repeat instead of c:forEach)
<ui:remove>
Look here: http://www.jsftoolbox.com/documentation/facelets/10-TagReference/facelets-ui-remove.html
UPDATE
If you want to conditionally hide some content, you can use
<h:panelGroup rendered="#{...condition...}">
It renders as <span>, you can also add attribute layout="block"
<h:panelGroup rendered="#{...condition...}" layout="block">
to render it as <div>.