10

I am working with primefaces and I have the following problem, I have a toolbar with several buttons and components like inputtext and others in the form, but when I press the key Enter in some component the first button of the toolbar is called, in this case commandbutton "idButtomNuevo" is called because it is in the first position.

My code:

almacen.xhtml

<ui:composition  
 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:form id="idFormAlmacen" >
    <p:focus context="idFormAlmacen"/>
    <p:growl id="growl" showDetail="true" life="2500" for="keyAlmacen" globalOnly="true"/>
    <p:panel header="Almacen" styleClass="texto-panel"/>
    <ui:include src="/pages/logistica/almacen/toolbar_almacen.xhtml"/>
    <ui:include src="#{almacenBean.pathbodyAlmacen}" />    
 </h:form>
 <ui:include src="/pages/logistica/almacen/dialogos_almacen.xhtml" />
</ui:composition> 

toolbar_almacen.xhtml

<ui:composition 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">
    <p:toolbar>  
        <p:toolbarGroup align="left" styleClass="panelgrid-css">
            <p:commandButton id="idButtomNuevo" title="Nuevo"  icon="ui-icon-document" process="@this" value="Nuevo"
                    actionListener="#{almacenBean.limpiarAlmacen}" update="idFormAlmacen" immediate="true">
                 <p:resetInput target="idFormAlmacen"/>
            </p:commandButton>
            <p:commandButton id="idButtomGuardar" title="Guardar" icon="ui-icon-disk" action="#{almacenBean.guardarAlmacen}" 
                 disabled="#{almacenBean.au.btGuardarDisabled}" update=":idFormAlmacen" validateClient="true" value="Guardar"/>
            <p:commandButton id="idButtomEliminar" title="Eliminar" icon="ui-icon-trash" actionListener="#{almacenBean.eliminarAlmacen}"
                 disabled="#{almacenBean.au.btGuardarDisabled}" update="idFormAlmacen" process="@this" immediate="true"
                 value="Eliminar"/>
            <p:commandButton id="idButtomListar" title="Listar" icon="ui-icon-grip-solid-horizontal" process="@this" value="Listar"
                             actionListener="#{almacenBean.listarAlmacen}" update="idFormAlmacen" immediate="true"/>
            <p:commandButton id="idButtomBuscar" title="Buscar" icon="ui-icon-search" value="Buscar"
                             actionListener="#{almacenBean.buscarAlmacen}" immediate="true">
                <p:ajax event="dialogReturn" update="idFormAlmacen"/>
            </p:commandButton>
        </p:toolbarGroup>  
    </p:toolbar>
 </ui:composition>

pathbodyAlmacen = "/pages/logistica/almacen/crear_almacen.xhtml"

<ui:composition  
  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" >

  <p:panel header="Datos Generales de Almacen" />  
  <h:panelGrid id="idPanelAlmacen1" columns="3" width="100%" border="0" columnClasses="colC1-T,colC2-T">
    <p:outputLabel  for="idEmpresa" value="Empresa:" style="margin-right:2px;"/>  
    <p:inputText id="idEmpresa"  style="width:350px;" value="#{almacenBean.alVista.strEmpresa}" readonly="true"/>  
    <h:outputText value="&#160;&#160;&#160;"/>

    <p:outputLabel for="idCodProveedor" value="Codigo:" style="margin-right:2px;"/>  
    <p:inputText id="idCodProveedor" value="#{almacenBean.alVista.codigo}" style="width:350px;" required="true"
                 requiredMessage="Ingrese Codigo ">
        <p:clientValidator />
    </p:inputText>  
    <p:message for="idCodProveedor" display="text"/>

    <p:outputLabel for="idNombre" value="Nombre:" style="margin-right:2px;"/>  
    <p:inputText id="idNombre" value="#{almacenBean.alVista.nombre}" style="width:350px;"
                 required="true" requiredMessage="Ingrese Nombre de Almacen">
        <p:clientValidator event="keyup" />
    </p:inputText>
    <p:message for="idNombre" display="text"/>
  </h:panelGrid>

  <h:panelGrid id="idPgDirAlmacen" columns="4" width="100%" border="0" columnClasses="colC1-T,colC2-T,colC3">
    <p:outputLabel for="idInDirAlmacen" value="Direccion de Almacen:" style="margin-right:2px;" />
    <p:inputText id="idInDirAlmacen" style="width:350px;" readonly="true" required="true"  value="#{almacenBean.alVista.direccionAlmacen}"
                 requiredMessage="Ingrese direccion de Almacen"/>   
    <p:commandButton title="Crear Direccion Almacen" actionListener="#{almacenBean.abrirDireccionAlmacen}"  process="@this"
                     icon="ui-icon-search" >
        <p:ajax event="dialogReturn" update=":idFormAlmacen:idPgDirAlmacen"/>
    </p:commandButton>
    <p:message for="idInDirAlmacen" display="text"/>
  </h:panelGrid>
</ui:composition> 

thanks for all

2 Answers 2

24

This is not a JSF specific behavior, when Enter is pressed the first <input> with type="submit" is used. This has been discussed on SO (see this or this), I'll put here some of the suggestions from those threads.

Javascript solution:

Use <h:form id="thisform" onkeypress="if( event.keyCode == 13){event.keyCode=0;}"> on your form. This, however, will prevent you from having any default command on the form since it catches pressing Enter.

Primefaces solution:

Use a dummy button on the form which does nothing, and set it as form's default command.

<p:defaultCommand target="dummy"/>
<p:commandButton id="dummy" process="@none" global="false" style="display:none;"/>
3
  • However if the focus is in a button and I press enter in both cases is not called the action of the button with the focus. Excume me for my English
    – Ronald
    Dec 3, 2014 at 14:13
  • Try this for first example: onkeypress="if( event.keyCode == 13){if(document.activeElement.type == 'text') event.keyCode=0;}" Dec 3, 2014 at 17:01
  • 2
    Thanks, but I try with : onkeypress="if( event.keyCode == 13){if(document.activeElement.type == 'text') return false;}" and it's working, with event.keyCode=0 doesn't work
    – Ronald
    Dec 3, 2014 at 18:00
4

I had the same issue in my project. To avoid the submit on enter key press I just did like following. At every inputText field added this code,

onkeypress="if (event.keyCode == 13) { return false; }"
1
  • 1
    Why on EVERY inputText when you can do it on the form (like in the other anser). Care to add why you do it in a more complex way?
    – Kukeltje
    Mar 29, 2018 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.