<h:inputText value="#{finder.valor}" title="Test" id="valor"/>
<h:commandButton value="Search">
<f:ajax execute="valor" render="output"/>
</h:commandButton>
<br/>
<h:outputText id="output" value="#{finder.find}"/>
I wanna do an ajax interactive finder, this finder returns a list of elements (<li>Element1</li><li>Element2</li>...)
There is any way to read that htmlTags in the outputText? Because now it appears like plain text.
Thank you.
I'm not sure whether your question is the following:
How to output HTML-tags with JSF?
Assuming it is, try this:
<h:outputText id="output" value="#{finder.find}" escape="false" />
By default JSF will escape all codes. However, you can disable it with escape="false".
Related
I am wrirting a captcha code for my jsf project. I have done almost everything but the problem is the refreshing og the image. I'd like to do it with ajax so that when I click the image, it be replaced by new one. But when I click it the image doesn't get updated. But it is updated after reloading the page.
<h:form>
<h:commandLink>
<h:graphicImage value="/captcha/test.png"
style="width:35mm;height:2cm;" />
<f:ajax render="#all" listener="#{captcha.recaptcha()}"></f:ajax>
</h:commandLink>
</h:form>
every time I click the image , it is changed on disk but not updated in the html page.
Thanx for any useful responses !
Try the following code using execute and render tags
<h:form>
<h:commandLink>
<h:graphicImage value="/captcha/test.png" style="width:35mm;height:2cm;" />
<f:ajax render="#form" execute="#form" listener="#{captcha.recaptcha()}" />
</h:commandLink>
</h:form>
You have need to use update attribute.
take a look-
<h:form id="form1">
<h:commandLink>
<h:graphicImage value="/captcha/test.png"
style="width:35mm;height:2cm;" id="img1"/>
<f:ajax render="#all" listener="#{captcha.recaptcha()}" update=":form1:img1"></f:ajax>
</h:commandLink>
</h:form>
Hope this will work
Well, I want to fire AJAX from one component but for two destinations, let some code clear out what I mean with that :
<p:growl id="growl" showDetail="true" sticky="true" />
<p:inputText value="#{someBean.someProperty}" >
<f:ajax event="blur" render="growl" listener="#{someBean.someListenerMethod}"/>
<f:ajax event="blur" render="updatable" />
</p:inputText>
<h:outputText value="#{someBean.someProperty}" id="updatable" />
So once the blur event occures, the <h:outputText> and the <p:growl> will be "AJAXed" (in primefaces tongue : updated). I had this example in mind and anther one that replaces the second <f:ajax> with an update attribute in <p:inputText>, but neither done me good.
Hopefully, you're going to know better and aid me solving this out, thanks in advance.
You can add more than one item inside the render attribute :
<f:ajax event="blur" render="growl updatable" listener="#{someBean.someListenerMethod}"/>
I want to submit (execute) values from multiple forms, not just the enclosing form. So, I want to be able to do something like this:
<h:form id="form1>
<h:inputText id="testinput1" value="#{testBean.input1}" />
</h:form>
<h:form id="form2>
<h:inputText id="testinput2" value="#{testBean.input2}" />
<h:commandButton value="Submit">
<f:ajax execute=":form1 :form2"/>
</h:commandButton>
</h:form>
How would you solve this?
What is <f:ajax execute="#all"> really supposed to do? It POSTs only the enclosing form
seems to be related, but addresses a slightly different problem and also does not solve it (or this).
Ajax or not, this is not possible with plain JSF/HTML. All input elements which needs to be processed really needs to go inside the same form.
I need to use the a4j:commandButton instead of h:commandButton because of its reRender option.
When I'm using h:commandButton, it works fine (but off course without reRender):
<h:commandButton id="save" action="#{bean.save}" value="#{conf.buttonSave}"/>
And the same thing using doesn't (action isn't started even withour reRender option):
<a4j:commandButton id="save" action="#{bean.save}" value="#{conf.buttonSave}"/>
I've also tried:
<h:commandButton id="save" action="#{bean.save}" value="#{conf.buttonSave}">
<a4j:ajax event="click" reRender="table" />
</h:commandButton>
But if I add a4j:ajax it the same problem as a4j:commandButton, action is not started.
Could you help me?
You tagged this JSF 2.0. So you're using JSF 2.0. Just use the JSF 2.0 builtin <f:ajax> tag.
<h:commandButton id="save" action="#{bean.save}" value="#{conf.buttonSave}">
<f:ajax render="table" />
</h:commandButton>
Note that <h:dataTable id="table"> must be within the same <h:form> the above way. Otherwise you need render=":table" instead. Also note that you must have a <h:head> instead of <head> in the template in order to get all necessary JavaScripts auto-included.
I want the following form to use AJAX. So the comments are shown after clicking the command button and without reloading the page. What needs to be changed, using Java Server Faces 2.0?
Functionality: This form provides an inputText to define a topic. After pressing the commandButton, it is searched for comments regarding this topic. Comments are shown in a dataTable, if there are any. Otherwise Empty is shown.
<h:form id="myForm">
<h:outputLabel value="Topic:" for="topic" />
<h:inputText id="topic" value="#{commentManager.topic}" />
<h:commandButton value="read" action="#{commentManager.findByTopic}" />
<h:panelGroup rendered="#{empty commentManager.comments}">
<h:outputText value="Empty" />
</h:panelGroup>
<h:dataTable
id="comments"
value="#{commentManager.comments}"
var="comment"
rendered="#{not empty commentManager.comments}"
>
<h:column>
<h:outputText value="#{comment.content}"/>
</h:column>
</h:dataTable>
</h:form>
You need to tell the command button to use Ajax instead. It's as simple as nesting a <f:ajax> tag inside it. You need to instruct it to submit the whole form by execute="#form" and to render the element with ID comments by render="comments".
<h:commandButton value="read" action="#{commentManager.findByTopic}">
<f:ajax execute="#form" render="comments" />
</h:commandButton>
Don't forget to ensure that you've a <h:head> instead of a <head> in the master template so that the necessary JSF ajax JavaScripts will be auto-included.
<h:head>
...
</h:head>
Also, the element with ID comments needs to be already rendered to the client side by JSF in order to be able to be updated (re-rendered) by JavaScript/Ajax again. So best is to put the <h:dataTable> in a <h:panelGroup> with that ID.
<h:panelGroup id="comments">
<h:dataTable rendered="#{not empty commentManager.comments}">
...
</h:dataTable>
</h:panelGroup>
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
You need to modify your button:
<h:commandButton value="read" action="#{commentManager.findByTopic}">
<f:ajax render="comments" />
</h:commandButton>
This means, when the button is clicked, the action is executed, and the dataTable will be rendered and updated. This only works if the backing bean is at least view-scoped.