# JSF Accordion und Navigation



## trudi (23. Apr 2012)

Hi,

Es geht um eine JSF-Seite. ich hab einen Accordionpanel mit 2 Tabs. Jedes Tab enthält ein Formular mit Textfeldern und Button.
Beim klicke auf die Buttons soll man immer auf eine andere Seite weitergeleitet werden.
Standardmäßig ist immer der erste Tab geöffnet. Wenn man im 2. Tab auf den Button klickt dann geht die Seite auch in ihren "NormalZustand" zurück, sodass der 2. Tab zu geht und der erste wieder auf.

Jetzt funktioniert die Weiterleitung nur im 1 Tab. Also wenn ich da auf den Button klicke, komm ich zu meiner gewünschten Seite, beim 2. Tab nicht, wie gesagt, da wird dann bloß die Accordion-Seite im Ausgangszustand wieder angezeigt

hier mal der Code:


```
<h:form id="panelForm">
	<p:accordionPanel>

		<p:tab title="tab1">

			<h:form id="form1">
				<h:outputText value="Name:" />
				<h:panelGroup>
					<p:inputText value="#{Bean.username}" id="name"
						size="15" required="true" />
					<p:message styleClass="errorMessage" for="name" />
				</h:panelGroup>
				<h:outputText value="Password:" />
				<h:panelGroup>
					<p:password value="#{Bean.password}" id="password/>
					<p:message styleClass="errorMessage" for="password" />
				</h:panelGroup>
				<h:commandButton value="New Account"
					action="#{Bean.createAction}" />
			</h:form>
		</p:tab>

		<p:tab title="tab2">
			<h:form id="form2">

				<h:outputText value="Name:" />
				<h:panelGroup>
					<p:inputText value="#{Bean.username}" id="name2"
						size="15" required="true" />
					<p:message id="defaultMessage2" for="name2" />
				</h:panelGroup>
			<h:outputText value="Password:" />
				<h:panelGroup>
					<p:password value="#{Bean.password}" id="password2" />
					<p:message styleClass="errorMessage" for="password2" />
				</h:panelGroup>

				<h:panelGroup></h:panelGroup>
				<h:commandButton value="Sign In"
					action="#{Bean.Action}" />
			</h:form>
		</p:tab>
	</p:accordionPanel>

</h:form>
```

wenn ich form1 und form2 vertausche (also Tab1 wird zu Tab2 und umgekehrt) dann funktioniert der Code von form2 (also der ursprünglich 2. tab)

Kann mit vll jemand sagen wie ich das Problem lösen kann?


----------



## trudi (23. Apr 2012)

ich hab das gleiche Problem auch mit einem Tab-Panel.

Kann mir vll jemand sagen was hier die Besonderheit ist?

Also hab eine Seite, ganz normal, ohne Panel-Element, wo untereinander jeweils zwei <h:form> sind mit unterschiedlichen Eingabenmasken, also Textfelder und jeweils ein Button. Da funktioniert alles prima, werd auf die gewünschten Seiten weitergleitet beim Klick auf den Button.

Was muss ich jetzt machen, wenn ich das ganze in ein Accordion oder Tab-Panel übertragen möchte?
Die Navigation funktioniert dann immer nur in dem Panel, der standardmäßig beim Laden der Seite schon offen ist. Wenn ich den Panel wechsle und da auf den Button klicke funktioniert nichts, nur die Seite wird neu geladen oder so.

Hier mal die navigation-rule aus der faces-config.xml:

[XML]
 <navigation-rule>
  <from-view-id>/Seite1.xhtml</from-view-id>
  <navigation-case>
   <from-action>#{Bean.createAction}</from-action>
   <from-outcome>success</from-outcome>
   <to-view-id>/Seite2.xhtml</to-view-id>
  </navigation-case>
  <navigation-case>
   <from-action>#{Bean.Action}</from-action>
   <from-outcome>success</from-outcome>
   <to-view-id>/Seite3.xhtml</to-view-id>
  </navigation-case>
 </navigation-rule>
[/XML]


----------



## Fant (23. Apr 2012)

Möglicherweise liegt es nur daran, dass du "Bean" vielleicht klein schreiben musst? 

Zeig diese Klasse doch einfach mal her, dann kann ich das vielleicht mal bei mir selbst testen und schauen, wo es spukt :>

Gruß Fant


----------



## trudi (24. Apr 2012)

also, hab das Ganze jetzt mal vereinfacht, dann findet man vll besser den Fehler.
ich hab jetzt ein AccordionPanel mit 2 Tabs mit jeweils dem selben Befehl für den Button:


```
<?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">
<h:html xmlns="http://www.w3.org/1999/xhtml"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>Page</title>
	<link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css" />
</h:head>
<h:body>
 <f:view id="signon">
		<h:form id="panelForm">
			
			<p:accordionPanel>
				<p:tab title="Tab1">
					<h:form id="Form1">   
	  						<h:outputText value="Text:"/>   
	       					<h:commandButton value="weiter:" action="/main.xhtml"/>
					</h:form>
				</p:tab>
		 
				<p:tab title="Tab2">
					<h:form id="Form2">
	      					<h:outputText value="Text2:"/>
							<h:commandButton value="weiter2:" action="/main.xhtml"/>
					</h:form> 
				</p:tab>
			</p:accordionPanel>
	
	</h:form>   
 </f:view>         		
</h:body>
</h:html>
```

hab das ganze zum gucken jetzt mal ohne Bean gemacht.
Resultat von action="/main.xhtml":
Im ersten Tab funktionierts (der ist standardmäßig auch offen beim Laden der Seite)
im 2. Tab funktionierts nicht. Sieht so aus als ob die Seite einfach neu Laden würde
(also der zweite Tab geht zu, der erste wieder auf und im Browser zeigts eben Laden an)


----------



## Fant (24. Apr 2012)

Was hier Probleme macht, sind die geschachelten UIForm-Komponenten. Lässt du das äußere <h:form>-Tag weg, dann sollte es problemlos funktionieren

Gruß Fant


----------



## trudi (24. Apr 2012)

hey super, daran lags, jetzt läufts, danke


----------



## trudi (26. Apr 2012)

ähm, ich bemerke grade, das hatte einen Sinn, dass ich die Forms geschachtelt habe, und zwar geht sonst der accordion, bzw. hab ein beispiel mit einem tabbedPane, der geht nicht wenn der nicht in einem Form drinne ist (also lässt sich nicht umblättern). 
Und die zwei inneren Forms kann ich nicht raus machen, weil ich in den Tabs Textfelder habe mit h:message. Wenn ich jetzt alle in ein Form packe, dann müssen sowohl die Textfelder vom ersten Tab als auch die vom 2. Tab korrekt ausgefüllt sein, damit die Aktion funktioniert, ansonsten
zeigt er mir eben die Messages an, aber in den Tabs sind ja verschiedene Funktionen implementiert,
die sollen ja unabhängig voneinander funktionieren.


----------

