Using JSF 1.2 and Richfaces 3.3, I have this form:
<h:form>
<rich:tabPanel switchType="client" id="tabPnl">
<rich:tab label="MAIN_TAB">
<h:outputText value="#{msg.date}"/>
<rich:calendar value="#{MyBean.date}">
<f:validator validatorId="CalendarValidator" />
</rich:calendar>
<h:message for="DataInici" errorClass="error" />
<h:outputText value="#{msg.selector}"/>
<h:selectOneMenu id="select_val" value="#{MyBean.selectedItem}">
<f:selectItem itemLabel="#{msg.select_value}" itemValue="-1" />
<f:selectItems value="#{MyBean.listOfItems}" />
<f:validator validatorId="NumSelValidator" />
<a4j:support event="onchange" reRender="tabPnl" ajaxSingle="true" />
</h:selectOneMenu>
<h:message for="select_val" errorClass="error" />
</rich:tab>
<rich:tab label="SUBTAB1" id="subtab1" rendered="#{MyBean.selectedItem == 1}">
// form components such as inputText and/or SelectOneMenu.
</rich:tab>
<rich:tab label="SUBTAB2" id="subtab2" rendered="#{MyBean.selectedItem == 2}">
// Other form components such as inputText and/or SelectOneMenu.
</rich:tab>
</rich:tabPanel>
<h:commandButton value="#{msg.insert}" action="#{MyBean.insertData}">
</h:form>
At the begining, SUBTAB1 and SUBTAB2 are not rendered as the default value for MyBean.selectedItem is -1.
Firstly, the user picks a date in the <rich:calendar> component and, after that, it selects a value in the <h:selectOneMenu>. After that, the desired behaviour (what I want to achieve) is reRender the tabPanel without losing the data already introduced. Consequently, I expect the tabs SUBTAB1 or SUBTAB2 become rendered depending on what the value chosen in the <h:selectOneMenu>.
What I get: The tabPanel is reRendered, the appropiate SUBTAB is rendered but the data introduced in the first tab is lost.
How can I render these tabs without losing the data already introduced? I've tried to reRender the specific tabs, but it dosen't make them become rendered (I suppose it only affects to their content).
Thank you in advance.
Note: All beans involved are Session scoped.
Problem is that the inputs values are not processed on server.
Remove ajaxSingle="true" from a4j:support, so the whole form is processed when selectOneMenu value changes. You can use process attribute to limit the submitted area (in case you don't want to process the whole form).
ajaxSingle
Limits JSF tree processing (decoding, conversion, validation and model
updating) only to a component that sends the request. Boolean. Default
value is "false".
Related
I've got a modalPanel with some components (for example, a tree). At fisrt my actions and actionListners work correclty. After some time (from 5 to 10 minutes) actions stop working completely. The post is fired, but the AjaxViewRoot actions are empty. I have no validation errors.
All the page component ids are fixed (not generated) to prevent conversion error.
My bean is Conversation scoped and its timeout is over 30 minutes.
<rich:modalPanel id="modalId" resizeable="false" autosized="true">
<a4j:include id="myPage" viewId="#{bean.viewId}"/>
</rich:modalPanel>
Here is myPage (included page) code:
<ui:composition>
<h:form id="frmPage">
<h:panelGrid columns="1">
<a4j:region id="treeRegion">
<rich:panel id="tbPanelTrees">
<h:panelGrid columns="2" >
<h:panelGroup layout="block" style="height:#{(height-150)/2}px; width:#{(width-20)/2}px; overflow:visible; overflow-y:auto; overflow-x:auto;">
<rich:tree id="subjectTree"
style=" height: 100%"
switchType="ajax"
var="item"
nodeFace="#{item.nodeType}"
value="#{bean.subjTree.rootSubjectsTree}"
adviseNodeOpened="#{bean.subjTree.adviseNodeOpened}"
changeExpandListener="#{bean.subjTree.changeExpandListener}"
nodeSelectListener="#{bean.subjTree.nodeSelectListener}"
ajaxSubmitSelection="true"
reRender="elements outside region"
ajaxSingle="true"
ignoreDupResponses="true">
<rich:treeNode type="root" icon="#{item.subjectsIcon}" iconLeaf="#{item.subjectsIcon}" id="subjectRootNode">
<a4j:commandLink value="#{item.nodeName}" id="subjectRootNodeLink"/>
</rich:treeNode>
<rich:treeNode type="user" icon="#{item.userIcon}" iconLeaf="#item.userIcon}" id="userNode">
<a4j:commandLink value="#{item.nodeName}" id="userNodeLink"/>
</rich:treeNode>
</rich:tree>
</h:panelGroup>
</a4j:region>
</h:panel:Grid>
</h:form>
</ui:composition>
Does anybody have an idea, what's the problem?
Finally found a solution. Some of my components didn't have a defined id and had a generated one (like myForm:j1456546).
Another part of the page send a polling request (to show some news), which send a DOM-tree to the server for validation. The generated ids where changed on server-side, but remained the same on client side (because the polling didn't rerender anything apart from news panel). So when user clicked the button (or fired any other ajax-action), the button ids on the client and server-side where different and action was not invoked.
Solution: manualy define all of your ids.
I am using Primefaces and JSF to develop this frontend. My issue is that one of my selectonemenus never sets its value binding, "selectedGroup", so the second dropdown is never populated. My backing bean is being called to "update" the second selectonemenu, but the listener of that ajax is not called, nor is selectedGroup ever set. This code is effectively identical to the Showcase for "Select". I even verified that the showcase code works from scratch (which i did not doubt), but fail to see how my situation is any different from that example.
Other stackoverflow questions on this topic indicate that something was left out, but none of those suggestions matched my issue.
I have two selectOneMenus, like so.
<h:form id="outerForm">
<p:panel id="outerPanel">
<p:panelGrid id="outerPanelGrid">
<h:outputLabel for="groupSelection" value="Group: "/>
<p:selectOneMenu id="groupSelection" value="#{myBean.selectedGroup}" >
<p:ajax update="commandSelection"
listener="#{myBean.handleGroupSelection}" />
<f:selectItem itemLabel="---Please Select Group---" itemValue=""/>
<f:selectItems var="group" value="#{myBean.groups}"
itemLabel="#{group.name}" itemValue="#{group.name}" />
</p:selectOneMenu>
<h:outputLabel for="commandSelection" value="Command: "/>
<p:selectOneMenu id="commandSelection" value="#{myBean.command}">
<f:selectItems value="#{myBean.commandStringsList}"/>
</p:selectOneMenu>
</p:panelGrid>
</p:panel>
</h:form>
This page is being displayed in the "center" portion of my layout template like so..
<ui:define id="content" name="content">
<p:panel id="contentPanel" style="float:left; border:none">
<ui:include src="#{anotherBean.currentView}.xhtml"/>
</p:panel>
</ui:define>
The backing bean DOES use some data classes to contain some of the data which is populated, but I thought i was doing everything correct to map it into the view. For the most part, I am using Strings, though.
Does anyone see what I am missing? At the very least, is this xhtml valid?
I should also mention that this page was working before I created and used a template. Basically, I was rendering it in a tab of a tabview using ui:include in the body of index.xhtml. Though I did not notice initially, this page stopped working sometime after I incorporated the template (poor testing on my part, I know).
<f:selectItems var="group" value="#{myBean.groups}"
itemLabel="#{group.name}" itemValue="#{group.name}" />
you can't specify selectItems this way. translation has to be bidirectional. use a converter!
<f:selectItems var="group" value="#{myBean.groups}"
itemLabel="#{group.name}" itemValue="#{group}"
converter="groupConverter"/>
I have a menu with list items and a p:commandLink inside. While using this for different pages I realized that I have problems updating form with a p:dataTable and p:columns inside. After clicking on the link, form2 which actually has some panels and the table inside should be updated. Now my problem: Only most of the content in form2 is updated correctly, but the p:columns have the old value. If I click again on the link, the correct values are shown.
The bean method public void selectProject(Project myProject) is called correctly and the values are correctly processed.
Now the strange thing: If I add a h:graphicImage with a p:ajax everything works fine!!
<h:form id="form1">
...
<li>
<p:commandLink update=":form2" actionListener="#{bean.selectProject(p)}">
<h:outputText value="#{p.name}" />
</p:commandLink>
<!-- Code below is for testing only, but works fine! -->
<h:graphicImage value="#{iconBean.icon(12,'clock')}">
<p:ajax event="click" update=":form2" listener="#{bean.selectProject(p)}"/>
</h:graphicImage>
</li>
...
</h:form>
Update This does not seem to be related to p:columns, a simplified test case shows the expected behavior of p:commandLink. In the original (still failing) setting the menu is implemented as a composite component.
As a workaround I use
<h:commandLink>
<h:outputText value="#{p.name}"/>
<p:ajax event="click" update=":form2" listener="#{bean.selectProject(p)}"/>
</h:commandLink>
The code fragment below represents an editor. In my application, a windows displays a group of editors in a tab panel, each tab containing a datatable with the editors as rows. When a node is selected, its text will be displayed in the organizationUnit input text. The editor shouldn't know about it's parents. Is it possible to update organizationUnit without using the absolute client id?
<p:tabView value="#{accountsBean.groups}" var="group">
<p:tab title="#{eval.getString(group.name)}">
<p:dataTable value="#{group.editors}"
var="editor">
<p:column>
<custom:include src="#{editor.component}">
<ui:param name="bean" value="#{editor.beanName}"/>
<ui:param name="mandatory" value="#{editor.mandatory}"/>
<ui:param name="name" value="#{editor.name}"/>
</custom:include>
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
<h:panelGrid id="containerEditor" columns="2">
<h:outputText value="#{name}: #{mandatory ? '*' : ''}" />
<p:tree value="#{bean.root}" var="node" selectionMode="single" selection="#
{selectedNode}">
<p:ajax event="select" listener="#{bean.onNodeSelect}"
update="update_organization_unit" immediate="true" />
<p:treeNode>
<h:outputText value="#{node}" />
</p:treeNode>
</p:tree>
<h:outputText />
<p:inputText id="organizationUnit" value="#{bean.selectedItemPath}"
disabled="true" />
</h:panelGrid>
The tab panel is inside a form called form with prependId="false"
When you have components inside different NamingContainers, and those are not nested**, you must use absolute client id.
In your case, if you don't use the separator character at the begining, the findComponent algorithm would search up until it finds a NamingContainer: this would be your p:tree. Then it would try to find the component inside the p:tree, since it's not there, the exception you mentioned is thrown.
On the other hand, If you do use the separator character at the begining, you must use the absolute client id.
Short answers: No. Unless you change the way your components are organized, you can't update organizationUnit without using the absolute client id.
** If NamingContainers are nested, components inside the outter NamingContainer may update ones inside an inner NamingContainer by referencing their id before the id of the actual component they want to update, for example: update="innerContainer1Id:componentId", or even update="innerContainer1Id:innerContainer2:componentId".
Algorithm is explained in the JavaDoc.
A common 'trick' I use to avoid refering to ids is to use binding.
Example:
<h:form>
<p:button binding="#{button}" ...
</h:form>
....
<p:button update=":#{button.clientId}" ...
Note: This doesn't work for some tags like h:outputText that don't generate an id.
I'm new to JSF2 and Primefaces and realized an issue to update components.
Lets' assume I have the following piece of code, I can directly update="counter"
<h:form id="f1">
<h:outputText id="counter" value="#{clientBean.counter}" />
<h:graphicImage url="/images/circle-ok.png">
<p:ajax event="click" update="counter" process="#this"
listener="#{clientBean.tag}"/>
</h:graphicImage>
</h:form>
In another h:form I have to use update="f1:counter". Only a update="counter" does not work here.
<h:form id="f2">
<p:dataTable var="var" value="#{clientBean.vf}">
<p:column>
<f:facet name="header">Tag</f:facet>
<h:graphicImage url="/images/circle-ok.png">
<p:ajax event="click" update="f1:counter" process="#this"
listener="#{clientBean.tag}" />
</h:graphicImage>
</p:column>
</p:dataTable>
</h:form>
I haven't faced this with JSF1.2 (and RichFaces), what are the rules to address the ids correctly?
In your first example JSF could lookup up the counter element in the same scope as ajax listener. Form implements NamingContainer which means it prefixes client ids (used in html) with its own id and creates a distinct name space for ids. Have a look at the page source under browser - there will be f1:counter id assigned to your counter. In your second example there is no counter element in the scope (inside form f2) so the lookup fails.
You can disable this form behaviour with prependId="false". This is useful if you are sure there won't be elements with identical ids across all forms.
Icefaces works differently - it automatically calculates the html delta and sends it to the browser as partial update. In most cases this is more convenient for the programmer but comes with considerable performance cost. I believe JSF2 adopted icefaces partial updates concept but requires ids to be passed explicitely.