javascript - Using PrimeFaces <p:ajax>, fire up Ajax in inputText only on keystrokes that change the field - Stack

admin管理员组

文章数量:1414908

I am using PrimeFaces and have a p:inputText field where I need to update some ponents on the view based on the latest keystroke inside that p:inputText. Here's the code:

<p:inputText value="#{customerLController.surnameFilterConstraint}"
             id="surnamefilterfield">
    <p:ajax event="keyup" 
            update=":custForm:custDataTable"
            listener="#{customerLController.focusSurname}"
            onplete="primeFacesId('surnamefilterfield')"/>
</p:inputText>

The thing is, the above code fires up Ajax even in the case of arrow keystrokes (which I would rather avoid given the costly update). Ideally I would like a different version of p:ajax event="change" with the qualification that change is pronounced on keystrokes and not when the user hits Enter (which is what happens now).

If the p:ajax ponent doesn't allow a way to filter out certain keyup events, then I gather that the only (?) alternative would be to call JavaScript on the client side and then implement the Ajax call in Javascript but then I would forsake the convenience of using the PrimeFaces p:ajax ponent, wouldn't I?

I am using PrimeFaces and have a p:inputText field where I need to update some ponents on the view based on the latest keystroke inside that p:inputText. Here's the code:

<p:inputText value="#{customerLController.surnameFilterConstraint}"
             id="surnamefilterfield">
    <p:ajax event="keyup" 
            update=":custForm:custDataTable"
            listener="#{customerLController.focusSurname}"
            onplete="primeFacesId('surnamefilterfield')"/>
</p:inputText>

The thing is, the above code fires up Ajax even in the case of arrow keystrokes (which I would rather avoid given the costly update). Ideally I would like a different version of p:ajax event="change" with the qualification that change is pronounced on keystrokes and not when the user hits Enter (which is what happens now).

If the p:ajax ponent doesn't allow a way to filter out certain keyup events, then I gather that the only (?) alternative would be to call JavaScript on the client side and then implement the Ajax call in Javascript but then I would forsake the convenience of using the PrimeFaces p:ajax ponent, wouldn't I?

• javascript
• ajax
• primefaces

Share Improve this question Follow edited Mar 1, 2013 at 16:42 Marcus Junius Brutus asked Jul 27, 2012 at 12:47 Marcus Junius BrutusMarcus Junius Brutus 27.3k4646 gold badges202202 silver badges350350 bronze badges 3

• im not familiar with PrimeFaces, but if you can subscribe to the keypress instead of keyup event, it should fix this problem. key press will only fire for keys that map directly to a printable character. – jbabey Commented Jul 27, 2012 at 12:52
• no, that doesn't do the trick, at least not in Firefox and Konkeror that I tried. – Marcus Junius Brutus Commented Jul 29, 2012 at 17:18
• 2 There is an answer right here at SO: stackoverflow./questions/8401218/… – Dominik Sandjaja Commented Mar 1, 2013 at 10:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Since JSF 2.2, I am using elegant way to solve this issue.

Solution is based on bination of p:remoteCommand (as pointed out in one of ments) and namespace http://xmlns.jcp/jsf/passthrough which allows you to define native HTML event attributes in JSF ponents.

In this case it would be:

1. First add new namespace to your page

   xmlns:pt="http://xmlns.jcp/jsf/passthrough"
   

2. Modify p:inputText and add p:remoteCommand

   <p:inputText id="surnamefilterfield" 
             value="#{customerLController.surnameFilterConstraint}" 
             pt:onkeyup="onKeyUpFilterKeyCode(event)"/>
   <p:remoteCommand delay="300" name="onFilteredKeyUp" 
                 actionListener="#{customerLController.focusSurname}" /> 
   

3. add JavaScript function

      function onKeyUpFilterKeyCode(event){
           var keyCode=event.keyCode;
           console.log("Key code = " + keyCode);
           //if key is not ENTER and not cursor/arrow keys
           if ((keyCode != 13) && !((keyCode >= 37) && keyCode <= 40)){
               //call remoteCommand
               onFilteredKeyUp();
           }
       }
   

(since this JS function contains "special" XML chars follow BalusC remendations about how to add it to JSF/XML web page)

The advantage of this approach is that you can ajaxify any native HTML event supported by ponent (and WEB browser) while still using JSF/Primefaces ponents and "JSF way" of creating WEB pages.

本文标签：