I have a Java Web Application (WAR) in Weblogic 10.3.0:
JSF 2.0
Primefaces 3.5
jboss-el-2.0.0.GA.jar (If i use el-api-2.2.jar and el-impl-2.2.jar is the same)
validation-api-1.1.0.Final.jar
Eclipselink (JPA 2.1)
hibernate-validator-4.2.0.Final.jar
JSTL 1.1
Java EE 5
I have a <h:form/> inside a <p:dialog/> to edit/create entities and persist them to the Database.
My problem is the <p:commandButton/> doesn't invoke the actionListener when the values are set directly to the entity's properties. For example, here is my code:
<h:form>
<p:outputLabel value="Name:" for="name" />
<p:inputText id="name" value="#{Servidores.selectedEntity.name}" title="Name" />
<p:outputLabel value="IP:" for="ip" />
<p:inputText id="ip" value="#{Servidores.selectedEntity.ip}" title="IP" />
<p:commandButton value="Submit" oncomplete="appEditingDialog.hide();" actionListener="#{Servers.processEntityAndRefresh()}"/>
</h:form>
But if i set values to a simple String variable declared in the bean and not in the entity it works. Like this:
<p:inputText id="name" value="#{Servidores.stringInMyBean}" title="Name" />
I thought it was a validation problem but if i put this form outside the Dialog it works.
What could be the problem and the solution here ? I've seen people putting the properties directly in the #ManagedBean but, wow, I can't mix the Model and the Controller.
Thanks.
This is how i solve this and other problems i had:
In my Template.xhtml i made sure the declarations are like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
because instead of "java.sun.com" i had something with "xmlns.com" (something like that, i dont know why). My problems with the EL were solved but a new problem came out: Everything was big: font, components, etc.
I had to fix everything with CSS but i didn't like that way, it was unnaceptable! Plus, Dialogs were showing in the bottom of the page. So after trying some things, i fixed it making the Template Clients using HTML instead of just <ui:composition/>. So i could delete all the "forced changes" i made to my CSS files (I really don't know why that behavior with just <ui:composition/> ) .
But wait! , in a part of a page the problems came back! Calling methods/properties in the ManagedBean from a Datatable wasn't working properly again and it was because of the Primefaces <p:Dashboard/> tag called "Disabled" which i set it to true to not let the user move the panels. My datatable was inside of a Panel which was inside of a Dashboard, after setting it to false everything was working properly (I guess it is a primefaces bug).
Then, i just move from Primefaces 3.5 to 4.0 and used JSTL 1.2 instead of 1.1
But yeah, the main problem was because of the wrong links when declaring xmlns, xmlns:h, xmlns:f, etc.
Related
I've been facing some problems using JSF with AJAX to render a table without reloading the whole page every time I submit a form.
When I first run the server, my database is empty, so the page is supposed to show only a form to add books. When user submits the form, a fieldset whith all books is supposed to be rendered. I don't want this fieldset to be shown when database is empty.
This is a simple version of my code (it is just a small form and a table to be refreshed using AJAX):
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
<h:graphicImage library="img" name="caelum-logo.png"/>
<h:form>
<p>Book Title:</p>
<h:inputText id="title" value="#{livroBean.livro.titulo}" />
<h:commandButton value="Add book" action="#{livroBean.addFirstBook}">
<f:ajax execute="#form" render="title :addedBooksTable" />
</h:commandButton>
</h:form>
<div id="addedBooksTable">
<p:fieldset rendered="#{livroBean.numberOfBooks > 0}">
<h:dataTable value="#{livroBean.allBooks}" var="book">
<h:column>
<h:outputText value="#{book.titulo}" />
</h:column>
</h:dataTable>
</p:fieldset>
</div>
</h:body>
</html>
And i wanna focus on this part:
<h:commandButton value="Add book" action="#{livroBean.addFirstBook}">
<f:ajax execute="#form" render="title :addedBooksTable" />
</h:commandButton>
The fieldset and the table inside it are supposed to be hidden when there's no book added to the database, that's why i used <p:fieldset rendered="#{livroBean.numberOfBooks > 0}">. But I want it to be rendered after I click the commandButton, even if there's nothing at the inputText.
Here's what's happening when I test the code:
if I test the code just as it is with an empty database, the inputText is refreshed (it "erases" what were typed before the submisssion) when I click on the commandButton, but the fieldset is not. I know that the fieldset has a rendered="#{livroBean.numberOfBooks > 0}" and the inputText does not, but the method getNumberOfBooks is called everytime i click the commandButton, that's why I don't get it...
if I change the f:ajax tag so it ends up like this <f:ajax execute="#form" onevent="click" render="title :addedBooksTable" />, it solves the problem, but i can realize the screen flashing for a while when I click the commandButton. As far as I know, one of the uses of AJAX is that we don't want the screen flashing when a request is made.
Why is the fieldset rendered only when I use onevent="click"? Should I consider the flashing something normal? Is there a more elegant solution for that?
Thanks!
You can't ajax-update a plain HTML element. You can only ajax-update a JSF component. Simple reason is that the target must be resolveable by UIViewRoot#findComponent(), so that JSF can find it in the component tree and render the updated HTML into the Ajax response.
Replace
<div id="addedBooksTable">
by
<h:panelGroup layout="block" id="addedBooksTable">
Normally, this should have thrown an exception as described in How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar", but they removed this check in Mojarra 2.2.5 in order to support ajax-updating a specific iteration of <ui:repeat> and <h:dataTable> (this missing check will be fixed later on as that's indeed unhelpful to starters like you).
As to why adding onevent="click" appear to work, that's because it caused a JavaScript error which in turn caused the whole JavaScript/Ajax thing to break down, which in turn caused that the command button fall backs to default synchronous behavior with a full page reload (as if you aren't using <f:ajax> at all). You likely meant to use event="click" instead. The onevent attribute serves a different purpose. See also a.o. Proccess onclick function after ajax call <f:ajax>.
I want to share my experience using primefaces, f:viewParam and p:commandButton, and ask a few questions.Take a look at this page:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<f:metadata>
<f:viewParam required="true" name="id_file" value="#{bean.idFile}" />
</f:metadata>
<h:form id="tableform" prependId="false">
<p:commandButton actionListener="#{bean.myMethod())}" icon="ui-icon-search" title="View" />
</h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
</h:body>
</html>
The backing bean have a "myMethod()" method that does nothing. When you enter the page it expects the "id_file" parameter and put it in the idFile property of the backing bean. Then you click the button and the myMethod is called. Then you click again and you get an obscure validation error and myMethod is never called:
j_idt1: Validation Error: Value is required.j_idt1: Validation Error: Value is required.
First of all, remember that without p:messages you can't see this message, you have to dig the XML that primefaces send on ajax calls. Secondly, after 4 hours of debugging I've tried to change the f:viewParam like this:
<f:viewParam name="id_file" value="#{bean.idFile}" />
without "required": magically everything start working, I can click 1,2,3,etc and myMethod is called every time. So, the problem is that the ajax submit validate the parameter specified with f:viewParam, it sounds silly to me, but ok, I can live with it.
My questions are:
why this validation error doesn't appear the first time button is clicked? If you look at the ajax POSTs they are identical
it is supposed to be ok to validate the view parameters (that, in my idea, belongs to the view) on a partial ajax call?
is there a way to tell to primefaces not to validate on particular ajax request (process="#this" does not resolve)?
Thank you, I hope that my experience will allow you to avoid spending hours doing debugging!
The viewParam is a UIComponent. That means it's semantically no different from a <h:commandButton/> or a <h:inputText/> and it's liable to go thru every prescribed JSF request processing lifecycle phase, up to and including validation and conversion. In fact, the tag itself causes any given view to go into the full processing of any given page, just by being there
The <p:commandButton/> is going to do a postback, meaning, it's going to be re-requesting the same view, using a POST. So to solve your current problem, you need to base your required condition on that fact:
<f:viewParam required="#{!facesContext.postback}" name="id_file" value="{bean.idFile}"/>
What you get from the new condition is that the parameter will be required only on the first request. Subsequent postbacks will not trigger the condition. Just be sure you don't have any logic (maybe in a #PostConstruct that's built around that expectation
I have a number of composite components in my application, and from time to time, I need to reference those components as a whole. By default, composite components don't generate any additional mark up over their child components, so if you give a composite component an id attribute, it simply appends that id to the generated ids of the child components. I would like to reference the whole component by id (i.e. for use in jquery manipulation). JSF components do not allow EL in the id attribute, so to accomplish this, I have so far been wrapping my composite components in plain html divs as follows:
<ui:component ...
xmlns:cc="http://java.sun.com/jsf/composite"
...>
<cc:interface componentType="myComponent">
<cc:attribute name="process" type="java.lang.String" required="false" default="#form"/>
<cc:attribute name="update" type="java.lang.String" required="false" default="#form"/>
...
</cc:interface>
<cc:implementation>
<h:outputStylesheet name="myComponent.css" library="css/components" target="head"/>
<div id="#{cc.clientId}" class="myComponent #{cc.attrs.styleClass}">
... composite component implementation here ...
<p:dataTable id="note-history" styleClass="entity-notes-history" value="#{cc.notes}" var="note" paginator="true" paginatorAlwaysVisible="false"
paginatorPosition="bottom" rows="5" rendered="#{not empty cc.notes}" rowStyleClass="#{note.noteBaseType.word}">
...
<p:column rendered="#{note.noteBaseType == 'Warning' and not cc.attrs.displayOnly}" style="width: 8em;">
<p:commandButton actionListener="#{cc.cancelSeverity(note.id)}" process="#{cc.attrs.process}" update="#{cc.attrs.update} update="note-history" value="Reduce Severity"/>
</p:column>
</p:dataTable>
</div>
</cc:implementation>
And the component would be used as follows:
....
<ppa:myComponent id="myId" update="myId" />
....
Unfortunately, if I have any ajax (specifically p:ajax from primefaces) calls within the composite component, when I try to have them update the composite component by ID I get a "Cannot find component with identifier" exception. Is there any way to get JSF to auto generate a valid component and container for my composite components? I would really hate to have to generate two containing divs or spans (i.e. adding an h:panelGroup around the plain html div) just to get ajax working. Alternatively, is there a way to force JSF to allow dynamic ids on components?
Edit:
In response to BallusC's answer, I've edited the example code to be more clear in how the component is built and used, since given his answer it's entirely possible I'm just doing something that isn't allowed.
when I try to have them update the composite component by ID I get a "Cannot find component with identifier" exception
It's unfortunate that you didn't show how exactly you did that, because it should work just fine, provided that you used the composite's client ID in the update which is enclosed in the composite itself:
<f:ajax render=":#{cc.clientId}" />
Or, that you just used composite's own ID in the update which is performed outside the composite inside the same naming container parent:
<f:ajax render="myId" />
Most likely you did it the wrong way. E.g. you forgot the : prefix, or you used #{cc.id} instead of #{cc.clientId}, etc. The above has as far as I know always worked in all Mojarra 2.x versions released so far.
See also:
Referring composite component ID in f:ajax render
Is it possible to update non-JSF components (plain HTML) with JSF ajax?
Alternatively, is there a way to force JSF to allow dynamic ids on components?
You can just use EL in id attribute, provided that it's available during view build time and thus not only during view render time. See also JSTL in JSF2 Facelets... makes sense? for related background information.
Update as per your question update wherein you finally show how you tried to achieve it;
With
<ppa:myComponent id="myId" update="myId" />
and
<p:commandButton ... update="#{cc.attrs.update}" />
you're effectively ultimately doing a
<p:commandButton ... update="myId" />
which is basically looking for a component with ID myId inside the context of the composite itself! It would only have effect on e.g. a <h:outputText id="myID"> next to the <p:commandButton> inside the same <cc:implementation>.
The functional requirement is understood, but the solution is not so nice. Your closest bet is (ab)using #this and conditionally checking for that in update:
<ppa:myComponent id="myId" update="#this" />
with something like this
<p:commandButton ... update="#{cc.attrs.update == '#this' ? ':'.concat(cc.clientId) : cc.attrs.update}" />
h:inputText is not working in the latest JSF2.2 with multiple forms.
I have 2 forms
form1 have:
one command button and one input text
form2 has:
one input text and one output label
on click of command button in form1, i am rendering the form2(both outputlabel and input text).
but only output label is rendered properly with correct values (corresponding getter method gets called and value is displaying) but the input text is not calling the corresponding getter method hence showing null.
Note:
we noticed this issue only if we use multiple forms, within single form its working fine.
also it worked fine in JSF2.0
Version used:
JSF api - 2.2 (com.sun.faces)
JSF impl - 2.2 (com.sun.faces)
let me know if anyone have solution to handle this.
the forms are not nested and both the beans are in View scope.
<h:form id="form1">
<a4j:commandLink id="actionEdit" title="Click" action="#{bean.action}"
render="paymentInstructionDetail" styleClass="iconLarge edit" />
</h:form>
<h:form id="form2">
<a4j:outputPanel ajaxRendered="true" id="paymentInstructionDetail">
<h:inputText value="#{bean1.amount}" id="sample"/>
<h:outputLabel value="#{bean1.amount}" id="sampleLabel"/>
</a4j:outputPanel>
</h:form>
after the action is completed in form1, the form2 outputlabel is displaying the value properly(getter method is called) but the inputtext is not displaying the value (getter method is not getting called)
Hi john, to test whether the above issue is working fine without richfaces, i created a standalone project and create a xhtml as below
<h:body>
<h2>This is start.xhtml</h2>
<h:form>
<h:commandButton action="#{myBean.testAction}" value="Payment" >
<f:ajax render="sample"></f:ajax>
</h:commandButton>
</h:form>
<h:form id="test12" prependId="false">
<h:inputText value="#{myBean.orderQty}" id="sample"/>
</h:form>
</h:body>
but i am getting unknown id for sample, is there any way to check with multiple forms?
I am not familiar with richfaces (a4j), but try the following:
-If you don't use form prependId=false, then you should refer to your (other form) id's as: render=":form2:paymentInstructionDetail" styleClass="iconLarge edit" />
On another note:
-I don't think that richfaces is JSF2.2 ready yet, so expect problems
-Actually, JSF 2.2 has quite a few bugs of it's own
What I would like is something like following:
<f:verbatim>
<%
out.println("<span id='test'>Data</span>");
%>
</f:verbatim>
I would like the out.println code to be rerun by ajax. However, when I set that form to dirty, the out.println is not rerun.
Is there a way around this, short of using a custom tag?
What I need is a tag, like
<f:writeAsHTML value="#{bean.HTMLproducer}"/>
Is there already a tag like that in myfaces or basic JSF?
Just put it in f:verbatim without that scriptlet
<f:verbatim>
<span id="test">Data</span>
</f:verbatim>
Or just print it plain (only possible on JSF 1.2 or newer)
<span id="test">Data</span>
Or use h:outputText since it renders a <span> anyway
<h:outputText id="test" value="Data" />
Or use h:outputText escape="false" if the HTML comes from a bean property
<h:outputText value="#{bean.html}" escape="false" />
As per your functional requirement which reads like
I would like the out.println code to be rerun by ajax
The problem needs to be solved elsewhere. Are you using JSF 1.x or 2.x? Regardless, you should utilize JSF-provided Ajax components like RichFaces' Ajax4jsf components or JSF 2.0's <f:ajax> components which offers a render attribute to trigger re-rendering of JSF components.