1 2 Previous Next 19 Replies Latest reply on Jul 14, 2010 10:40 AM by Osvaldo González

    HotKey Invokes Wrong Method

    Osvaldo González Newbie

      Hi Everybody, I'm new in richfaces and i'm trying to do a datatable with inputtext filters in some column headers, whitout using the richfaces integrated filter function. I want the table to be filtered when the user hits the Enter key, so I'm trying to use rich Hotkeys to do that, but i have a problem and i couldn't find a solution in other threads. The problem is that when Enter key is pressed in the first of two diferent inputText, the hotkey calls the action of the second input Text. Here's a part of the code in my JSP:

       

       

      <rich:column label="Nombre">
           <f:facet name="header">
                <h:panelGroup>
                     <div>
                          <h:outputText value="Nombre"/>
                      </div>
                      <br/>
                      <div>
                          <h:inputText value="#{beanUsuario.filtroNomb}" size="15" id="filtroNomb">
                               <a4j:jsFunction name="filtrarNombre" action="#{beanUsuario.filtroNombre}" reRender="tabla,scroll"/>
                               <rich:hotKey key="return" handler="filtrarNombre()" disableInInput="false" id="hotnomb"/>
                          </h:inputText>
                      </div>
                </h:panelGroup>
           </f:facet>
           <h:outputText id="tnombre" value="#{usuario.nombre}"/>
      </rich:column>
      <rich:column headerClass="classA" label="Apellido">
           <f:facet name="header">
                <h:panelGroup>
                     <div>
                          <h:outputText value="Apellido(s)"/>
                     </div>
                     <br/>
                     <div>
                          <h:inputText value="#{beanUsuario.filtroAp}" size="15" id="filtroAp">
                               <a4j:jsFunction name="filtrarApellido" action="#{beanUsuario.filtroApellido}" reRender="tabla,scroll"/>
                               <rich:hotKey key="return" handler="filtrarApellido();return false;" disableInInput="false" id="hotap"/>
                          </h:inputText>
                     </div>
                </h:panelGroup>
           </f:facet>
           <h:outputText id="tapellido" value="#{usuario.apellido}"/>
      </rich:column>
      

       

      I've also tried to use the selector atribute like selector="#filtroAp" and selector="#filtroNomb" but in this case, no function is called by the hotkey.

       

      Thanks for your help in advance

        • 1. Re: HotKey Invokes Wrong Method
          Ilya Shaikovsky Master

          define styleClass="input1StyleClass" and use selector=" '.input1StyleClass' "

          • 2. Re: HotKey Invokes Wrong Method
            Osvaldo González Newbie

            Hi Ilya, thanks for your answer but it's not working, i have something like this:

             

            <h:inputText value="#{beanUsuario.filtroNomb}" size="15" id="filtroNomb" styleClass="filtro1StyleClass">
                <a4j:jsFunction name="filtrarNombre" action="#{beanUsuario.filtroNombre}" reRender="tabla,scroll"/>
                <rich:hotKey key="return" handler="filtrarNombre()" disableInInput="false" selector="'.filtro1StyleClass'"/>
            </h:inputText>
            

             

            But when i hit Enter in one of the inputText's i think the form iis submmited and the method filtroNombre() is not called, i have also tried to define the filtro1StyleClass in a CSS snippet but it doesn't make a diference.

             

            Thanks a lot, I hope You can help a little more

            • 3. Re: HotKey Invokes Wrong Method
              Ilya Shaikovsky Master

              please check in firebug console if actual ajax request risen. if so - all you need to just stop event with Event.stop(event) to prevent standard submission.

              • 4. Re: HotKey Invokes Wrong Method
                Osvaldo González Newbie

                Well there's a problem, my default browser is google chrome, it is making submmit in the form when I press enter, but not doing the call to the desired method. I tried in FireFox, with FireBug, but it doesn't make any ajax calls, it doesn't even submmit, same with IE. Is it a compatibility problem?

                • 5. Re: HotKey Invokes Wrong Method
                  Ilya Shaikovsky Master

                  at first sorry for my mistake.. you do not need in additional quotes in selector. " ' class' " should be "class"

                   

                  Also you have no need to place utility components as nested to inputs as jsFunction - registers new JavaScript function to be called and it's should be placed at any appropriate for <script> place. And jquerry also uses <script> block and attachmement by selector. So I tried

                   

                   

                  <h:form>
                  <h:inputText value="" size="15" id="filtroNomb"
                  styleClass="filtro1StyleClass"/>
                  <h:inputText value="" size="15" id="filtroNomb2"
                  styleClass="filtro2StyleClass"/>
                  <a4j:jsFunction name="filtrarNombre2" reRender="tabla,scroll"
                  oncomplete="alert(2)" />
                  <rich:hotKey key="return" handler="filtrarNombre2()"
                  disableInInput="false" selector=".filtro2StyleClass" />
                  <a4j:jsFunction name="filtrarNombre" reRender="tabla,scroll"
                  oncomplete="alert(1)" />
                  <rich:hotKey key="return" handler="filtrarNombre()"
                  disableInInput="false" selector=".filtro1StyleClass" />
                  </h:form>
                  

                  and it works for me.

                  • 6. Re: HotKey Invokes Wrong Method
                    Osvaldo González Newbie

                    Could you tell me what browser are you using? I have Chrome 5.0.375.55, FireFox 3.6.3 and IE 8.0.6001.18702 and tried with something like this:

                     

                    <body>
                            <f:view>
                                <h:form id="FormPrincipal">
                                    <a4j:jsFunction name="filtrar" action="#{beanUsuario.filtrar}" reRender="tabla,scroll" oncomplete="alert(1)"/>
                                    <rich:hotKey selector=".filtroStyleClass" disableInInput="false" key="return" handler="filtrar()"/>
                                    <a4j:region id="regiontabla" renderRegionOnly="true" selfRendered="true">
                                        <center>
                                            <a4j:status for="regiontabla">
                                                <f:facet name="start">
                                                    <h:graphicImage value="/images/ajax-loader.gif"/>
                                                </f:facet>
                                                <f:facet name="stop">
                                                    <h:graphicImage value="/images/detenido.PNG"/>
                                                </f:facet>
                                            </a4j:status>
                                        </center>
                                        <rich:dataTable id="tabla" value="#{beanUsuario.modelo}"
                                                        var="usuario" rowKeyVar="row" rows="10"
                                                        ajaxKeys="#{beanUsuario.filasAct}"
                                                        reRender="scroll" width="100%">
                                            <f:facet name="header">
                                                <h:outputText value="Usuarios"/>
                                            </f:facet>
                                            <rich:column label="Seleccion">
                                                <h:selectBooleanCheckbox>
                                                    <a4j:support action="#{beanUsuario.seleccionar}" event="onchange" ajaxSingle="true">
                                                        <f:setPropertyActionListener target="#{beanUsuario.id}" value="#{usuario.id}"/>
                                                    </a4j:support>
                                                </h:selectBooleanCheckbox>
                                            </rich:column>
                                            <rich:column label="Nombre">
                                                <f:facet name="header">
                                                    <h:panelGroup>
                                                        <span>
                                                            <a4j:commandLink action="#{beanUsuario.ordenar}" reRender="tabla,scroll">
                                                                <h:outputText value="Nombre"/>
                                                                <f:setPropertyActionListener target="#{beanUsuario.campo}" value="Nombre"/>
                                                            </a4j:commandLink>
                                                        </span>
                                                        <br>
                                                        <span>
                                                            <h:inputText value="#{beanUsuario.filtroNombre}" size="15" id="filtroNomb" styleClass="filtroStyleClass">
                                                            </h:inputText>
                                                        </span>
                                                    </h:panelGroup>
                                                </f:facet>
                                                <h:outputText id="tnombre" value="#{usuario.nombre}"/>
                                            </rich:column>
                    
                    

                     

                    When I hit Enter in the field, nothing happens in FF and IE, Chrome just Submmit the form, but no call is made to the bean method so i don't know what is wrong. Thanks for your help.

                    • 7. Re: HotKey Invokes Wrong Method
                      Ilya Shaikovsky Master

                      but the actual request send as I guess?.. So please make one more step add phaseTracker log for that request to thread

                       

                       

                      P.S. I tried with IE8 and FF 3.6.. but not sure that this could influence method call much.

                      • 8. Re: HotKey Invokes Wrong Method
                        Osvaldo González Newbie

                        Using the phaseTracker in chrome shows the following when i hit enter in the field:

                         

                        BEFORE RESTORE_VIEW 1
                        AFTER RESTORE_VIEW 1
                        BEFORE APPLY_REQUEST_VALUES 2
                        AFTER APPLY_REQUEST_VALUES 2
                        BEFORE PROCESS_VALIDATIONS 3
                        AFTER PROCESS_VALIDATIONS 3
                        BEFORE UPDATE_MODEL_VALUES 4
                        AFTER UPDATE_MODEL_VALUES 4
                        BEFORE INVOKE_APPLICATION 5
                        AFTER INVOKE_APPLICATION 5
                        BEFORE RENDER_RESPONSE 6
                        AFTER RENDER_RESPONSE 6
                        
                        

                         

                        I don't understand it at all, but i think this is because of the submmit made by chrome, because when I do the same in FireFox nothing is shown.

                        • 9. Re: HotKey Invokes Wrong Method
                          Ilya Shaikovsky Master

                          check JS console. There should be some errors.

                          • 10. Re: HotKey Invokes Wrong Method
                            Osvaldo González Newbie

                            Hello, Sorry for my ausence but I was having problems with my Internet Connection. This weekend I have format my computer and started to try hotkey with a simple login page, wich code I present to you.

                             

                             

                            <%@page contentType="text/html" pageEncoding="UTF-8"%>
                            <%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
                            <%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
                            <%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
                            <%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
                            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                               "http://www.w3.org/TR/html4/loose.dtd">
                            <html>
                                <head>
                                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                                    <title>Login</title>        
                                </head>
                                <body>
                                    <f:view>
                                        <a4j:jsFunction name="login" action="#{BeanLogin.login}" reRender="info"
                                                        oncomplete="#{rich:component('error')}.show()"/>
                                        <rich:hotKey handler="login()" disableInInput="false" key="return"/>
                                        <rich:panel style="width: 270px; margin: auto">
                                            <f:facet name="header">
                                                <h:outputText value="Ingresa tus datos de usuario"/>
                                            </f:facet>
                                            <h:form>
                                                <table style="margin: auto">
                                                    <tr>
                                                        <td><h:outputLabel for="user" value="Nombre de usuario:"/></td>
                                                        <td><h:inputText id="user" value="#{BeanLogin.username}" tabindex="1"/></td>
                                                    </tr>
                                                    <tr><td><br></td></tr>
                                                    <tr>
                                                        <td><h:outputLabel for="pass" value="Contraseña:"/></td>
                                                        <td><h:inputSecret id="pass" value="#{BeanLogin.userpass}" tabindex="2"/></td>
                                                    </tr>
                                                    <tr><td><br></td></tr>
                                                    <tr>
                                                        <td colspan="2" align="center">
                                                            <a4j:commandButton id="botonLogin" value="Ingresar"
                                                                               action="#{BeanLogin.login}"
                                                                               oncomplete="#{rich:component('error')}.show()"
                                                                               reRender="info">
                                                            </a4j:commandButton>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </h:form>
                                        </rich:panel>
                                        <rich:modalPanel id="error">
                                            <f:facet name="header">
                                                <h:outputText value="ERROR"/>
                                            </f:facet>
                                            <f:facet name="controls">
                                                <h:panelGroup>
                                                    <h:graphicImage id="hide" value="/images/cerrar.png" style="border: 0px"/>
                                                    <rich:componentControl attachTo="hide" event="onclick" for="error" operation="hide"/>
                                                </h:panelGroup>
                                            </f:facet>
                                            <h:form>
                                                <center>
                                                <h:panelGrid id="info">
                                                    <h:outputText value="#{BeanLogin.mensaje}"/>
                                                </h:panelGrid>
                                                <a4j:commandLink onclick="#{rich:component('error')}.hide()" reRender="user,pass">
                                                    <h:graphicImage value="/images/ok.png" style="border: 0px"/>
                                                </a4j:commandLink>
                                                </center>
                                            </h:form>
                                        </rich:modalPanel>
                                    </f:view>
                                </body>
                            </html>
                            
                            

                             

                            As you can see, it's a simple page with two fields and a button to call a method, login, in the bean. The idea is that hotkey return should call that method too. I tried in Chrome and IE8 and I was surprised, it works. But in FireFox it's not working, there are one error in the firebug console:

                             

                            this._form is null
                            http://localhost:8080/Persistencia-war/a4j/g/3_3_3.Final/org/ajax4jsf/framework.pack.js.jsf
                            Line 2797
                            

                             

                            So in firefox the method login is not called. I have tried to do the same with the previous page, the one with two inputText Filters for the datatable. Using the same hotkey declaration seems to work just as this page, but if I add the selector attribute it stop working and starts doing the form submit as before. Thanks again for your help.

                             

                            El mensaje fue editado por: Osvaldo González

                            • 11. Re: HotKey Invokes Wrong Method
                              Ilya Shaikovsky Master

                              I'm also surprised with the fact that it works somewhere because as any submitting component - jsFunction has to be enclosed with form.

                              http://livedemo.exadel.com/richfaces-demo/richfaces/jsFunction.jsf

                              • 12. Re: HotKey Invokes Wrong Method
                                Osvaldo González Newbie

                                LOL a newbie mistake... I think Well I made the correction and move the jsfunction and the hotkey inside the form and it worked fine in all the browsers I have but... as before, I tried to use the selector attribute to limit the action of the hot key. The hot key declaration now looks like this:

                                 

                                <rich:hotKey handler="login()" disableInInput="false" key="return" selector=".data"/>
                                

                                 

                                and the input declarations are:

                                 

                                <td><h:inputText id="user" value="#{BeanLogin.username}" tabindex="1" styleClass="data"/></td>
                                <td><h:inputSecret id="pass" value="#{BeanLogin.userpass}" tabindex="2" styleClass="data"/></td>
                                

                                 

                                With this change, it stoped working. The firebug console doesn't shows any request, same for the phasetracker, so it's obvious that there's something wrong with the selector attribute I'm setting. I will search more info about the selector, but any help will be welcome

                                • 13. Re: HotKey Invokes Wrong Method
                                  Osvaldo González Newbie

                                  Well, I have tried with multiple css selectors and the result is null. This question has been unanswered for a while, so I think it will die here Thanks anyway

                                  • 14. Re: HotKey Invokes Wrong Method
                                    Nick Belaevski Master

                                    Hi Osvaldo,

                                     

                                    Please try adding the following: timing="onload".

                                    1 2 Previous Next