Question

I am using JSF 1.2 and  Richfaces 3.3.3 in my sample JSF  Application.

  I have a form with  rich:dataTable that having single column  with h:inputText and footer having  a4j:commandButton  with value "add".

  when I click "add" button  then new row adding in  rich:dataTable and that is working fine.
  My need is after pressing "add" button the focus have to go newly created row to  the    h:inputText   field...


  sample code :

 <rich:dataTable  value="" var="">
    <rich:column>
        <f:facet name="header">
           <h:outputText value="name" />
        </f:facet>
                  <h:inputText id="name" value="#{obj.name}">
         </rich:column>

    <f:facet name="footer">
        <a4j:commandButton value="add"  action="{actionMethod}" />
    </f:facet>
</rich:dataTable>

when I click “add” button then new row adding in rich:dataTable and that is working fine.
My need is after pressing “add” button the focus have to go newly created row to the h:inputText field…

How to do this using JQuery or java script, any idea?

Answer 1

Please find below the javascript for setting focus.

function setFocus() {
            var displayedRowsCountValue = document
                    .getElementById("exampleManageBean:displayedRowsCountValue").value;

            var firstRowIndexValue = document
                    .getElementById("exampleManageBean:firstRowIndexValueId").value;
            displayedRowsCountValue = parseInt(firstRowIndexValue - 1)
                    + parseInt(displayedRowsCountValue);
            for (i = parseInt(firstRowIndexValue - 1); i < parseInt(displayedRowsCountValue); i++) {
                var tmpComponent = "selectedId[" + i + "]";
                var temp = (document.getElementsByName(tmpComponent)[1]);
                if (temp != null && temp.checked == true) {
                    var temp1 = document
                            .getElementById("exampleManageBean:exampleTable:"
                                    + i + ":exampleTextBox");
                            temp1.focus();

                        }   
                    }
            }

The displayedRowsCountValue & firstRowIndexValueId should be taken from t:dataScroller