pretify

miércoles, 2 de octubre de 2013

Adding an item to richfaces datascroller and positioning in it

The thing is not that hard, but also helps exemplify a tunnel vision case. There is a web application which uses RichFaces that has a form in which there are a datatable for data input. When the user wants to add a new item, she clicks on a link that adds a new line. I obviously needed to focus the user on the added item. Well, this one was my inner conversation with myself:

- How can I do this?
- Oh! That's easy! just use javascript! What's the problem?
- Yes, but the thing is that I can have several pages in that input, so first, I need to go to the page.
- Well, then you first use switchToPage

And I ended up with the same problem described in http://stackoverflow.com/questions/7902627/onchange-richcomponentds-switchtopagethis-value-in-richfaces.

So I started to look the way to make this an asynchronous call even without being able to understand how my request became an asynchronous one. And here is where tunnel vision appeared. I spent a lot of time trying to understand this, and trying to solve it in the link component by using javascript in several ways.

Finally, almost accidentally I found a very simple solution in https://community.jboss.org/thread/148679?start=0&tstart=0. It was completely different from the thing I was trying to do. The solution was extremely obvious once I get to it (as it always is). Not use only the link component but also the dataScroller component:

<a4j:commandLink id="addLink" action="#{myMB.add}" render="tableItems msg" execute="@form" oncomplete="#{rich:component('myScroller')}.switchToPage(#{myMB.lastPage});">

and
<rich:dataScroller id="myScroller" page="#{myMB.page}" execute="@form" oncomplete="document.getElementById('frm1:tableItems:#{myMB.lastAdded}:myFirstInput').focus();"/>