Thursday, November 5, 2015

Automatically trigger event when user has done editing

In the existing use case behavior, the update event function is triggered when the user is pressing enter key while the cursor still focusing in the text field.
<h:form id="theform">
   <p:inputText id="search" value="#{controller.text}" placeholder="Press enter to search" onkeypress="if(event.keyCode == 13) { searchCommand(); return false; }" />
   <p:remoteCommand name="searchCommand" actionListener="#{controller.doSearch}" update="dataTable" />
   <p:commandButton onclick="searchCommand()" value="saerch" update="dataTable" />
</h:form>
When the field is reset, the user has to press enter key again in order to trigger the update field. I felt this behavior was so annoying, it would be much better if the field could automatically trigger the update event function when the user has done editing. Thus, I was to use an Ajax listener to do this.
<h:form id="theform">
   <p:inputText id="search" value="#{controller.searchText}" placeholder="Press enter to search">
      <p:ajax listener="#{controller.doSearch}" update="dataTable" />
   </p:inputText>
   <p:remoteCommand name="searchCommand" actionListener="#{controller.doSearch}" update="dataTable" />
   <p:commandButton onclick="searchCommand()" value="saerch" update="dataTable" />
</h:form>
AHhhh~ This was nice, now I feel complete.

No comments: