# AJAX - Problem



## internet (24. Mai 2010)

Hallo, 
ich würde gerne folgendes mit AJAX machen:

Wenn ich ein Element aus einer Select-List auswähle, soll untendran eine weitere Select List erscheinen und wenn das ausgewählt wurde, soll noch einmal eine Select List erscheinen..

Bsp: 
Man wählt erst das Land aus ---> dann wird gefiltert welche Bundesländer in Frage kommen --->
dann wird gefiltert welche Städte in Frage kommen.

Kann mir bitte jemand dabei helfen.


----------



## Luu (25. Mai 2010)

Hm, welches Framework wird benutzt?


----------



## internet (25. Mai 2010)

Primefaces...


----------



## Luu (25. Mai 2010)

```
<h:selectOneMenu ....>
<p:ajax event="onchange" actionListener="#{bean.selectionChanged}" update="panel1"/>
</h:selectOneMenu>

public selectionChanged(ActionEvent ev){
 // SelectItems fuer zweite Combo erzeugen
 ...
 // Gebundenes outputPanel true setzen und rerendern
 panel1.setRendered(true);
}

<p:outputPanel binding="#{bean.panel1}" id="panel1">
<h:selectOneMenu ...>
<p:ajax event="onchange" actionListener=""{bean.selectionChanged} update="panel2"/>
</h:selectOneMenu>
</p:outputPanel>

...
```


----------



## internet (25. Mai 2010)

Luu hat gesagt.:


> ```
> public selectionChanged(ActionEvent ev){
> // SelectItems fuer zweite Combo erzeugen
> ...
> ...




was ist panel1 ?
=> panel1 cannot be resolved


----------



## Luu (25. Mai 2010)

panel1 ist das binding der komponente in der java-klasse.


```
<p:outputPanel binding="#{bean.panel1}" id="panel1">


private OutputPanel panel1 = new OutputPanel();
private OutputPanel getPanel1(){
return panel1;
}
private void setPanel1(OutputPanel panel){
panel1 = panel;
}
```


----------



## internet (25. Mai 2010)

klappt leider noch nicht.
Es werden beim Aufruf der Seite sofort beide Select - Listen angezeigt:

```
<h:outputLabel 		value="Firma *"
													styleClass="schriftfett"/>
								<h:selectOneMenu   id="firma" value="#{pv.firmaEingabe}">
			    					<f:selectItems value="#{pv.firmenliste}" />
									<p:ajax event="onchange" actionListener="#{pv.selectionChanged}" update="panel1"/>
								</h:selectOneMenu>
								<f:verbatim>*</f:verbatim>
								
								
								<h:outputLabel 		value="Kostenstelle *"
													styleClass="schriftfett"/>
								<p:outputPanel binding="#{pv.panel1}" id="panel1">
									<h:selectOneMenu   id="kostenstelle" value="#{pv.kostenstelleEingabe}">
			    					<f:selectItems value="#{pv.kostenstellenliste}" />
									<p:ajax event="onchange" actionListener="{pv.selectionChanged}" update="panel2"/>
									</h:selectOneMenu>
								</p:outputPanel>
								<f:verbatim>*</f:verbatim>
```


----------



## Luu (25. Mai 2010)

Die zweite Combo muss initial noch 'versteckt' werden
Dazu Definition zweier Styleclassen

```
private static final String CSS_HIDE = "display:none;";
private static final String CSS_SHOW = "display:block;";
```
1. Bevor Seite gerendert wird:

```
panel1.setStyleClass(CSS_HIDE) // Panel1 wirdnicht angezeigt
```
2. In actionMethode selectionChanged

```
panel1.setStyleClass(CSS_SHOW) // Panel1 wird angezeigt
```


----------



## internet (25. Mai 2010)

Geht leider immer noch nicht:
Hier die Action - Methode:


```
public void selectionChanged(ActionEvent ev) throws KostenstelleNotFoundException{
    	// SelectItems fuer zweite Combo erzeugen
    	kostenstellenliste = pvSpring.findKostenstelleByFirma(firmaEingabe);
    	
    	// Gebundenes outputPanel true setzen und rerendern
    	panel1.setRendered(true);
    	panel1.setStyleClass(CSS_SHOW); // Panel1 wird angezeigt
    }
```


Und hier die Methode, die die Seite aufruft:

```
public String selectForCreatePerson()
	{
		panel1.setStyleClass(CSS_HIDE);
		return "/personenverwaltung/createPerson";
	}
```


----------



## Luu (25. Mai 2010)

Werden immer noch beide Combos sofort angezeigt??

Falls ja, wird die Panel-Styleklasse wieder ueberschrieben (also irgendwo nach dieser Methode selectForCreatePerson())

==> <putputPanel binding="#{pv.panel1}" id="panel1" *style="display:none"*>


----------



## internet (25. Mai 2010)

nun wird das zweite Panel zwar nicht mehr angezeigt, 
aber es erscheint auch nicht, wenn man beim ersten Selectmenü etwas auswählt...


----------



## Luu (25. Mai 2010)

Wird selectionChanged() aufgerufen bzw. 
wird der Ajax-Request beim onchange-event der Combo ausgelöst?


----------



## internet (25. Mai 2010)

wie kann ich das sehen?


----------



## Luu (25. Mai 2010)

Eh, wie waers mit nem System.out.println("selectionChanged"); in der Methode selectionChanged() ?
Ajax-Call Tracing ist Sache des Frameworks, wie das bei PrimeFaces laeut, weiss ich nicht, dat System.out sollte aber scho helfen.


----------



## internet (25. Mai 2010)

also ausgeben tut es mir nichts....
*public void selectionChanged(ActionEvent ev)*

Es ist ja eine VOID - Methode, oder?


----------



## Luu (25. Mai 2010)

```
public void selectionChanged(ActionEvent ev) throws KostenstelleNotFoundException{
         
System.out.println("selectionChanged");

        // SelectItems fuer zweite Combo erzeugen
        kostenstellenliste = pvSpring.findKostenstelleByFirma(firmaEingabe);
        
        // Gebundenes outputPanel true setzen und rerendern
        panel1.setRendered(true);
        panel1.setStyleClass(CSS_SHOW); // Panel1 wird angezeigt
    }
```

Dann sollte, wenn in der Combo ein Wert geändert wird, diese Methode aufgerufen und die System.out Ausgabe  in die Konsole geschrieben werden .....


----------



## internet (25. Mai 2010)

nein, wird leider nichts angezeigt...


----------



## Luu (25. Mai 2010)

Der onchange-Event der combo kommt nicht bei <p:ajax.. /> an. Mal mit anderen Events versuchen, ob dann zumindest das zweite Panel angezeigt wird (onselect, onclick etc pp)


----------



## internet (25. Mai 2010)

tut leider auch nichts


----------

