Aufruf-listener bean beim drücken von enter in JSF 2 h:inputText

Bin ich derzeit Schreibe meine erste JSF-2 Seite-und ich möchte, um folgende Prinzipien umzusetzen:
Wenn der user etwas schreibt, was in einer h:inputText-element und drückt die enter-Taste ein weiteres h:inputText sollte aktualisiert werden mit ein paar Daten aus einer Datenbank.

Meine Testseite enthält den folgenden code:

<?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:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html">

    <h:body>
        <h3>JSF 2.0 Example</h3>

        <h:form>

           <h:inputText id="inputField" value="#{helloBean.name}">
              <f:ajax render="output" execute="inputField" event="keypress" listener="#{bean.myChangeListener}" /> 
           </h:inputText>
           <h2><h:outputText id="output" value="#{helloBean.name}" /></h2>  

        </h:form>
    </h:body>
</html>

Die Bohne enthält alle nötigen Getter und setter und diese Funktion:

public void myChangeEvent( AjaxBehaviorEvent event) {

        System.out.println( "VALUE CHANGED" );

}

UPDATE 2013-12-16:

Nach Stunden der Fehlersuche habe ich das problem gefunden warum nichts eingereicht wurde beim verlassen des textfield-Objekts oder drücken Sie die EINGABETASTE in das textfield. Meine web-Anwendung erstellt wurde, mit Vorlagen und in die Vorlage für meine page header eine "a4j:status" - tag und dieser war im Konflikt mit JSF 2. Nach dem entfernen der "a4j:status" -Zeile der myChangeEvent Methode wird aufgerufen, wenn ich Sie irgendwo anders auf der web-Seite nach der Bearbeitung der textfield-Wert.

Aber es gibt noch das problem, dass die ganze Seite vorgelegt wird, die beim Klick auf enter nach der änderung des textfield-Wert. Das ist weil ich auf eine Schaltfläche am unteren Rand der Seite das speichert die Benutzereingabe und deshalb unterwirft sich die ganze Seite, das ist OK. Aber sollte diese Schaltfläche nicht aufgerufen werden, wenn Sie die EINGABETASTE drücken in das textfield. Was ich noch hinzufügen zu meinem bestehenden code?

UPDATE 2013-12-17:
Nach einigem ärger mit JS habe ich es endlich funktioniert mit der Hilfe von L-Ray (danke nochmal).
Hier zeige ich die endgültige und lauffähige version mit JQuery:

<h:inputText id="inputField" value="#{helloBean.name}" >
    <f:ajax render="output" execute="inputField" event="change"  listener="#{helloBean.myChangeEvent}" />
</h:inputText>
<h2><h:outputText id="output" value="#{helloBean.name}" /></h2>  

<script type="text/javascript">
    $(document).ready(function() {

        $( "#mainForm\\:inputField" ).bind('keypress', function(e) {

            var keyCcode = e.keyCode || e.which;

            //Enter was pressed
            if(keyCcode == 13) { 
                e.target.blur();
                e.stopPropagation();
                return false;
            } else {
                return true;
            }
        });
    });
</script>
  • Ist der Wegfall der listener Attribut auf <f:ajax> ein Tippfehler?
  • Oh, ich bin sorry das war ein copy n paste-Fehler, aber immer noch die listener (die myChangeListener-Methode in der bean) nicht genannt
  • Standard, sagt der change-listener muss die Signatur public void processAjaxBehavior(javax.faces.event.AjaxBehaviorEvent event) throws javax.faces.event.AbortProcessingException). Hat die Anpassung Ihrer Zuhörer, die das Problem beheben?
  • Ich habe versucht die AjaxBehaviorEvent und auch versuchte, die keine parameter, aber das Ergebnis ist das gleiche
InformationsquelleAutor Metalhead89 | 2013-12-13
  1. 12

    Ich würde vorschlagen, nicht mit der listener="#{bean.myChangeEvent}" Attribut in der inputText (es erwartet, dass die ValueChangeEvent), aber ein Hörer Anruf von der f:ajax, die erwartet, dass entweder keine parameter oder eine AjaxBehaviorEvent.

    Ich würde auch empfehlen, nicht zu hören, um ein keypressed-Ereignis innerhalb der f:ajax aber für ein change-event, zusammen mit einem javascript - keypress - Ereignis.

    So eine Lösung, vielleicht ist der folgende code könnte für Sie arbeiten...

    <h:form>
   <h:inputText id="inputField" value="#{helloBean.name}" 
        onkeypress="if (event.keyCode == 13) {event.target.blur();event.stopPropagation();return false;} else {return true;};">
        <f:ajax render="output" execute="inputField" event="change" 
             listener="#{helloBean.myChangeEvent}"/> 
       </h:inputText>
       <h2><h:outputText id="output" value="#{helloBean.name}" /></h2>  
</h:form>

    einer der managed bean

    public void myChangeEvent( AjaxBehaviorEvent e ) {
    System.out.println( "VALUE CHANGED" );
}

    Den event Objekt gegeben werden, in unserer javascript-Teil des Browsers selbst - So läuft das außerhalb einer auf* - Attribut wird nicht funktionieren.

    Wird die javascript-Methode event.stopPropagation() ist ein jQuery-Methode oder seamingly auch eine javascript-Methode (siehe W3C-Schule), verhindern, dass andere Ereignisse aufgerufen werden, sprudeln nach unten den DOM-Baum.

    • +1 für die stopPropagation() - drücken <Enter> vorlegen wird, der die ganze form standardmäßig, die der Benutzer wahrscheinlich nicht wollen, in diesem Kontext.
    • +1 ich weiß jetzt halt propatation in reinem JSF, die ich Tat, mit a4j:ajax leicht in der Vergangenheit.
    • Leider kann ich nicht gelten, Ihre Idee zu meiner Anwendung dieses Wochenende, da bin ich nicht bei der Arbeit, aber ich habe gerade ausführen einer jsf-Beispiel aus der mkyong.com/jsf2/jsf-2-0-hello-world-example und Teste es mit dieser Modifikation. Chrome gibt die folgende Meldung: "httpError: Http-Verkehr zurückgegeben 0 status-code. Dies ist normalerweise das Ergebnis der Vermischung von ajax und volle Anfragen. Dies ist in der Regel erwünscht, für Leistung und Daten Integrität Gründen." Als mabi erzählte stopPropagation() sendet das vollständige Formular und das sollte definitiv nicht der Fall. Kann ich die einfach weglassen?
    • Wenn ich aus dem e.stopPropagation() aus Chrom immer noch sagt mir, dass ich mix ajax und einen vollständigen Antrag
    • Hinzugefügt eine Beschreibung für "stop-Propagation", die Antwort - es ist eine Methode, die verhindert, dass andere Aktionen ausgeführt werden. Teil 2 "return false" verhindert, dass die form eingereicht werden. Lassen Sie sich nicht die stop-Propagation-out, es ist eine Art von wesentlicher Bedeutung. 🙂
    • Sorry, habe ich missverstanden Ihre Antwort das erste mal. Jetzt habe ich wieder eingefügt, die stopPropagation aber es noch immer unterwirft sich das gesamte Formular auf enter drücken...so ist Teil 2 leider nicht helfen
    • Das wäre sehr verwunderlich. Haben, reinigen Sie Ihren browser-cache und sind Sie sehr sicher, dass kein Fehler aufgetreten, durch kopieren/einfügen? Tun ein double-check, und fügen Sie ein alert('hi'); in der Funktion, einfach um zu sehen, wenn es aufgerufen wird, richtig.
    • Ich fand einen Fehler: es heißt "onkeypress" und nicht von "onkeypressed', aber es funktioniert immer noch nicht richtig. Ich nutze FireBug zum testen und schrieb den folgenden JavaScript-code: onkeypress="(function(e) { if (- e.keyCode == 13) {console.log('enter gedrückt');} else {console.log('etwas anderes gedrückt');}}(0));" druckt Er immer aus der letzten Aussage, auch wenn Sie die EINGABETASTE drücken. Aber ich weiß auch, dass 13 sein sollte, den richtigen keyCode für die enter-Taste. Was bin ich mising?
    • Wenn ich drucken Sie die Schlüsselcode-on FireBug (Konsole.log(e.keyCode);), sagt es mir thet es ist undefinied, die erklären, warum es springt immer in den else-Teil
    • Thnx für den Hinweis mit onkeypress, das war der Teil, den ich konnte nicht copy & Paste 😉
    • Okay, verschoben die Anweisungen aus der function(e) - Rahmen. Sollte jetzt funktionieren. 🙂

    InformationsquelleAutor L-Ray
Schreibe einen Kommentar