Is it considered correct to have a composite component (compA) that holds a form, when compA can itself be contained in another form (in the using page)?
<!-- composite -->
<cc:implementation>
<h:form id="innerForm">
... composite stuff
</h:form>
</cc:implementation>
<!-- using page/component -->
<h:form id="outerForm">
<util:compA ... />
</h:form>
When trying to remove nested forms, any ajax call in the composite will submit the whole form, and as has some values may not yet be filled, validation fails.
Is there any best-practice approach to this?
Nested forms are always a bad idea and will result in invalid HTML output.
A Composite Component itself is a Naming Container so it should not be a problem to process only the CC or even some parts of it.
To prevent the whole form from being even submitted I would suggest PrimeFaces AJAX calls with partialSubmit="true". See here for reference.
If there are still problems with your AJAX calls you habe to provide the related code of your CC.
Related
I'm blocked for couple of days on a JSF issue.
I have a web app where I create the page content quite dynamically from database data. Every page has several sections containing a form with h:commandButton (or a set of buttons).
Some forms work correctly and the form action method is launched as expected. Some other forms however don't work - the action method is not being called at all.
And I don't know why :-(
I know this response: action method is not called in JSF which lists conditions which must be fulfilled and I believe that everything is ok here, but it simply doesn't work for some forms...
Some points:
The problem is 100% repeatable
The same piece of XHTML is used for both successful and unsuccessful requests
The same action method (in the same bean) is being called for all forms
the console output differs in both cases
...RESTORE_VIEW phase is the same (my code logs seem to be equal)
...APPLY_REQUEST and few other phases are empty for the wrong case (only the final RENDER_RESPONSE phase is being executed
...APPLY_REQUEST and the following phases are not empty for the correct phase
(using ui:debug) Scoped variables / Request parameters contain ONLY vallues passed via f:param for the successfull case
Scoped variables / Request parameters contain however also formid, formid:action_name and an input box content for the UNsuccessfull case
the console shows absolutely no exception in any case
the correct request returns HTTP code 302 followed by another GET request with the target parameters (as build in the action method)
the incorrect request returns directly 200 (and no action is called)
when the JSF debug is switched on (javax.faces.level = ALL, com.sun.faces.level = ALL) still no exception is being shown, I see only couple of "javax.faces.component.UIComponentBase getRenderer\nFINE: No renderer-type for component j_idt171" messages and one "com.sun.faces.facelets.util.DevTools writeAttributes
FINEST: Error writing out attribute" followed by a NullPointerException - during RENDER_RESPONSE phase
So most probably there is a problem with restoring the view, but I have no idea why. The same XHTML block generates form and command button for both (successfull and unsuccessfull) cases (in a c:forEach loop).
But the strange think is also difference in the parameters in the correct case an in the wrong case...
Can anyone plase give me some directions what/where I should be looking for?
Thanks a lot in advance!
EDIT: some code...
This is the XHTML (unnecessary code cis cut)
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
template="/templates/base.xhtml">
<ui:define name="title">IS runtime</ui:define>
<ui:define name="menu">
<h:link value="Home" outcome="/index" /> | <h:link value="IS home"
outcome="/runtime">
<f:param name="env" value="#{param.env}" />
</h:link>
</ui:define>
<ui:define name="content">
<c:forEach var="pv" items="#{runtimeBean.pageViews}">
<div id="view_#{runtimeBean.ISViews[pv.view].code}"
class="view_#{runtimeBean.ISViews[pv.view].code}">
<h2>#{runtimeBean.ISViews[pv.view].code}</h2>
<h:form id="form_#{runtimeBean.ISViews[pv.view].code}">
<h:messages />
<c:if
test="#{runtimeBean.getEnvView(pv.view).type == 'RECORD_DETAIL'}">
<c:forEach var="item" items="#{runtimeBean.getViewItems(pv.view)}">
<h:outputText value="#{item.sqlColumn}" />:
<ui:fragment rendered="#{item.type == 'INPUT_FIELD'}">
<h:inputText id="#{item.sqlColumn}"
value="#{runtimeBean.sqlData0[item.sqlColumn]}" />
</ui:fragment>
<ui:fragment rendered="#{item.type == 'READ_ONLY'}">
<h:outputText value="#{runtimeBean.sqlData0[item.sqlColumn]}" />
</ui:fragment>
<br />
</c:forEach>
</c:if>
<c:forEach var="action"
items="#{runtimeBean.getViewActions(pv.view, 'BOTTOM_LEFT')}">
<h:commandButton id="action_BL_#{action.code}"
value="#{action.code}" action="#{runtimeBean.doPageAction}">
<f:param name="env" value="#{param.env}" />
<f:param name="view" value="#{pv.view}" />
<f:param name="action" value="#{action.id}" />
<c:forEach var="actionParam"
items="#{runtimeBean.getActionParams(pv.view)}">
<f:param name="#{actionParam}" value="#{param[actionParam]}" />
</c:forEach>
</h:commandButton>
</c:forEach>
</h:form>
</div>
</c:forEach>
<ui:debug hotkey="z"
rendered="#{facesContext.application.projectStage == 'Development'}" />
</ui:define>
</ui:composition>
This is Scoped Variables / Request Parameters for the correctly processed action:
Name Value
env 5
id 22
page 3
After the correct action the next page contains the parameters as passed:
http://localhost:8080/metais/runtime.jsf?env=5&page=3&id=22
and the same for the incorrect action:
Name Value
action 3
env 5
form_prj_detail form_prj_detail
form_prj_detail:action_BL_delete form_prj_detail:action_BL_delete
form_prj_detail:name p5
id 22
view 3
In the wrong case the next page doesn't show the arguments. Just simple:
http://localhost:8080/metais/runtime.jsf
In both cases the parameters are passed already in the HTTP (POST) request. It seems to me more as a problem of javascript part of the JSF library...
EDIT2:
I made some progress in investigating the problem and I've found the following:
The page is being generated dynamically including the forms. They are generated based on parameters passed to the page.
However when applying the form data, they are being applied to page built with missing parameter. If the particular form is NOT present on the same page rendered w/o this parameter, the JSF then doesn't know the form instance and thus its values are not applied and the rest of the page processing chain is invalid.
Using different words: if I add the problematic form to a "default page" (with missing page parameter), the form is processed also from different pages (the same XHTML but different parametrs causing showing different forms on the page).
So for some reason when the page is restored or when the form data are being applied not all page parameters are used to restore the view.
...I made one small step but still don't have a solution and I'm frustrated :-(((
BR,
Rada
So, finally I've understood the problem.
The problem is in the Restore View phase when the server reconstructs the submitted page before any form values could be set and before the form action could be performed.
The point is that the page is not being restored from internal JSF view state but it's restored as a "new" page - and using arguments used to build the original page.
My app. creates the forms dynamically and concrete page content depends on the page parameters (set in the HTTP GET message) and then data read from DB. Pressing a command button builds a request with parameters necessary for making the action - which however don't match with parameters necessary to reconstruct the original/previous page (I don't care of it).
This means that the Restore view is reconstructing DIFFERENT page than the one the command button is pressed from. This means that the reconstructed forms don't match with the original page forms. And this finally means that they can't be matched and thus the follow up life cycle steps are not successfull and no action method could be called.
So... this is either my misunderstanding of the JSF principles OR it's a JSF design issue.
I'd simply expect that the Restore View must be performed implicitly and automatically...
Comments welcome!
BR,
Rada
I am printing an arbitrary number of identical forms on a page using Spring's <form:form tag, and I need a way to distinguish between them, because form errors of one form are now printed on all forms.
Currently all the identical forms are bound to the same, single backing object. That works fine, because a user can only submit one form at a time.
I am using Spring validation to validate form fields. When one of the fields has an error (let's say 'name' is empty) than the error message is printed under the 'name' field of all forms.
Obviously, I need some way to allow Spring to distinguish between the forms, but how?
Some example code:
This Spring webflow definition creates a ClientFormBacking object to back the client forms. And it submits a form POST to the bindAndValidate method, which calls the validator.
<webflow:var name="clientFormBacking" class="com.example.ClientFormBacking"/>
<webflow:view-state id="list" view="clients" model="clientFormBacking">
<webflow:on-entry>
<webflow:evaluate expression="contextParameterManager.findAll()" result="flowScope.clients"/>
</webflow:on-entry>
<webflow:transition on="update-client" to="list">
<webflow:evaluate expression="clientBinder.bindAndValidate(flowRequestContext)"/>
<webflow:evaluate expression="clientService.saveOrUpdate(flowScope.clientsPageBacking)"/>
</webflow:transition>
</webflow:view-state>
Print an arbitrary number of identical forms with a name field and name error field in JSP:
<c:forEach items="${clients} var="client">
<form:form commandName="clientFormbacking">
<form:input path='name' value='${client.name}'/>
<form:errors path="name" cssClass="input-error" />
</form:form>
</c:forEach>
The validator that rejects the 'name' field:
ClientValidator implements Validator {
public void validate(Object target, Errors errors) {
// Problem here! There are multiple <form:errors path='name'/> tags....
errors.rejectValue("name", "validation.error.name.empty");
}
}
Hello I have that form:
<h:form>
<h:selectOneRadio layout="pageDirection" value="#{votesBean.answer}">
<f:converter converterId="PollConverter"/>
<f:selectItems value="#{pollsBean.selectItems}"/>
</h:selectOneRadio>
<h:messages/>
<h:commandButton value="#{msgs.vote}" action="/profile/main.xhtml"/>
</h:form>
But when I submit this form, page no redirects to main.xhtml, but refresh current page (viewpoll.xhtml, I ‘think because there are errors in form), but not include view parameters. I use view parameter to know current poll… in result I get nullpointer exception, because I don’t have poll id.
If you would like to navigate directly without validation and conversion, use immediate="true" in h:commandButton.
Otherwise, there might be a failure in Request Processing Life Cycle, Eg. validation phase.
Finally, your URL(/profile/main.xhtml) address is incorrect.
A have problem with accessing my custom components (which are used as parts of the form).
Here is the story:
I have dynamic form which have few modes of work. Each mode can be selected and loaded into form body with AJAX. It looks like that (template):
<t:form t:id = "form">
<p class= "calcModeTitle">
${message:modeLabel}: <select t:id="modeSelect"
t:type="select"
t:model="modesModel"
t:value="selectedMode"
t:blankOption="NEVER"
t:encoder="modeEncoder"
t:zone = "modeZone"
/>
</p>
<div class="horizontal_tab">
<t:errors/>
</div>
<t:zone t:id="modeZone" id="modeZone" t:update="show">
<t:if test="showCompany">
<t:delegate to="block:companyBlock" />
</t:if>
<t:if test="showPersonal">
<t:delegate to="block:personalBlock" />
</t:if>
<t:if test="showMulti">
<t:delegate to="block:multiBlock" />
</t:if>
</t:zone>
<t:block id="companyBlock">
<t:modes.CompanyMode t:id="company"/>
</t:block>
<t:block id="personalBlock">
<t:modes.PersonalMode t:id="personal" />
</t:block>
<t:block id="multiBlock">
<t:modes.MultiMode t:id="multi" />
</t:block>
<div class="horizontal_tab">
<input type="submit" value="${message:submit_label}" class="submitButton thickBtn"/>
</div>
</t:form>
AJAX works pretty well and form changes accordingly the "modeSelect" state. But i run into problem when submitting the form. I have in class definition hooks for components placed as:
//----form elements
#Component(id = "form")
private Form form;
#InjectComponent
private CompanyMode company;
#InjectComponent
private PersonalMode personal;
#InjectComponent
private MultiMode multi;
where *Mode classes are my own components, containing form elements and input components. I planned to get access to them during validation, and check values supplied by user with form, but when I am trying to reach anything from them I've got nullPointerException - it seems that component are not initialized in my class definition of form. On the other hand form component is injected properly (I am able to write some error for example). I am a bit lost now. How to properly inject my components to class page containing the form?
Dynamic forms in tapestry are a bit complicated. Tapestry passes a t:formdata request parameter which contains the serialized form entities. This is then used serverside in the POST to re-hydrate initial form state. This must be kept up-to-date with what the client sees.
If you want to add dynamic content to a form via ajax, you will need to use the FormInjector. You might want to take a look at the source code for the AjaxFormLoop to see an example.
If you want to render hidden form fragments and make them visible based on clientside logic, you can use the FormFragment
From tapestry guide:
A block does not normally render; any component or contents you put
inside a block will not ordinarily be rendered. However, by injecting
the block you have precise control over when and if the content
renders.
Try to use here either "t:if" or "t:delegate".
Something like this:
<t:zone t:id="modeZone" id="modeZone" t:update="show">
<t:delegate to="myBlock" />
</t:zone>
<t:block t:id="companyBlock">
<t:modes.CompanyMode t:id="company"/>
</t:block>
<t:block t:id="personalBlock">
<t:modes.PersonalMode t:id="personal" />
</t:block>
<t:block t:id="multiBlock">
<t:modes.MultiMode t:id="multi" />
</t:block>
java:
#Inject
private Block companyBlock, personalBlock, multiBlock;
public Block getMyBlock(){
if (getShowCompany()) return companyBlock;
if (getShowPersonal()) return personalBlock;
return multiBlock;
}
I have a session variable which is of type ArrayList.
In the jsp page I need to access it by index to create a form dynamically, but after I submit the form I found out that the session ArrayList's elements values didn't change.
Here it is what I've tried on my JSP page (I use struts2 Framework):
<s:iterator value="anotherArray" status="RowsIterator">
<tr>
<td>
<s:iterator value="actionOptionsArray" status="iter">
<s:radio
name="#session.chosenActionsArray[%{#RowsIterator.index}]" <!-- The concerned line -->
list="%{actionOptionsArray[#iter.index]}"
value="#{actionOptionsArray[0]}"
theme="simple" />
<br>
</s:iterator>
</td>
<!-- other fields-->
</tr>
</s:iterator>
anotherArray and #session.chosenActionsArray have the same size.
I guess I iterate it wrongly, but in my case iterating it by index is an obligation.
Thank you a lot in advance :)
You need to access the session via an action, the session is accessible from the jsp but not directly from the outside world in this way.
Have the action you are submitting the form to implement SessionAware. I would create a getter/setter for an ArrayList along with proper validation and then move those values into into the session via the execute method. I'm not a fan of exposing your session directly to the outside world (providing a setter for the session in your action)... if you do this you need to be aware that you may have given a malicious user access to things you might not have expected.
Edit
Suppose you have an ArrayList of ArrayList of String called "matrix" in your action... you can iterate the properties via:
<s:iterator value="matrix">
<s:iterator>
<s:property/>
</s:iterator>
</s:iterator>
The outer iterator, iterates over "matrix" which pushes each instance to the top of the value stack. The inner iterator will use what is at the top of the stack by default same with the property tag. Placing tr's and td elements in the right place an you could render a table.
To generate the right name attribute for input elements (possibly hidden ones) you would want them in the form matrix[i][j] where i and j are integers and would define an appropriate matrix. Using status attribute of iterator as you've done would be a good way to generate the indexes.