CODEWITHSUNDEEP
jsfprimefaces
Landister
Landister

Reputation: 2224

Calling a f:ajax keydown event but only when the left arrow key is pressed

Is there a good to make it so the following event only call the ajax request on the left arrow and acts normally otherwise. 

<h:selectOneMenu id="menuId" value="#{bean.value}" converter="entityConverter">
        <f:selectItem noSelectionOption="true" itemLabel="All Categories"/>
        <f:selectItems  value="#{bean.valueList" var="value" 
            itemLabel="#{value.subcatName}" itemValue="#{value}"/>
            <f:ajax event="keydown"
                    listener="#{bean.goBack()}"
                    execute="@this"                                 
                    render="@form"
                    onevent="function(data) { if (data.status === 'begin') { //is there something I can do here?}}"/>
</h:selectOneMenu>

Upvotes: 0

Views: 2801

Answers (1)

Aritz
Aritz

Reputation: 31651

As you seem to be using Primefaces, take advantage of its p:remoteCommand utility. It creates a javascript function which can be used to make ajax requests. For your case it could be:

@ManagedBean
@ViewScoped
public class SelectionBean implements Serializable {

    private List<String> values = Arrays.asList("val1", "val2");

    private String selection;

    public String getSelection() {
        return selection;
    }

    public void setSelection(String selection) {
        this.selection = selection;
    }

    public List<String> getValues() {
        return values;
    }

    public void goBack() {
        System.out.println("Going back...");
    }

}

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head />

<h:body>

    <h:form>
        <p:remoteCommand name="goBack"
            actionListener="#{selectionBean.goBack}" />
        <script>
            function processKey(e) {
                if (e.keyCode == 37) {
                    goBack();
                }
            }
        </script>
        <h:selectOneMenu value="#{selectionBean.selection}"
            onkeydown="processKey(event);">
            <f:selectItems value="#{selectionBean.values}" />
        </h:selectOneMenu>
    </h:form>

</h:body>
</html>

Here we use an auxiliary JS function which checks if the event keyCode is the one for the left arrow. If true, call the Primefaces generated JS function which will trigger the server side method.

Upvotes: 3

Related Questions