I use JSF in implementation MyFaces 2.0
I have 2 jsf pages login.xhtml and register.xhtml.
login.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>System CollDoc</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="3" >
<h:outputLabel for="username" value="Login:"/>
<h:inputText id="username" value="#{userManager.userName}" required="true" requiredMessage="#{msg.requiredLoginMsg}">
<f:ajax event="blur" render="usernameMessage"/>
</h:inputText>
<h:message id="usernameMessage" for="username" />
<h:outputLabel for="password" value="#{msg.password}"/>
<h:inputSecret id="password" value="#{userManager.password}" required="true" requiredMessage="#{msg.requiredPassMsg}">
<f:ajax event="blur" render="passwordMessage" />
</h:inputSecret>
<h:message id="passwordMessage" for="password" />
<h:commandButton value="#{msg.login}" action="#{userManager.login}"/>
</h:panelGrid>
</h:form>
<h:messages id="messages" globalOnly="true"/>
<h:link value="#{msg.register}" outcome="register.xhtml"/>
</h:body>
</html>
register.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>System CollDoc</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="3" >
<h:outputLabel for="login" value="Login:"/>
<h:inputText id="login" value="#{registerBacking.registerLog}" required="true" requiredMessage="#{msg.requiredLoginMsg}">
<f:ajax event="blur" render="usernameMessage"/>
</h:inputText>
<h:message id="usernameMessage" for="login"/>
<h:outputLabel for="pass" value="#{msg.password}"/>
<h:inputSecret id="pass" value="#{registerBacking.registerPass}" required="true" requiredMessage="#{msg.requiredPassMsg}">
<f:ajax event="blur" render="passwordMessage" />
</h:inputSecret>
<h:message id="passwordMessage" for="pass" />
<h:commandButton value="#{msg.login}" action="#{registerBacking.register}"/>
</h:panelGrid>
</h:form>
<h:link class="link" value="#{msg.returnTxt}" outcome="/pages/login.xhtml"/>
</h:body>
</html>
I run my application and first i see login.xhtml page. I click at first inputText "username" and next at inputSecret "password" (validation for "username" is run by ajax request on blur), next at link to register page (validation for "password" is run by ajax request on blur) and i get dialog with error:
Error Message: Request failed with status 0 and reason
--------------------------------------------------------
Calling function:myfaces._impl.xhrCore._AjaxRequest
Error Name: httpError
--------------------------------------------------------
Note, this message is only sent, because project stage is development and no other error listeners are registered.
I click "ok" button and i get register.xhtml page in my web browser. At register page situation is same: I click at inputText "login", next at inputSecret "pass" (validation for "login" is run by ajax request on blur) next i click link back to login page or button to run business logic (validation for "pass" is run by ajax request on blur) and i get same error
What does error mean? What is wrong?
Edit:
I run my application again now and i don't get any error message. Why do I get this error only sometimes?
It is a result of mixing AJAX and 'regular' requests. When the button is hit two requests run in parallel: one - AJAX request for validation on blur, and second - form submit of commandButton.
JSF detects it when AJAX request is completed and reports it as a potential problem (e.g. if both requests did some actions on server side which were inter-dependent).
Probably simplest way to fix it in your case is to make the button do AJAX request as well (add f:ajax to the h:commandButton), then JSF will put the request to the queue what will guarantee that requests are made serially but not concurrently.
Related
Let's take the following example:
The composite component is as follows:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<!-- INTERFACE -->
<cc:interface>
<cc:clientBehavior name="click" targets="button" event="click"/>
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<span id="#{cc.clientId}">
<h:commandButton id="button" value="Press me">
<f:ajax event="click" listener="#{bean.helloFromComposite()}"/>
</h:commandButton>
</span>
</cc:implementation>
</html>
And the using page is as follows:
<h:form id="form">
<my:button id="my-button">
<f:ajax event="click" listener="#{bean.HelloFromPage()}"/>
</my:button>
</h:form>
Then, when I click on the button the bean logs:
Hello from composite
Hello from page
Hello from composite
Hello from page
Reproduced on Glassfish 4.1.1 with Omnifaces 2.5.1 and Primefaces 6.0.
If I change my using page as follows, then the problem disappears:
<h:form id="form">
<my:button id="my-button">
<f:ajax event="click" listener="#{bean.HelloFromPage()}" execute="#none"/>
</my:button>
</h:form>
When I click on the button the bean now logs:
Hello from composite
Hello from page
I have two questions:
Is it a known behavior?
Is the sequence "Hello from composite", "Hello from page" by design? It's fine by me, as in my opinion the ajax behavior inside the composite is more specific (and should be executed first) than the ajax behavior specified in the using page.
Edit:
I can reproduce the problem in a very simple way, as follows:
<h:form>
<h:commandButton>
<f:ajax event="click" listener="#{bean.helloOne()}"/>
<f:ajax event="click" listener="#{bean.helloTwo()}"/>
</h:commandButton>
</h:form>
Solved by adding an execute #none attribute in the second AJAX call:
<h:form>
<h:commandButton>
<f:ajax event="click" listener="#{bean.helloOne()}"/>
<f:ajax event="click" listener="#{bean.helloTwo()}" execute="#none"/>
</h:commandButton>
</h:form>
Could there be a confusion between the button is 'clicked' and the button is 'executed'?
I have the following problem:
I have a button that should invoke a method, but the page should't get refreshed (I display a dialog based on bootstrap modal after clicking on the button and it vanishes otherwise). Therefore I use ajax to say that nothing should get rendered after clicking on the button.
I already used applied it before and it worked. But in the recent version of my code the method isn't invoked anymore as long as I use ajax. If I remove the ajax part the method is invoked as it should be, but the page gets refreshed and I don't want that.
My code:
<h:form>
<ui:fragment rendered="#{bean.condition1}">
<ui:include src="facelet1.xhtml" />
</ui:fragment>
<ui:fragment rendered="#{bean.condition2}">
<ui:include src="facelet2.xhtml" />
</ui:fragment>
<h:commandButton value="Save" action="bean.method">
<f:ajax execute="#form" render="#none"/>
</h:commandButton>
<h:form>
Before I had it like this and it worked:
<h:form>
<ui:include src="bean.faceletPath" />
<h:commandButton value="Save" action="bean.method">
<f:ajax execute="#form" render="#none"/>
</h:commandButton>
<h:form>
Thanks all,
/metalhamster
Edit:
facelet1.xhtml:
<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:f="http://java.sun.com/jsf/core">
<h:body>
<ui:composition>
<h:panelGrid columns="2">
<h:outputText value="Name:">
<h:inputText value="bean.name">
<h:outputText value="Value:">
<h:inputText value="bean.value">
</h:panelGrid>
</ui:composition>
</h:body>
</html>
facelet2.xhtml:
<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:f="http://java.sun.com/jsf/core">
<h:body>
<ui:composition>
<h:panelGrid columns="2">
<h:outputText value="Name:">
<h:inputText value="bean.name">
<h:outputText value="Text:">
<h:inputText value="bean.text">
</h:panelGrid>
</ui:composition>
</h:body>
</html>
I have spring integrated with JSF and I am facing a strange behavior:
I hit the command button the action method in the managed bean is hit successfully (I removed it in the below example).
The Ajax update works perfect and the form is updated.
I hit another button the action method now in the managed bean isn't hit.
The panel is restored to the initial view and it freezes on this view.
I can't get the form updated except if I refresh the page and these steps are repeated.
DealerInfo.xhtml:
<?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">
<ui:composition template="/WEB-INF/templates/default.xhtml">
<ui:define name="content">
<h:form id="toolBarForm">
<p:toolbar style="margin-bottom:5px;">
<p:toolbarGroup align="right">
<p:commandButton value="Add"
update=":toolBarForm" icon="ui-icon-plusthick" />
</p:toolbarGroup>
</p:toolbar>
<p:messages id="dealerInfoMessages" />
<ui:include src="/pages/dealers/DealerMainInfo.xhtml" />
</h:form>
</ui:define>
</ui:composition>
</html>
pages/dealers/DealerMainInfo.xhtml
<?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">
<ui:composition>
<p:panel id="dealerMainInfoPanel" header="Dealer Main Info"
style="margin-bottom:5px;">
<h:panelGrid columns="2">
<p:outputLabel for="dealerCode" value="Dealer Code" />
<p:inputText id="dealerCode" required="true"
value="#{dealerMainInfoBO.dealerCode}" style="width:200px;" />
<p:outputLabel for="dealerName" value="Dealer Name" />
<p:inputText id="dealerName" required="true"
value="#{dealerMainInfoBO.dealerName}" style="width:200px;" />
</h:panelGrid>
</p:panel>
</ui:composition>
</html>
Update:
I created a very simple single page and I noticed that when I remove the <h:head></h:head> tags the ajax works like a charm BUT without the fancy primefaces UI, and when I add the tags the ajax stop (this is normal cause <h:head></h:head> tags fetch all the needed JSs and CSSs), What Can I Do?
Example.xhtml
<?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">
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body>
<h:form id="toolBarForm">
<p:toolbar style="margin-bottom:5px;">
<p:toolbarGroup align="right">
<p:commandButton value="Add" update=":toolBarForm"
action="#{bean.add}" />
</p:toolbarGroup>
</p:toolbar>
<p:messages id="operationDefinitionMessages" />
<h:panelGrid columns="2">
<p:outputLabel for="text" value="Text" />
<p:inputText id="text" required="true" value="#{bean.text}" />
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
My Environment
Primefaces:3.5
JSF-Mojarra:2.2
Spring:3.2.3.RELEASE
In case anyone faces the same issue. I noticed that the Primefaces showcase is using JSF-Mojarra-2.1.22. I downgraded my JSF-Mojarra version from 2.2 to 2.1.22 and it worked like a charm.
If I am not wrong, I guess it should be reported to primefaces (if it isn't a current issue).
this is my 1st question here :)
My code is as follows:
<?xml version="1.0"?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
>
<h:head />
<h:body>
<h:form id="filterForm">
<h:outputStylesheet library="css" name="main.css" />
<div id="filterPane">
<h:panelGroup rendered="#{not empty filters.categories}">
<div class="filter">
<div class="filterCategories" style="width: 100%;">
<h4>Kategorien</h4>
<p />
<h:selectManyCheckbox layout="pageDirection"
value="#{filters.selectedCategories}"
valueChangeListener="#{filters.categoryValueChanged}">
<f:selectItems value="#{filters.categories}" var="category"
itemLabel="#{category.displayName} (#{category.count})"
itemValue="#{category.name}" />
<f:ajax render="#form" />
</h:selectManyCheckbox>
</div>
</div>
</h:panelGroup>
</div>
</h:form>
</h:body>
</f:view>
I get the same error as some others before me here #stackoverflow - but none of the suggested solutions worked for me.:
<f:ajax> contains an unknown id 'A5539:filterForm:j_idt9' - cannot locate it in the context of the component j_idt9
Before my switch from <p:selectManyCheckbox to <h:selectManyCheckbox the code was working fine.
We need to change to <h:selectedManyCheckbox, because the PrimeFaces variant is not selectable for a non-JavaScript user. I need the form <h:form id="filterForm"> to be re-rendered as a consequence of my AJaX request via the <f:ajax> element.
Beside the initial <f:ajax render="#form" /> I unsuccessfully tried to reference the <h:form id="filterForm"> element with the following variants:
<f:ajax render=":filterForm" />
<f:ajax render=":#{component.parent.parent}" />
I also tried some more stupid ones.
Any hint, anybody!? :)
Let's consider following, simplified example:
We have 2 tabs withing <rich:tabPanel switchType="ajax">, each tab has <h:inputText value="" required="true" /> and at the moment we want to switch from one tab to another, and the inputText is empty (we don't want to submit value from it anyway, we want to go to another tab) we get "Validation Error: Value is required."
The example code:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
>
<a4j:form id="mainForm"
reRender="mainForm"
ajaxSubmit="true">
<rich:tabPanel switchType="ajax">
<rich:tab label="TabA" >
<a4j:region>
<h:outputText value="Tab A content" />
<h:inputText value="" required="true" />
</a4j:region>
</rich:tab>
<rich:tab label="TabB">
<a4j:region>
<h:outputText value="Tab B content" />
<h:inputText value="" required="true" />
</a4j:region>
</rich:tab>
</rich:tabPanel>
<rich:messages />
</a4j:form>
</html>
You should add the "immediate" attribute to the tabPanel. To quote the docs this means that the tabPanel:
"...component value must be converted and
validated immediately (that is, during
Apply Request Values phase), rather
than waiting until a Process
Validations phase"
For example:
<rich:tabPanel switchType="ajax" immediate="true">