Tabelle Aktualisieren mit AJAX + JavaServer faces

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>

<h:panelGrid 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>
<h:eek:utputText title="#{teststep.name}" value="#{mitarbeiter.beschaeftigtSeit}">
<f:convertDateTime pattern="dd-MM-yyyy"/>

</h:eek:utputText>
</h:column>

</h:dataTable>
</h:panelGrid>

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

CerO

Mitglied
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.

Java:
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. :oops:
 
Zuletzt bearbeitet:

Ähnliche Java Themen

Neue Themen


Oben