Ich habe ein Facelet, die Lehrer aus der Datenbank mit Name, Profilbild usw. geladen dynamisch aufgelistet Liste usw. Jeder gelisteten Lehrer hat sein eigenes Kontaktformular, das versteckt wird Nach dem Laden der Seite, und einem Knopf "in Kontakt", der, onclick, das unten stehende Kontaktformular öffnet und den Knopf "in Kontakt" versteckt. Das Formular enthält einige Textfelder und eine Senden-Schaltfläche "Anfrage senden". Nachdem ich auf "Anfrage senden" geklickt habe, möchte ich eine Backing-Bean-Methode aufrufen, die die Anfrage in der Datenbank speichert und mit Javascript das Kontaktformular wieder ausblendet und stattdessen die Schaltfläche "In Kontakt kommen" anzeigt.Javascript-Funktion innerhalb von ui: wiederholen, um Kontaktformular zu zeigen/nicht funktioniert
Hier ist die Seite mit einer Liste der Lehrer:
<ui:composition template="/WEB-INF/templates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<script type="text/javascript">
$(document).ready(function() {
$(".request_form").hide();
});
</script>
<ui:repeat id="teachers" var="teacher" value="#{teachersController.teachers}" varStatus="it">
profile picture, infos, etc.
<p:button id="btn_open_request_form"
value="get in touch"
onclick="$('#teachers:#{it.index}:request_form').show(300); $(this).hide(); return false;"/>
<h:form class="request_form" id="request_form" prependId="false">
Text inputs for email, message...
<p:button value="#{msg['cancel']}"
onclick="$('#teachers:#{it.index}:request_form').hide(300); $('#teachers:#{it.index}:btn_open_request_form').show(); return false;"/>
<p:commandButton value="send request"
process="@form"
update="@form"
action="#{teachersController.sendRequest(teacher.id)}"
oncomplete="$('#teachers:#{it.index}:request_form').hide(300); $('#btn_open_request_form_#{it.index}').show();"
/>
</h:form>
<h:messages></h:messages>
<br/>
</ui:repeat>
</ui:define>
</ui:composition>
In einem ersten Versuch I c wurde mit: forEach statt ui: repeat über die Lehrer iterieren. Das Anzeigen/Verbergen des Kontaktformulars und der Schaltflächen mit jQuery funktionierte perfekt, aber die Aktionsmethode von p: commandButton konnte nicht aufgerufen werden und es wurde keine Anfrage gesendet, also wechselte ich zu ui: repeat.
Jetzt werden die Anfragen in der Datenbank gespeichert, aber das Verbergen/Anzeigen mit Javascript funktioniert nicht mehr. Die Formeln werden wie erwartet von Pagenload ausgeblendet. Aber dann, wenn ich auf "in Kontakt" klicke, wird der Button selbst ausgeblendet, wie ich will, aber es wird kein Formular angezeigt.
Es dauerte eine Weile, bis ich herausgefunden habe, wie jsf alle IDs generiert, aber ich habe es am Ende richtig gemacht, indem ich den generierten HTML-Code überprüft habe. Hier ist die erzeugte HTML-Code der Taste:
<button id="teachers:1:btn_open_request_form"
name="teachers:1:btn_open_request_form"
type="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
onclick="$('#teachers:1:request_form').show(300); $(this).hide(); return false;;window.open('/lehrerverzeichnis/faces/requests/teachers.xhtml','_self')">
hier derjenige der Form:
<form id="teachers:1:request_form"
name="teachers:1:request_form"
method="post"
class="request_form" ...>
Was ich falsch zu bekommen? Vorher, bei der Verwendung von c: forEach, funktionierte es gut (mit verschiedenen IDs natürlich). Aber der Selektor in der jQuery-Funktion stimmt mit der Form-ID überein, warum wird sie nach dem Klicken auf die Schaltfläche nicht angezeigt? Der Button selbst wird danach durch den Befehl ausgeblendet, so dass die onclick-Funktion sicher aufgerufen wird.
Es scheint mir, dass die Kombination von Javascript und JSF keine gute Idee ist. Was könnte ich stattdessen tun?
Vielen Dank im Voraus ..