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.
Related
I am new to JSF and I am currently building a web-auction type of application, based on it. I have also used multiple elements from Bootsfaces. What I would like to do is have an inputText where bidders can type their bids and then press a button that will trigger a Bootsfaces modal. Inside the modal, the bidder will have to confirm that he actually wants to bid, by pressing a commandButton that will eventually "submit" his bid. In order for this to work (if I have understood correctly how JSF works), I need the inputText and the commandButton inside the same h:form element. The only problem is that, whenever I put the code of the modal inside the form, the modal doesn't show up when I press the button that triggers it. My code is the following:
<h:form>
<b:inputText class="bid1" value="#{detailedViewBean.current}" placeholder="Type the amount you would like to bid..." style="width: 90%" onfocus="enableButton('atrigger1')" onblur="bidAmount(this.value, '#{detailedViewBean.previous}')"> <!--current highest bid-->
<f:facet name="prepend">
<h:outputText value="$" />
</f:facet>
<f:facet name="append">
<b:buttonGroup>
<a id="atrigger1" class="btn btn-primary" href="#amodal1" data-toggle="modal">Bid!</a>
</b:buttonGroup>
</f:facet>
</b:inputText>
<b:modal id="amodal1" title="Warning!" styleClass="modalPseudoClass">
<p id="amodal1body"> Are you sure ?</p>
<f:facet name="footer">
<b:button value="Close" dismiss="modal" onclick="return false;"/>
<b:commandButton value="Yes, submit my bid!" id="modalbidbutton" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#amodal2"/>
</f:facet>
</b:modal>
<h:form>
Does anyone know why this might happen or how I can correct it?
Moving the <b:modal /> into a form modifies its id. That's an annoying property of the JSF framework: it sees to it that ids are always unique - and of of the measures to achieve that goal is to prepend the form's id to the id of <b:modal >. Most of the time, this works just great, but sometimes you need the HTML id. Your button uses a jQuery expression, so this is one of those times. Adding insult to injury, JSF uses the colon as a separator, and jQuery doesn't cope well with the colon.
Cutting a long story short, I suggest to use the CSS class of the modal dialog instead of the id. You already gave it a pseudo CSS class. This class doesn't bear any layout information. Instead, you can use it in the button:
<a id="atrigger1" class="btn btn-primary disabled"
href=".modalPseudoClass" data-toggle="modal">Bid!</a>
TL;DR: If you run into trouble with id, replace your jQuery expression ("#id") with a CSS pseudo class expression (".pseudoClass").
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'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