Sandy
Sandy

Reputation: 83

Enter Event on InputText for CommandButton listener

I have an <p:inputText value="#{beans.text}" /> and a <p:commandButton actionlistener="#{beans.method}" />. How can I execute the actinoListener-Method from Button by 'enter' in the inputText??

Thanks for answers

somthing went wrong. Here is the code-snippet->

<h:panelGrid columns="2">
<p:commandButton actionListener="#{hoursView.saveOrUpdateHour}" />
<p:commandButton actionListener="#{hoursView.onFilterChange()}" oncomplete="dlgHoursFilter.show()" immediate="true" update=":hoursFilter" />
</h:panelGrid>
</h:panelGrid>
<h:panelGrid columns="4" class="buttonContent" id="buttonView">
<p:commandButton ajax="false" actionListener="#{hoursView.showDay()}" immediate="true" update="hoursList" />
<p:commandButton  ajax="false" actionListener="#{hoursView.showWeek()}" immediate="true" update="hoursList" />
<p:commandButton  ajax="false" actionListener="#{hoursView.showMonth()}" immediate="true" update="hoursList" />
<p:commandButton  ajax="false" actionListener="#{hoursView.showAll()}" immediate="true" update="hoursList" />
</h:panelGrid>
         <h:panelGrid columns="3" id="tableGrid">
            <p:dataTable id="hoursList" value="#{hoursView.listHours}"
                var="hours" widgetVar="hoursTable" resizableColumns="true"
                emptyMessage="#{msg.noData}" rowKey="#{hours.id}"
                selection="#{hoursView.selected}" selectionMode="single">

                <p:ajax event="rowDblselect" update=":hourEditDialog"
                    listener="#{hoursView.onHourSelect}"
                    oncomplete="dlgHourEdit.show()" />

                <f:facet name="header">
                    <h:panelGrid columns="3" class="buttonContent" id="regexContent">
                        <h:outputText value="#{msg.regexHour}" />
                        <p:inputText value="#{hoursView.regex}" id="regex">
                        </p:inputText>
                        <p:commandButton icon="addButton" id="regexSave"
                            process="regexContent" actionListener="#{hoursView.regexSave}"
                            update=":editContent:hoursList,:editContent:growl,regex">
                            <p:defaultCommand target="regexSave" scope="regexContent" />
                        </p:commandButton>
                        <p:tooltip for="regexSave" value="#{msg.regexSave}"
                            showEffect="fade" hideEffect="fade" />
                    </h:panelGrid>
                </f:facet>

If I fire 'enter'-event the regexSave-Method will be actioned. But the Method for saveOrUpdateHour,too....


somthing went wrong. Here is the code-snippet->

<h:panelGrid columns="2">
<p:commandButton actionListener="#{hoursView.saveOrUpdateHour}" />
<p:commandButton actionListener="#{hoursView.onFilterChange()}" oncomplete="dlgHoursFilter.show()" immediate="true" update=":hoursFilter" />
</h:panelGrid>
</h:panelGrid>
<h:panelGrid columns="4" class="buttonContent" id="buttonView">
<p:commandButton ajax="false" actionListener="#{hoursView.showDay()}" immediate="true" update="hoursList" />
<p:commandButton  ajax="false" actionListener="#{hoursView.showWeek()}" immediate="true" update="hoursList" />
<p:commandButton  ajax="false" actionListener="#{hoursView.showMonth()}" immediate="true" update="hoursList" />
<p:commandButton  ajax="false" actionListener="#{hoursView.showAll()}" immediate="true" update="hoursList" />
</h:panelGrid>
<h:panelGrid columns="3">
<h:outputText value="#{msg.regexHour}" />
<p:inputText value="#{hoursView.regex}" id="regex">
<p:ajax event="change" update="hoursList, growl" listener="#{hoursView.regexSave}" />
</p:inputText>
<p:commandButton  actionListener="#{hoursView.regexSave}" update="hoursList, growl" />
</h:panelGrid>

If I fire 'enter'-event the regexSave-Method will be actioned. But the Method for saveOrUpdateHour,too....

Meanwhile I have configure my code a little. Now the textfield and button are in the header of my table.

    <h:panelGrid columns="3" id="tableGrid">
            <p:dataTable id="hoursList" value="#{hoursView.listHours}"
                var="hours" widgetVar="hoursTable" resizableColumns="true"
                emptyMessage="#{msg.noData}" rowKey="#{hours.id}"
                selection="#{hoursView.selected}" selectionMode="single">

                <p:ajax event="rowDblselect" update=":hourEditDialog"
                    listener="#{hoursView.onHourSelect}"
                    oncomplete="dlgHourEdit.show()" />

                <f:facet name="header">
                    <h:panelGrid columns="3" class="buttonContent" id="regexContent">
                        <h:outputText value="#{msg.regexHour}" />
                        <p:inputText value="#{hoursView.regex}" id="regex">
                        </p:inputText>
                        <p:commandButton icon="addButton" id="regexSave"
                            process="regexContent" actionListener="#{hoursView.regexSave}"
                            update=":editContent:hoursList,:editContent:growl,regex">
                            <p:defaultCommand target="regexSave" scope="regexContent" />
                        </p:commandButton>
                        <p:tooltip for="regexSave" value="#{msg.regexSave}"
                            showEffect="fade" hideEffect="fade" />
                    </h:panelGrid>
                </f:facet>   ....

Upvotes: 0

Views: 5043

Answers (1)

Daniel
Daniel

Reputation: 37051

You can use onkeypress of the p:inputText and with the help of jquery call the .click() on your button, note that return false; will make sure that nothing (p:ajax for example) will be called after the enter will be pressed

like this:

<p:commandButton id="myButtonID" actionlistener="#{beans.method}" />


<p:inputText value="#{beans.text}" onkeypress="if (event.keyCode == 13) { jQuery('#myButtonID').click(); return false;}"/>

Update Instead of :editContent:hoursList try update="tableGrid" (refer to the table wrapper) or if you are using primefaces 3.4 try update="hoursList"

Upvotes: 3

Related Questions