How to set focus on inputtext within the seletedRow of dataTable in PrimeFaces?

Question

The scenario is like this:

There is a datatable with many rows and each row contains an inputtext, there is a keypad outside the table, when user click a button in the keypad, the inputtext within the selectedRow would be updated, I want it to be onfocus so user can also use keyboard to input further texts.

I used p:commandButton to be the keypad button with use ajax submit to set selectedItem in bean and update the datatable to make the inputtext change, but after that, the focus is either lost or on the first inputtext of the page.

I am using primeface 3.4. The codes go something like this:

 <p:dataTable id="datatable1" var="item" value="#{bean.itemlist}" rowKey="#{item.id}"  rowIndexVar="rowIndex"
              widgetVar="datatableVar"  selection="#{bean.selectedItem}" selectionMode="single">  

  <p:column>  
        <p:inputText id="name" value="#{bean.selectedItem.name}"
 onfocus="datatableVar.unselectAllRows();datatableVar.selectRow(#{rowIndex})" >  

   </p:column>  
 ...
</p:dataTable>

 <p:commandButton value="1" update="datatable1" id="bt1"  
         actionListener="#{bean.appendItem('1')}" />

I guest I could use oncomplete event of p:commandButton to set the inputtext focus, but there seems no client side API in p:dataTable to get the selected Row.

You may take a look at this: balusc.blogspot.com/2007/12/set-focus-in-jsf.html — nosnhoj
thanks @nosnhoj I have read BalusC's blog, I too intend to get the DOM or JQuery component and call 'focus()', but the problem is I don't know how to get that input component within selectedRow of dataTable. — Jersey

Jersey Jersey · Accepted Answer · 2014-04-21T13:09:25

I ended up using jQuery selector to select that inputText. In the rendered html code,the selected row(tr) has an attributed "aria-selected='true'".

The JS code goes:

var ele=$($("[aria-selected='true']").find('input').get(0));

The ele is a jQuery component that I can operate with, like ele.focus() or ele.keyup()

How to set focus on inputtext within the seletedRow of dataTable in PrimeFaces?

1 Answers