Changing rendered attribute in <p:tab>

[csharp]

Hi,

I'm completely new to PrimeFaces and in fact only heard about it on Monday for the first time. I've started working on a project that requires Primefaces, and none of the people I'm in contact with know any anything about it, so some help would be most appreciated.

I've played around with some of the tags in order to learn a bit about it, but I'm completely stuck when it comes to knowing how to access other components on a page using PrimeFaces without writing JavaScript or using beans. The particular situation is that I have some radio buttons, and want another part of the page to be rendered or not rendered according to a selection. Here is a sample of my code:

<h:form id="planningForm">
<div id="heading" style="text-align:center">
<h:selectOneRadio>
<f:selectItem id="section" itemValue="section" itemLabel="Section" />
<f:selectItem id="subComponent" itemValue="subComp" itemLabel="Sub-Component">
<p:ajax event="onchange" update="subComponentTab.rendered==true" />
</f:selectItem>
<f:selectItem id="misc" itemValue="misc" itemLabel="Misc" />
</h:selectOneRadio>
</div>
<br />

<p:tab id="subComponentTab" rendered="false">
<div style="text-align:center">
<h:outputLabel value="Parent" />
<h:selectOneMenu>
<f:selectItem itemValue="blank" itemLabel="" />
<f:selectItem itemValue="parent1" itemLabel="Parent 1" />
<f:selectItem itemValue="parent2" itemLabel="Parent 2" />
<f:selectItem itemValue="parent3" itemLabel="Parent 3" />
</h:selectOneMenu>
</div>
</p:tab>
<br />

<p:tab id="main" rendered="false">
//.......etc.
// Submit and reset buttons
</p:tab>
</h:form>

The form is in three parts, and by default only the top part is visible. What I want to happen is that when the user selects the middle radio button , id="subComponent", the text enclosed by <p:tab id="subComponentTab" rendered="false"> in the second part of the form is displayed, but somehow I don't know how to do this without writing JavaScript or using beans. Something similar will be done for the two other selections of the radio button to display the main part of the form, and when a button is unselected, the text is no longer rendered. Likewise the main part of the form is going to be displayed if itemValue in the second part of the form is non-blank, but I havn't reached that part so far.

I've used JSF and have made extensive use of JavaScript to modify forms, see for example http://phoenix.ens-lyon.fr/simulator/ , but I don't know how to do this in PrimeFaces, so some help would be most appreciated.

Christopher Sharp
http://csharp.com

[cagatay.civici]

Hi,

Welcome to PrimeFaces!

As in standard JSF/Ajax, you can't update something that does not exists on page so you need;

Code: Select all

<h:form id="planningForm">
<div id="heading" style="text-align:center">
<h:selectOneRadio>
<f:selectItem id="section" itemValue="section" itemLabel="Section" />
<f:selectItem id="subComponent" itemValue="subComp" itemLabel="Sub-Component">
<p:ajax event="onchange" update="subComponentTabContent" actionListener="#{bean.methodToSetRenderedFlagToTrue}"/>
</f:selectItem>
<f:selectItem id="misc" itemValue="misc" itemLabel="Misc" />
</h:selectOneRadio>
</div>
<br />

<p:tab id="subComponentTab">
<p:outputPanel id="subComponentTabContent">
<h:outputLabel value="Parent" />
<h:selectOneMenu rendered="#{bean.renderedFlagInYourBooleanThatDefaultsToFalse}">
<f:selectItem itemValue="blank" itemLabel="" />
<f:selectItem itemValue="parent1" itemLabel="Parent 1" />
<f:selectItem itemValue="parent2" itemLabel="Parent 2" />
<f:selectItem itemValue="parent3" itemLabel="Parent 3" />
</h:selectOneMenu>
</p:outputPanel>
</p:tab>
<br />

<p:tab id="main" rendered="false">
//.......etc.
// Submit and reset buttons
</p:tab>
</h:form>

Here's one example;

http://www.primefaces.org/labs/ui/remoteCommand.jsf

[csharp]

Thank you for your prompt reply. I tried your recommendation, and I'm still having the same problem. Here is my xhtml code -

Code: Select all

<div id="heading" style="text-align:center">
				<h:selectOneRadio>
					<f:selectItem id="section" itemValue="section" itemLabel="Section" />
					<f:selectItem id="subComponent" itemValue="subComp" itemLabel="Sub-Component">
						<p:ajax event="select" update="subComponentTabContent" actionListener="#{radioBean.enableParent}"/>
					</f:selectItem>
					<f:selectItem id="misc" itemValue="misc" itemLabel="Misc" />
				</h:selectOneRadio>
			</div>
			<br />
			
			<p:tab id="subComponentTab">
				<p:outputPanel id="subComponentTabContent">
					<h:outputLabel value="Parent" />
					<h:selectOneMenu rendered="#{radioBean.isParent}">
						<f:selectItem itemValue="blank" itemLabel="" />
						<f:selectItem itemValue="parent1" itemLabel="Parent 1" />
						<f:selectItem itemValue="parent2" itemLabel="Parent 2" />
						<f:selectItem itemValue="parent3" itemLabel="Parent 3" />
					</h:selectOneMenu>
				</p:outputPanel>
			</p:tab>

Here is my backing bean -

Code: Select all

package com.raytheon.imps.action;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class RadioBean {
	
	private boolean isParent;

	public boolean getIsParent() {
		return isParent;
	}

	public void setParent(boolean isParent) {
		this.isParent = isParent;
	}
	
	public void enableParent() {
		System.out.println("enabling parent");
		isParent = true;
	}
	
	public void disableParent() {
		isParent = false;
	}
}

When I select the radio button with id 'subComponent', the actionListener event is never triggered to the manager bean. What am I missing?