# Tabelle Aktualisieren mit AJAX + JavaServer faces



## Pumping Lemma (6. Feb 2014)

Hallo Zusammen,

ich komme mit meinem Wissen momentan nicht weiter und google erschlägt mich mit Möglichkeiten zu meinem Anliegen, leider helfen sie mir nicht wirklich weiter.

Ich entwickle eine Webanwendung welche Datensätze aus eine MySQl Database holt und im Browser in einer Tabelle anzeigt (Funktioniert soweit). 
(Frontend wird mit JavaServer Faces realisiert)

Problem:
Über eine selectOnRadio Auswahl mit drei Auswahlmöglichkeiten möchte ich je nach dem wo die Markierung gesetzte wurde die richtige Tabelle dazu ausgeben.

Code des selectOnRadio:
[XML] <h:selectOneRadio id="Status" required="true"  value="#{mitarbeiterController.status}">
                    <f:selectItem  itemLabel="alle" itemValue="ALLE"/>
                    <f:selectItem itemLabel="erledigt" itemValue="ERLEDIGTE"/>
                    <f:selectItem  itemLabel="offene" itemValue="OFFENE"/>
                    <f:ajax render="tabelle"/>
                </h:selectOneRadio>[/XML]

Die *Tabelle* soll einfach auf der Seite neu geladen werden.
Leider verstehe ich nicht wie ich die gewählt Auswahl, also die
itemValue weiter übergebe, das auch die richtige Tabelle geladen wird.

Ich stehe mit meiner Logik etwas auf dem Schlauch.

Danke für eure Mühe

kompletter Seitencode:
[XML]<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>

</h:head>
<h:body>
    <ui:composition template="WEB-INF/templates/main.xhtml">
        <ui:define name="content">

            <ul>

                <h:selectOneRadio id="Status" required="true"  value="#{mitarbeiterController.status}">
                    <f:selectItem  itemLabel="alle" itemValue="ALLE"/>
                    <f:selectItem itemLabel="erledigt" itemValue="ERLEDIGTE"/>
                    <f:selectItem  itemLabel="offene" itemValue="OFFENE"/>
                    <f:ajax render="tabelle"/>
                </h:selectOneRadio>

             <hanelGrid id="tabelle">
                <h:dataTable  value="#{mitarbeiterUiLogic.offeneMitartbeiter()}" var="mitarbeiter"
                             styleClass="order-table"
                             headerClass="order-table-header"
                             rowClasses="order-table-odd-row,order-table-even-row">
                    <h:column>
                        <f:facet name="header">ID</f:facet>
                        #{mitarbeiter.id}
                    </h:column>
                    <h:column>
                        <f:facet name="header">BA/BE User</f:facet>
                        #{mitarbeiter.baUser}
                    </h:column>
                    <h:column>
                        <f:facet name="header">Vorname</f:facet>
                        #{mitarbeiter.vorname}
                    </h:column>
                    <h:column>
                        <f:facet name="header">Nachname</f:facet>
                        #{mitarbeiter.name}
                    </h:column>
                    <h:column>
                        <f:facet name="header">Status</f:facet>
                        #{mitarbeiter.status}
                    </h:column>
                    <h:column>
                        <f:facet name="header">Art</f:facet>
                        #{mitarbeiter.art}
                    </h:column>
                    <h:column>
                        <f:facet name="header">beschäftigung beginnt am</f:facet>
                        <hutputText title="#{teststep.name}" value="#{mitarbeiter.beschaeftigtSeit}">
                            <f:convertDateTime pattern="dd-MM-yyyy"/>

                        </hutputText>
                    </h:column>

                </h:dataTable>
               </hanelGrid>

            </ul>
        </ui:define>
    </ui:composition>
</h:body>
</html>
[/XML]


----------



## CerO (6. Feb 2014)

Hi,

Also die AJAX Spalte im SelectOneRadio-Block änderst du erstmal so ab:

                    [XML]<f:ajax event="change" listener"#{mitarbeiterController.radioButtonChangeAction}" update="tabelle"/>[/XML]

In die Methode radioButtonChangeAction kommt dann eine if-Abfrage rein, welche mitarbeiterController.status abfragt. 


```
public void radioButtonChangeAction(){
if (status.equals("ALLE")) {
//hier wird das Value für die Tabelle: "Alle" gesetzt 
} else if(status.equals("ERLEDIGTE")) {
//hier wird das Value für die Tabelle: "Erledigte" gesetzt
} else if(status.equals("OFFENE")) {
//und hier wird das Value für die Tabelle: "OFFENE" gesetzt
}
}
```

Und das sollte es eigentlich gewesen sein. Musst jetzt nur noch halt die Sourcen jeweils da setzten wo ich die Kommentare hingesetzt habe. 

Gruß Alex

PS.: Sry falls es nicht so schön aussieht in den Codeblöcken... ist mein erster Beitrag in dem ich die benutze.


----------



## Pumping Lemma (6. Feb 2014)

Ich werde es morgen gleich ausprobieren.
Schein mir auf den ersten Blick sehr logisch :toll:


----------

