7 Replies Latest reply on Dec 29, 2013 6:53 AM by sweety senorita

    Problem with hotKey + modalPanel

    Felipe Jaekel Newbie

      I have attached the F2 key to open a modalPanel from a inputText. This modalPanel is a search dialog, with a inputText that is used to retrieve data from the database on the onkeyup event.

      When I hit F2 on the main screen inputText, the modelPanel is show correctly, but an AJAX request is fired like if I had hit F2 on the search dialog inputText.

      <h:inputText
       id="empresa"
       value="#{liberacaoGuiasBean.beneficiarioAtual.id.emp}"
       style="width:45px"
       label="Empresa:"
       required="true"
       readonly="#{liberacaoGuiasBean.matriculaNovaReadOnly}"
      />
      <rich:hotKey
       selector="#empresa"
       key="f2"
       handler="#{rich:component('pesquisaEmpresa')}.show()"
      />
      


      I've also tried handler="#{rich:component('pesquisaEmpresa')}.show(); return false;" but it didn't solved the problem.

      Any ideas?

      Thanks,
      Felipe

        • 1. Re: Problem with hotKey + modalPanel
          Nick Belaevski Master

          Hello Felipe,

          a4j:support has "onsubmit" attribute that can be used to prevent request submission. "onsubmit" handler can use "event" variable to check code of key pressed.

          • 2. Re: Problem with hotKey + modalPanel
            Felipe Jaekel Newbie

            Thanks for the reply, but since I've pressed F2 in the main screen inputText (no keyboard handler), this extra AJAX request shouldn't happen.

            • 3. Re: Problem with hotKey + modalPanel
              Nick Belaevski Master

              As far as I understand there's a4j:support component that is firing AJAX requests. Have I got you right?

              • 4. Re: Problem with hotKey + modalPanel
                Felipe Jaekel Newbie

                Yes, but the a4j:support isn't on the inputText that I press F2, it's on the search dialog inputText.

                I press F2 on the inputText that the code is above, the modal panel is shown correctly. I set focus on the search dialog inputText using the onshow event. Right after it is show an AJAX request is fired, like if I had pressed F2 another time, this time on the search dialog inputText, who has a4j:support, when I haven't pressed the key again at all.

                When I open the search dialog using a mouse event it works fine.

                • 5. Re: Problem with hotKey + modalPanel
                  Ilya Shaikovsky Master

                  Seems like browser passed the keyup event if the input focus occurs right in the moment when event comes.
                  I'm able to reproduce and my workaround is to use setTimeout in handler like :

                   <rich:modalPanel id="panel" width="350" height="100" onshow="#{rich:element('input')}.focus()">
                  .....
                  
                   <rich:hotKey
                   key="c"
                   handler="setTimeout(function(){ #{rich:component('panel')}.show()},200)"
                   />
                  



                  • 6. Re: Problem with hotKey + modalPanel
                    Felipe Jaekel Newbie

                    It's working fine with setTimeout.

                    Thanks a lot.

                    • 7. Re: Problem with hotKey + modalPanel
                      sweety senorita Newbie

                      Hi Dear,

                       

                      I am trying for hotkeys in the modal. I could not trace out why it is not working.
                      This is my code. I have tried taking in all scope of the bean. Still not working. Would anyone please help me ?

                      --------------------------------------------------------------------------------------------------------------------------------------------------------------------

                      <h:form id="frm1">

                        <a4j:outputPanel id="hotkeyPanel">

                           <c:choose>

                            <c:when test="#{xBean.myBooleanVariable}">

                            <rich:hotKey key="f8" onkeyup="jQuery(#{rich:element('btn11')}).click();"  preventDefault="true">   

                        </rich:hotKey>

                        <rich:hotKey key="f10" onkeyup="jQuery(#{rich:element('btn33')}).click();"  preventDefault="true">   

                        </rich:hotKey>

                            </c:when>

                            <c:when test="#{xBean.otheBooleanVariable}">   

                            <rich:hotKey key="f6" onkeyup="jQuery(#{rich:element('btnCancel')}).click();"  preventDefault="true"/>

                            <rich:hotKey key="f10" onkeyup="jQuery(#{rich:element('btnAcept')}).click();"  preventDefault="true">   

                        </rich:hotKey>

                            </c:when>

                      -----------------------------------

                      <a4j:jsFunction name="save"

                        action="#{xBean.save(false)}"

                        render="hotkeyPanel"

                        execute="myPopUpPanel"

                        oncomplete="displayElemento('div_capaMayor', 'none'); #{rich:component('myPopUpPanel')}.hide(); if(#{facesContext.validationFailed}) displayElemento('error_div',''); if(!#{facesContext.validationFailed}) displayElemento('exito_div', '');"

                        onclick="displayElemento('div_capaMayor', '');">

                        </a4j:jsFunction>

                        <rich:popupPanel id="myPopUpPanel" modal="true" resizeable="true"

                        onshow = "focus('frm2:myPopUpPanel')" onmaskclick="#{rich:component('myPopUpPanel')}.hide()">

                        <center>

                        <h:outputText value="#{msg['hello']}" />

                        <br></br>

                        <br></br>

                        <h:outputText value="#{msg['happy christmass']}" />

                        <br></br> <br></br>

                        <h:panelGrid columns="2" >

                        <a4j:commandButton id="btnAcept" value="#{msg['Save']}"

                        styleClass="button_bottom" action="#{xBean.save(false)}"

                        render="hotkeyPanel"

                        execute="myPopUpPanel"

                        onbeforedomupdate="displayElemento('exito_div', 'none'), displayElemento('error_div', 'none')"

                        onclick="save(false); displayElemento('div_capaMayor', 'none'); return false;"

                        oncomplete="#{facesContext.validationFailed} ? displayElemento('error_div', '') : displayElemento('exito_div', '');">

                        </a4j:commandButton>

                        <a4j:commandButton id="btnCancel" value="#{msg['cancel']}"

                        styleClass="button_bottom"

                        render="hotkeyPanel"

                        action="#{xBean.cancelModal}"

                        onclick="#{rich:component('myPopUpPanel')}.hide();">

                        </a4j:commandButton>

                        </h:panelGrid>

                        </center>

                        </rich:popupPanel>

                        </h:form>

                        </div>

                        </h:form>

                      </ui:composition>