Autouzupełnianie PrimeFaces: itemSelect versus change events
Muszę wyzwolić aktualizację ajax po zmianie na pole tekstowe, które jest<p:autoComplete>
składnik. Zauważyłem, że jeśli użytkownik zdecyduje się wpisać tekst ręcznie, zdarzenie jest zmianą, natomiast jeśli użytkownik kliknie jedną z sugestii autouzupełniania, zdarzeniem jest itemSelect. Dodałem więc dwa<p:ajax>
dzieci do wejścia, każda wywołująca tę samą metodę i mającą tę samą listę aktualizacji, ale mającą takąevent="change"
i innievent="itemSelect"
.
Jednak teraz odkrywam coś dziwnego. Na przykład podczas normalnego trybu serwera otworzyłem stronę i wpisałem „12”. Autouzupełnianie oferowało „1233” i „1234” jako sugestie. Kliknąłem „1233” i pozornie nic się nie stało. Ponownie kliknąłem i wszystko wypełniłem.
Powtórz to w debuggerze z punktem przerwania w procedurze obsługi zdarzeń i widzę, że po pierwszym kliknięciu wartość wynosi „12”, a po drugim kliknięciu staje się „1233”.
Przełączając komentowanie dwóch różnych<p:ajax>
Widzę różne konsekwencje. Bez „zmiany” obsługa nigdy nie zostanie wywołana, jeśli użytkownik wybierze sugestię autouzupełniania, a bez elementu „itemSelect” obsługa nigdy nie zostanie wywołana, jeśli użytkownik wpisze ręcznie. Ale w obu przypadkach są dwa połączenia i jestem pewien, że pojawią się skargi dotyczące podwójnego kliknięcia.
Jakiś pseudo kod dla tych, którzy lubią, najpierw xhtml:
<p:autoComplete id="itemId" value="#{myBacker.myBean.itemNumber}"
required="true" completeMethod="#{myBacker.idAutoComplete}">
<p:ajax event="itemSelect" update="beanDetails"
listener="#{myBacker.idChangeEventListener()}" />
<p:ajax event="change" update="beanDetails"
listener="#{myBacker.idChangeEventListener()}" />
</p:autoComplete>
<h:panelGroup id="beanDetails">
<h:panelGroup rendered="#{not empty myBacker.myBean.institutionName}">
<h:outputText value="#{myBacker.myBean.institutionName}" />
<!-- Continues with address, phone, etc.. -->
</h:panelGroup>
</h:panelGroup>
Następnie kod komponentu bean Java:
public void idChangeEventListener() {
myBean = myDAO.getDetails(myBean);
// another couple of init-type method calls
}