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
Related
This may be a bit confusing but I will try to be clear.
I have three projects. One is a registry system which stores information shared between the two applications.
Using Application 1 and Application 2 you can access the registry which is supposed to have a bread crumb back to the specific applications home page.
So far what I have is a bean which can determine which app is active and returns the appropriate url for a page requested. Problem is my UI does not accept the url.
<ui:define name="breadcrumbContent">
<h:form id="headerForm">
<ol class="breadcrumb">
<li><h:link value="#{i18n.recordList}" immediate="true"
outcome="#{breadCrumbNavigator.navigatingPage}">
<f:param name="pageToGoTo" value="faces/produceManager/index.xhtml"></f:param>
</h:link></li>
<li><h:link value="#{i18n.businessRegistry}" immediate="true"
outcome="#{breadCrumbNavigator.navigatingPage}">
</h:link></li>
</ol>
</h:form>
</ui:define>
This gives me the two errors
This link is disabled because a navigation case could not be matched.
enter code here
Unable to find matching navigation case from view ID '/produceManager/list.xhtml' for outcome '/ss/faces/index.xhtml'
In the bean I have the URL hard coded. I have tried this with and without the 'localhost:9080' prefix. I am kind of lost on this one. Anyone else do anything like this with breadcrumbs?
Turned out to be really easy!
All I had to do was define a navigation case in the faces config and use command links.
<ui:define name="breadcrumbContent">
<h:form id="headerForm">
<ol class="breadcrumb">
<li><h:commandLink value="#{i18n.recordList}" immediate="true"
action="#{breadCrumbNavigator.getNavigatingPage}">
<f:param name="pageToGoTo" value="goToDashboard"></f:param>
</h:commandLink></li>
<li><h:commandLink value="#{i18n.businessRegistry}" immediate="true"
actions="#{breadCrumbNavigator.navigatingPage}">
<f:param name="pageToGoTo" value="goToProducerManager"></f:param>
</h:commandLink></li>
</ol>
</h:form>
</ui:define>
How to show some content inside light-box of primefaces as I have to show some information about the image as no. of likes,no. of comments,and also have to provide option to post comments so on and so forth?
On xhtml page I have written this:
<p:lightBox styleClass="imagebox">
<c:forEach var="event1" items="#{event.files}" varStatus="cnt">
<h:outputLink value="#{listOfFilesForEventBean.getImage854By480ProfileUrl(event1)}" title="#{event1.location.locationName}">
<h:graphicImage value="#{listOfFilesForEventBean.getImageIconProfileUrl(event1)}"/>
</h:outputLink>
</c:forEach>
</p:lightBox>
Where files is list of image profiles that I am iterating.
And I want along with the image which is displayed on lightbox some information about the image should be displayed.
I had similar problem. If somebody is still looking for the answer here is my solution.
I did not find easy way to have some additional controls inside p:lightBox item.
Guess it assigns own JavaScript handlers to all its children and that makes a problem.
Also I had the problems with using commandButton inside ui:repeat. So I'm using my own implementation of p:lightBox and p:remoteCommand to call other actions(like post comments, delete image etc). Something like that:
<p:remoteCommand name="deleteImage" update="imagesGrid"
actionListener="#{imageBean.deleteImage}" />
<h:panelGroup id="imagesGrid">
<ui:repeat var="item" value="#{imageBean.list}">
<div class="docThumbContainer">
<div class="docPlaceholder"></div>
<div class="docThumbImage">
<h:outputLink value="/images?id=#{item.imageId}">
<h:graphicImage value="data:image/jpg;base64,#{item.thumbnail}"
alt="" />
</h:outputLink>
</div>
<div class="docThumbButtons">
<p:commandButton type="button" value="Delete"
onclick="deleteImage([{name:'imageId', value:#{item.imageId}}]);" />
</div>
</div>
</ui:repeat>
</h:panelGroup>
ImageBean:
public void deleteImage(ActionEvent event) {
ImageManager manager = getManager();
manager.deleteImage(StringUtil.parseInt(getUrlParameter("imageId"), -1));
}
Of course it is simplified replacement for p:lightBox. To show the full image in the overlay with prev/next buttons you need additional work. E.g. using p:dialog etc
I’m new in JavaServer Faces.
I have a simply form:
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">#{msgs.leavereply}</h3>
<h1>#{!forumsBean.activeWithProject}</h1>
<h:form>
<h:inputTextarea value="#{forumpostsBean.text}" style="resize:none"/>
<h:commandButton value="#{msgs.add}" action="#{forumpostsBean.addForumpost}"/>
</h:form>
</div>
By clicking command button all it’s fine, executes method forumpostsBean.addForumpost.
But when I modify code to this:
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">#{msgs.leavereply}</h3>
<h1>#{!forumsBean.activeWithProject}</h1>
<h:form>
<h:inputTextarea value="#{forumpostsBean.text}" style="resize:none" disabled="#{not forumsBean.active}"/>
<h:commandButton value="#{msgs.add}" action="#{forumpostsBean.addForumpost}" disabled="#{not forumsBean.active}"/>
</h:form>
</div>
When items not disabled, current page only have refreshed, but method forumpostsBean.addForumpost don’t executes.
In both variants, <h1>#{!forumsBean.activeWithProject}</h1> shows correct value.
You have 2 beans? one called forumpostsBean and another just forumsBean? I can't see if you've got them both but maybe its the main error? as the comment above says, maybe your logic is out of place.
You may want to use rendered="" on the button rather that just disabling it so its not part of the dom at all upon page load and then use an ajax call when you type data in your input field to do partial ajax render the div again and show it. good for testing.
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'
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>