Problem with hotKey + modalPanel

[fkj]

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

[nbelaevski]

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.

[fkj]

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.

[nbelaevski]

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

[fkj]

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.

[ilya_shaikovsky]

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)"
 />

[fkj]

It's working fine with setTimeout.

Thanks a lot.

[senorita]

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>