2 Replies Latest reply on Oct 7, 2011 4:14 AM by frank furt

    problem with tab key in popup-panel

    frank furt Newbie

      Hi,

      in my application I am using a rich:popupPanel to show a question to the user. When I use a commandButton to show the popupPanel then hit a Cancel-Button in the panel to hide it then finally hit again the commandButton to show the popupPanel everything will work as I want it to. That is the first textfield I want to be focused is focused and when I use the tab-key to traverse the other elements it works fine as well.

       

      At last I am going to describe the problem after that long introduction:

      When I dont open the popupPanel twice but try to use the tab key after the first time showing it, then the focus jumps with the first hit to an browser-element instead of traversing the other elements of my web page.

       

      PS: this happens in all bowsers I tested, except google chrome. However its supposed to work fine in any browser.

       

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html 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:a4j="http://richfaces.org/a4j"

                xmlns:rich="http://richfaces.org/rich">

      <f:view>

                <h:head>

                          <title>HOB Web File Access</title>

                          <script>

                          function presentAddServerConfirmed(confirmed)

                          {

                                    if(document.getElementById("addServerForm:serverAlias").value.length > 0) {

                                              document.getElementById("confirmedLabel_debug").innerHTML = confirmed;

                                              window.status='authentication confirmed: ' + confirmed;

                                              if(confirmed) {

                                                        document.getElementById("wrongPasswordLabel").innerHTML = "";

                                                        #{rich:component('addServerPopup')}.hide();

                                              } else {

                                                        document.getElementById("wrongPasswordLabel").innerHTML = "Wrong Password!";

                                              }

                                    } else {

                                              document.getElementById("wrongPasswordLabel").innerHTML = "";

                                    }

       

                          }

       

                          function exitAddServerForm()

                          {

                                    document.getElementById("wrongPasswordLabel").innerHTML = "";

                                    document.getElementById("addServerForm:serverAlias").value="";

                                    document.getElementById("addServerForm:userName").value="";

                                    document.getElementById("addServerForm:password").value="";

                                    #{rich:component('addServerPopup')}.hide();

                          }

       

       

                          // forward enter/escape key press

                          function submitEnterEscape(myEnterSubmit, myEscapeSubmit, myEvent) {

                                    var keyCode;

                                    if (window.event) {

                                              keyCode = window.event.keyCode;

                                    } else if (myEvent) {

                                              keyCode = myEvent.which;

                                    } else {

                                              return true;

                                    }

                                    // if enter was pressed

                                    if (keyCode == 13) {

                                              document.getElementById(myEnterSubmit).click();

                                              return false;

                                    }

                                    // if escape was pressed

                                    if (myEvent.keyCode == 27) {

                                              document.getElementById(myEscapeSubmit).click();

                                              return false;

                                    }

       

                                    return true;

                          }

                          </script>

                </h:head>

       

       

                <h:body>

                          <h:form>

                                    <p id="confirmedLabel_debug">This is a paragraph.</p>

                                    <a4j:commandButton value="Call the popup"

                                              onclick="#{rich:component('addServerPopup')}.show();" />

                                    <a4j:outputPanel id="out">

                                              <h:outputText value="Servers: #{serverBean.servers} !" />

       

                                    </a4j:outputPanel>

       

       

                          </h:form>

       

       

                          <!-- Add Server Panel -->

                          <rich:popupPanel id="addServerPopup" modal="true" autosized="true"

                                    onshow="#{rich:element('addServerForm:serverAlias')}.focus();">

                                    <!-- Title -->

                                    <f:facet name="header">

                                              <h:outputText value="Add Server" />

                                    </f:facet>

                                    <!-- closing dialog -->

                                    <f:facet name="controls">

                                              <h:outputLink

                                                        onclick="document.getElementById('addServerForm:cancelButton').click();">

                       X

                   </h:outputLink>

                                    </f:facet>

       

       

                                    <h:form id="addServerForm"

                                              onkeypress="submitEnterEscape('addServerForm:okButton', 'addServerForm:cancelButton', event);">

                                              <p id="wrongPasswordLabel"></p>

       

       

                                              <!-- Input Fields -->

                                              <h:panelGrid columns="3" width="100%">

       

                                                        <h:outputLabel for="userName" value="Username: " />

                                                        <h:inputText id="userName" required="true"

                                                                  value="#{addServerBean.userName}">

                                                                  <rich:validator />

                                                        </h:inputText>

                                                        <rich:message for="userName" />

       

       

                                                        <h:outputLabel for="password" value="Password: " />

                                                        <h:inputSecret id="password" required="true" redisplay="false"

                                                                  value="#{addServerBean.password}">

                                                                  <rich:validator />

                                                        </h:inputSecret>

                                                        <rich:message for="password" />

       

       

                                              </h:panelGrid>

       

       

                                              <a4j:commandButton id="okButton" value="Add Server"

                                                        render="password,out"

                                                        actionListener="#{addServerBean.addServerListener}"

                                                        onbeforedomupdate="presentAddServerConfirmed(event.data)"

                                                        data="#{addServerBean.confirmed}" />

       

       

                                              <a4j:commandButton id="cancelButton" value="Cancel"

                                                        onclick="exitAddServerForm();" immediate="true" render="@form" />

       

       

                                    </h:form>

                                    <!-- end of: Input Fields -->

                          </rich:popupPanel>

                          <!-- end of: Add Server Panel -->

       

       

                </h:body>

      </f:view>

      </html>

       

        • 1. Re: problem with tab key in popup-panel
          Ramin Sharifi Newbie

          Here is a sample popup panel with tab feature enabled:

           

           

          <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:a4j="http://richfaces.org/a4j"

                          xmlns:rich="http://richfaces.org/rich">

              <script type="text/javascript">

                  jQuery('input').live("keypress", function(e) {

                      var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;

                      /* ENTER PRESSED*/

                      if (key == 9) {  // 9 for TAB

                          /* FOCUS ELEMENT */

                          var inputs = jQuery(this).parents("form").eq(0).find(":input");

                          var idx = inputs.index(this);

           

                          var move = (e.shiftKey) ? (-1) : (1); // for Shift+TAB

           

                          if (idx == inputs.length - 1) {

                              inputs[0].select()

                          } else {

                              inputs[idx + move].focus(); //  handles submit buttons

                              inputs[idx + move].select();

                          }

                          return false;

                      }

                  });

              </script>

           

              <rich:jQuery query="focus().select()" selector="#thegrid :input:visible:enabled:first" name="focusInput"/>

           

              <rich:popupPanel id="samplepopup" modal="true" resizeable="true" height="220" width="400"

                               onmaskclick="#{rich:component('samplepopup')}.hide()"

                               onshow="focusInput();">

           

                  <f:facet name="header">

                      <h:outputText value="sample"/>

                  </f:facet>

           

                  <h:form>

           

                      <h:panelGrid id="thegrid" columns="2" style="direction: rtl;">

                          <h:outputText value="Current Pass"/>

                          <h:inputSecret id="pass1" />

                          <h:outputText value="New Pass"/>

                          <h:inputSecret id="pass2"/>

                          <h:outputText value="New Pass Confirm"/>

                          <h:inputSecret id="pass3"/>

                      </h:panelGrid>

                  </h:form>

           

              </rich:popupPanel>

           

              <a4j:commandButton value="show sample" onclick="#{rich:component('samplepopup')}.show()"/>

           

          </ui:composition>

          • 2. Re: problem with tab key in popup-panel
            frank furt Newbie

            Thanks for your help. I did not know how to deal with jquery at all, but now I came up with that problem again and I could use your code to get it working.