Setzen Sie den Fokus auf ein element, das bereits teilweise erbracht

Ich habe ein Formular mit einem input-element, dass updates eine Tafel mit form-Elemente auf einer blur Veranstaltung. Ich möchte die Benutzer in der Lage sein zu navigieren, in dem Sie die tab - Taste. So aus der ersten Eingabe mit der tab sollten geben Sie den Fokus auf das erste Formular-element des gerenderten form.

Input-element mit blur Veranstaltung:

<h:inputText class="text" id="profileLocation" value="#{cc.attrs.managedBean.profileLocation}">
    <f:validateRegex pattern="([A-Z]{2}[A-Z0-9])(?:\.(\d+))?(\.\d+)?(\.\d+)?" />
    <f:ajax event="blur" render="assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}"/>
</h:inputText>

Machen wird es die assertionLocationPanel definiert als:

<p:outputPanel id="assertionLocationPanel">
    <h:inputText value="#{cc.attrs.managedBean.property}">
    </h:inputText>
</p:outputPanel>

Bei der Verwendung der tab - Taste, die Tafel wird aktualisiert, aber der Fokus ist nicht auf das input-element. Ich denke, dies ist wegen der übergabe. Wenn das panel nicht aktualisiert, der Fokus wird auf das richtige element.

Lösung

Aufrufen einer javascript-Funktion angegeben in der onevent Attribut:

<f:ajax event="blur" render="profileLocationErrorMessage assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}" onevent="setFocus"/>

definieren die JS Funktion als:

<script type="text/javascript">  
    function setFocus() {
        $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus();
    }  
</script>

Hatte ich zum Aufruf der JS-Funktion setFocus statt $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus(); im onevent Attribut, weil es nicht funktioniert hat. Ich hielt die erzeugte ids, weil ich mit composite -, auch ich definierte javax.faces.SEPARATOR_CHAR zu -.

Wenn Sie mit den regulären : separator, Sie haben zu entkommen der separator als #ConditionalComposite\\:ConditionalForm1\\:ProfileLocation\\:segmentInstanceNumber.

  • Wenn du eine Antwort auf deine eigene Frage, poste es als Antwort und es akzeptieren. Dies ist die empfohlene Praxis. Auf einer anderen Anmerkung, Ihr javascript-Funktion ausgeführt wird, die die focus() drei mal (einmal für jede phase des ajax-request). Um das zu verhindern, sollte einen parameter namens data, und nur führen Sie die focus() wenn data.status == 'success'.
InformationsquelleAutor Sydney | 2011-08-10
  1. 2

    Haben Sie versucht, diese;

    Zunächst eine id mit inputText unter outpupanel. 

    <p:outputPanel id="assertionLocationPanel">
<h:inputText value="#{cc.attrs.managedBean.property}" id="assertioninput">
</h:inputText>

    dann hinzufügen von ajax-complete-Ereignis wie dieses, und oncomplete Fokus auf den input, den Sie wollen.

    <a4j:ajax event="complete"  render="assertionLocationPanel" oncomplete="assertioninput.focus();"/>

    durch die Art und Weise vergessen Sie nicht, setzen Sie form prependid=false, um den direkten Aufruf die id der inputtext

    • Ich akzeptiere Ihre Antwort, denn es hat mir geholfen, eine Lösung zu finden. Ich aktualisiert meine Frage mit der Lösung im inneren. Das Konzept ist ähnlich zu dem, was Sie beraten. Danke.
    InformationsquelleAutor Mustafa
Schreibe einen Kommentar