CODEWITHSUNDEEP
ajaxjsfprimefaceskeyup
dsievers
dsievers

Reputation: 51

primefaces jsf p:ajax event keyup ignore arrow keys

I have a inputText field that has a validate button next to it. When you click the validate button it does some backend validation and a green check mark appears next to the button. I want that green check mark to disappear when the value changes, and right away not when losing focus because there is a test button on the page that i also disable/enable when valid. so event="blur" or even="change" won't work cause they can click the button when the input text field has changed. I used keyup and that works great, but arrow keys and tab etc... trigger the event and I dont want them to.

<h:inputText id="baseURL" style="width:425px;" value="#{View.baseURL}">
    <p:ajax event="keyup" update="validIcon :addEditCatalogForm:testUrlButton" listener="#{View.resetValidation()}"/>
</h:inputText>

I see JQuery options for this, but I need one that works with the jsf and primefaces tags.

Upvotes: 1

Views: 5135

Answers (3)

cghislai
cghislai

Reputation: 1791

I found a simpler solution by just returning your arrays of invalid keys as a JS array string:

public String getInvalidKeysJSArray() {
    return "[9, 13, 16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 45, 224]";
}

Then in your input component, the onkeyup parameter would look like

onkeyup="return '#{keyUtilsController.invalidKeysJSArray}'.indexOf(event.keyCode) &lt; 0;"

Please note that IE Array prototype might not contain the indeoxOf function.

Upvotes: 0

dsievers
dsievers

Reputation: 51

So using Thrax's answer I did it using the back end. I think this solution is messy, and I hope there is a cleaner way to do this, so If anyone else has a better solution please let me know.

Here is the code:

  <h:inputText id="baseURL" style="width:425px;" value="#{bean.valueYouAreChanging}" onkeyup="document.getElementById('#{keyCode.clientId}').value=event.keyCode">
        <p:ajax event="keyup" process="@this keyCode" update="validIcon :form:testUrlButtonPost" listener="#{bean.resetValidation}"/>
  </h:inputText>
  <h:inputHidden id="keyCode" binding="#{keyCode}" value="#{bean.keyCode}" />

Here is the bean code. I don't want a lot of keys to trigger the change such as arrow keys, tab, enter, home, end, etc...

public void resetValidation() {

    String[] invalidKeys = {"9","13","16","17","18","19","20","33","34","35","36","37","38","39","40","45","224"};
    List<String> keys = new ArrayList<>();
    for(String key : invalidKeys) {
        keys.add(key);
    }
    if(!keys.contains(keyCode)) {
        validBaseURL = false;
    }
}

Upvotes: 1

Thrax
Thrax

Reputation: 1964

From what I've seen here : http://forum.primefaces.org/viewtopic.php?f=3&t=24788

The solution would be close to :

<h:inputText id="baseURL" style="width:425px;" value="#{View.baseURL}" onkeyup="if (event.keyCode != ####_YOUR_KEYS_####) return false;">
    <p:ajax event="keyup" execute="@this keyCode" update="validIcon :addEditCatalogForm:testUrlButton" listener="#{View.resetValidation()}"/>
</h:inputText>

Upvotes: 1

Related Questions