I have created a JSF 2 page which uses Facelets to define the structure of the page.
<div class="page">
<div class="content">
<ui:insert name="content">
</ui:insert>
</div>
<div class="footer">
<ui:include src="footer.xhtml" />
</div>
</div>
This is footer.xhtml
<h:commandButton value="Link Page 1" action="page1.xhtml" />
<h:commandButton value="Link Page 2" action="page2.xhtml" />
As you can see, in the footer.xhtml I have some buttons which I use to move between pages.
Unfortunately navigation does not work when buttons are placed into the footer.xhtml page. On the other hand if they are placed in the main div (content) they work correctly.
Is there a way to let them work in the footer too ?
P.s. My environment Java 1.6 on JBoss application server 7
Thanks
Linda
For pure navigation you should use h:button instead of h:commandButton. The latter indeed needs a surrounding form as stated by Kris.
If you change your buttons as follows, they should work regardless where you place them on the page:
<h:button value="Link Page 1" outcome="page1" />
<h:button value="Link Page 2" outcome="page2" />
The .xhtml suffix is appended by JSF.
Your commandButton/commandLink elements wont' work if you don't put them into a form element <h:form></h:form>.
Remember to add the proper namespace to your <ui:composition> element 'xmlns:h="http://java.sun.com/jsf/html'
Related
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 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'm trying to post dynamic HTML to a jsf page, and it's escaping it, even though I say escape="false" in the output text tag.
I'm using primefaces 3.4.2
Tomcat 7.0.22.0
JSF page:
<p:tabView id="editableArticleTabs" dynamic="true" cache="true" rendered="#{articleBean.allowEdit}">
<p:tab id="readArticleTab" title="Read">
<div class="article">
<h1 class="title">#{articleBean.article.name}</h1>
<div class="byline"> by #{articleBean.article.creator.username} </div>
<blockquote class="summary">
<h2>Summary:</h2>
<h:outputText value="#{articleBean.article.summary}" escape="false" />
</blockquote>
<div class="textBody">
<p><h:outputText value="#{articleBean.article.body}" escape="false" /></p>
</div>
</div>
</p:tab>
</p:tabView>
What am I doing wrong? It's escaping everything.
Also, I print the text out in a System.out.printline in the getter method so I know for sure it's not stored in the database as escaped.
Edit:
Ok, here's the kicker. I try taking the text out of the tabs and it works. But I really need it to work inside the tabs.
Final edit:
It was my bad. I had two copies of the code, one rendered within a tab, the other without it. They had conditional rendering depending on the "editability". I set the escape flag in one and not he other. Major fail. Sorry 'bout that folks.
I'm working with jsf2 and want to use the ajax-functionality of it. Problem: I've already seen some ajax refresh things. But nothing to refresh a whole div...
I have a xhtml page with data from my bean, and i don't really want to refresh all fields of it, it would be easier to refresh the whole ui:include...
does anybody knows a solution? Or do I have to refresh all fields manually?
best regards
Just put them in some container component with an ID and use it in render attribute of f:ajax.
<h:form>
<h:commandButton value="submit" action="#{bean.submit}">
<f:ajax render=":foo" />
</h:commandButton>
</h:form>
<h:panelGroup id="foo" layout="block">
<ui:include src="include.xhtml" />
</h:panelGroup>
Note that <h:panelGroup layout="block"> renders a <div>. If you omit the layout attribute, it defaults to <span> (only whenever there are any attributes which needs to be rendered to HTML, like id).
Okay BalusC, but I'm still having a problem with the includes and ajax.
my index.xhtml includes a search.xhtml and a results.xhtml
the ajax-part is in search.xhtml and the toRender-id is in results.xhtml...
so at rendering the jsf-tags there's the problem that there's no toRender-Id at this time...
EDIT:
Okay the problem was not the arrangement of the includes, it was that the ajax-parts must be in the same form tag like this:
<h:form>
<div id="search" class="search">
<ui:insert name="search" >
<ui:include src="search.xhtml" />
</ui:insert>
</div>
<h:panelGroup id="ajaxResult" layout="block">
<ui:insert name="searchResults" >
<ui:include src="searchResults.xhtml" />
</ui:insert>
</h:panelGroup>
</h:form>
search contains f:ajax tag, ajaxResult is toRenderId
best regards, emre
i've got this jsf code
<f:view>
<rich:page pageTitle="My Page" markupType="xhtml">
...
<rich:panel id="content">
<a4j:include viewId="#{MyBacking.viewId}" />
</rich:panel>
and after trying a number of different ways, I've still not managed to place the following correctly in my code:
<rich:effect for="window" event="onload" type="BlindDown" params="targetId:'<different tags depending on where I place this tag>',duration:2.8" />
My aim is to have the changed element in the a4j:included part of the page change but with the effect in use. I've tried putting it in my included page, or just after the f:view and rich:page tags in the calling page but to no avail. The demo doesn't take includes into account so I'm a bit stuck. Thanks
Just target the a panel inside the rich:panel: targetId:'contentPanel'
and then
<rich:panel ..>
<h:panelGroup layout="block" id="contentPanel">
<a4j:include viewId="#{MyBacking.viewId}">
<ui:param name="targetIdParam" value="putYourTargetIdHere" />
</a4j:include>
<h:panelGroup>
</rich:panel>