3 Replies Latest reply on Nov 14, 2012 9:58 PM by Sandeep Singh

    How to focus the first input field ?

    Sandeep Singh Newbie

      Hi Everybody,

       

      I need to focus the first input element on a given page which is decided at runtime as well as the number of fields.

      Code snippet is below:

       

      <composite:implementation>

          <h:panelGroup id="wflPgPnl" layout="block"

                        rendered="#{workflowController.currentPageStatus.page.id == cc.attrs.pageId}">

       

              <div id="msg_globalWfErrors">

                  <h:messages globalOnly="true" style="color:red"/>

              </div>

             

              <h:inputHidden id="wfxMessageArea"/>

              <h:message for="wfxMessageArea"/>

         

              <div style="">

                  <composite:insertChildren/>

              </div>

       

            // Some control buttons code here....

       

         </h:panelGroup>

         

          <script type="text/javascript">

              /* <![CDATA[ */

              function reassignTabOrders() {

                  var tabindex = 100;   //start with 100 to not mixup with manually assigned ids (1-100 & >1000)

                  $("div[id$='wflPgPnl']").find('input,select,textarea').each(function() {

                      var $input = $(this);

                      if ($input.is(':visible')) {

                          if ($input.attr('tabindex') == 0) {

                              $input.attr("tabindex", tabindex);

                              //$input.tabIndex = tabindex;

                              tabindex++;

                          }

                      }

                  });

              }

              // ensure all elements have an tabIndex assigned

              // otherwise tabbing from element without to an element with tabIndex does not work.

              jQuery().ready(reassignTabOrders());

       

              //  This script is used to focus the first input field on the given/opened page. If the input field is a data

              //  picker then the focus will not be given to that field.

              

              $(document).ready(function(){

                  $("div[id$='wflPgPnl']:not[id*='Picker']input:visible:first:enabled").focus();

              });

             

              /* ]]> */

             

          </script>

      </composite:implementation>

       

      The tab index works fine.

      But the focus of the input field is not working and also it breaks the application in IE when the application is executed through automated testing tool (Tosca).

       

      Any help or hint will be highly appreciated.

      Thanks a lot in advance.

       

      Regards,

      Sandy

        • 1. Re: How to focus the first input field ?
          Sandeep Singh Newbie

          <ui:fragment rendered="#{workflowController.workflowTypeId eq cc.attrs.workflowTypeId}">

                  <a4j:jsFunction name="storePositionInBean" immediate="true" id="wfPosUp">

                      <a4j:attachQueue id="posQueue" requestGroupingId="popPos" requestDelay="300" />

                      <a4j:param name="left" assignTo="#{workflowPopupLayout.left}" />

                      <a4j:param name="top" assignTo="#{workflowPopupLayout.top}" />

                  </a4j:jsFunction>

           

                  <a4j:jsFunction name="storeDimensionsInBean" immediate="true" id="wfDimUp">

                      <a4j:attachQueue id="dimQueue" name="updComponentState" requestGroupingId="popPos" requestDelay="300" />

                      <a4j:param name="width" assignTo="#{workflowPopupLayout.width}" />

                      <a4j:param name="height" assignTo="#{workflowPopupLayout.height}" />

                  </a4j:jsFunction>

           

                  <script type="text/javascript">

                      function getPopupPanel() {

                          return jQuery(#{lp:getPopupContainer(lp:escapeJsfIdForJs(rich:clientId(workflowController.workflowTypeId)))});

                      }

           

                      function getPopupPanelPosition() {

                          return getPopupPanel().position();

                      }

           

                      function storePosition() {

                          popupPanelPosition = getPopupPanelPosition();

                          storePositionInBean(popupPanelPosition.left, popupPanelPosition.top);

                      }

           

                      function storeDimensions() {

                          popupPanel = getPopupPanel();

                          storeDimensionsInBean(popupPanel.width(), popupPanel.height());

                      }

           

                      function storeBounds() {

                          storePosition();

                          storeDimensions();

                      }

                  </script>

           

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

           

                  <rich:popupPanel

                      id="#{cc.attrs.workflowTypeId}"

                      rendered="#{workflowController.workflowActive and workflowController.workflowTypeId == cc.attrs.workflowTypeId}"

                      show="true"

                      left="#{workflowPopupLayout.left}"

                      top="#{workflowPopupLayout.top}"

                      width="#{workflowPopupLayout.width}"

                      height="#{workflowPopupLayout.height}"

                      modal="#{cc.attrs.modal}"

                      moveable="true"

                      resizeable="true"

                      header="#{workflowController.workflowTitle}"

                      onmove="storePosition()"

                      onresize="storeBounds()"

                     onshow="focusInput()">

                      <!--

                          content of rich:popupPanel must be surrounded by its own form

                          as in the html output it is rendered outside the original surrounding form

                          and only referenced from within the original surrounding form

                      -->

                      <f:facet name="controls">

                          <h:form id="Workflow" rendered="#{cc.attrs.showControls}">

                              <h:commandLink value="X" action="#{workflowController.endWorkflow()}" immediate="true" id="endLink" />

                          </h:form>

                      </f:facet>

           

                      <workflow:workflowContainer workflowTypeId="#{cc.attrs.workflowTypeId}" id="wfC" />

           

                  </rich:popupPanel>

           

          Hi Everybody,

          Please see the above code for focusing the first input field.

          Its working fine but only on the first page.

          This is a framework which I have build for others in my project to carry out work-flow in popup panel.

           

          Where the number of pages depends on the caller for his/her bussiness scenario.

           

          Hence its not working on the second page or any page after the first page.

           

          Kindly help.

           

          Regards,

          Sandy

          • 2. Re: How to focus the first input field ?
            Juraj Húska Master

            Hi Sandeep,

             

            have you considered using rich:focus which is the sanbox components ?

            https://github.com/richfaces/sandbox/tree/develop/focus

             

            It should be included in RichFaces 4.3.0.M3.

             

            Roadmap for 4.3.0.M3:

            https://issues.jboss.org/browse/RF#selectedTab=com.atlassian.jira.plugin.system.project%3Aroadmap-panel

            1 of 1 people found this helpful
            • 3. Re: How to focus the first input field ?
              Sandeep Singh Newbie

              Hi Juraj,

               

              Thanks a lot for the help.

              But currently I have Rich-Faces version 4.0.0 Final in my project.

              Anyway I was able to set the focus on the first input text box.

               

              <composite:implementation>

                  <h:panelGroup

                        id="wflPgPnl"

                        layout="block"

                        rendered="#{workflowController.currentPageStatus.page.id == cc.attrs.pageId}">

                 

                      <div style="">

                          <composite:insertChildren/>

                      </div>

                      

                      <!--  Some controls code here-->                  

               

                      </h:panelGroup>

                  </h:panelGroup>

               

                  <script type="text/javascript">

                      /* <![CDATA[ */

               

                      function reassignTabOrders() {

                          var tabindex = 100;   //start with 100 to not mixup with manually assigned ids (1-100 & >1000)

                          $("div[id$='wflPgPnl']").find('input,select,textarea').each(function() {

                              var $input = $(this);

                              if ($input.is(':visible')) {

                                  if ($input.attr('tabindex') == 0) {

                                      $input.attr("tabindex", tabindex);

                                      //$input.tabIndex = tabindex;

                                      tabindex++;

                                  }

                              }

                          });

                      }

                      // Ensure all elements have an tabIndex assigned.

                      // Otherwise tabbing from element without to an element with tabIndex does not work.

                      jQuery().ready(reassignTabOrders());

               

                      // This method will set the focus on the first input field after the DOM is ready and the work-flow popup panel

                      // is completely rendered hence setting the time for executing this jQuery.

                     window.setTimeout(function() {

                          $("div[id$='wflPgPnl']").find('input,select,textarea').each(function() {

                              var $inputField = $(this);

                              if ($inputField.is(':visible') && $inputField.is(':enabled')) {

                                  $inputField.focus();

                                  return false;

                              }

                          });

                          }, 200

                      );

               

                      /* ]]> */

                  </script>

               

              </composite:implementation>

               

              By Setting the TimeOut for the jQueryt its working and for every page opened on the Popup panel.

               

              Thanks & Regards,

              Sandy