How to focus the first input field ?

[sandy4you]

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

[sandy4you]

<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

[jhuska]

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

[sandy4you]

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