Focus lost after reRender

[nille]

Hi everybody,

I have a qiestion regarding 'focus behaviour' together with the 'reRender' attribute. I have a table consisting of input fields and a simple text field at the end of every row keeping the sum of all inpuit field values for the current row. Something like this:

<rich:columns style="text-align:right;" value="#{action.rowId}" var="field" index ="currentIndex">
         <h:inputText value="#{field.fieldValue}">
               <a4j:support event="onchange" reRender="last_field" action="#{action.cactionDigitsForBigDecimal}"/>
         </h:inputText>
         <h:outputText value="#{field.fieldValue}" id="last_field" rendered="#{fiue"/>
</rich:columns>

The user want to step through each row using the tab key. The problem, that after the ajax call comes back and re-renders the 'last_field' the focus gets lost.

1. The user enters a values in the first field
2. The user hits the tab key
3. AJAX request is started
4. Focus is set to the second field and the user starts entering values
5. The AJAX requests finishes, the focus gets lost and the 'last_field' gets re-renderes

Unfortunately, using the 'focus' attribut is not an option because the AJAX request may take some time to finish.

I did a short test using WebRemote. There a AJAX request via WebRemote is done and the result is written into an input field. During that I can enter some values in a different input field without losing the focus.

Does anybody have an idea?

[amitev]

Hello! I had the same problem with richfaces and i don't know if should be fixed from a4j api itself. This is my solution:

Before a4j updates the dom i capture the id of the focused element and after dom update (oncomplete) i restore the focus

- put the following on the page

<a4j:queue name="org.richfaces.queue.global" onbeforedomupdate="captureFocus();" oncomplete="restoreFocus();" ... />

- js code

var capturedFieldId = null;

/**
* Captures the id of the currently focused element. The capture is performed
* usually before an ajax request and restored after dom update.
*/
function captureFocus() {
    if (jQuery.focused() != null) {
        capturedFieldId = jQuery.focused().id;
    } else {
        capturedFieldId = null;
    }
}

/**
* Restores the focus on the captured element.
*/
function restoreFocus() {
    if (capturedFieldId && capturedFieldId != null) {
        var focusedElement = document.getElementById(capturedFieldId);
        if (focusedElement) {
            focusedElement.focus();
        }
    }
}

For this to work you need

- http://plugins.jquery.com/project/focused

- http://docs.jquery.com/Plugins/livequery

[ilya_shaikovsky]

Unfortunately, using the 'focus' attribut is not an option because the AJAX request may take some time to finish.

But if you typing in the field in the time when request under processing - all will be lost after re-Rendering. So allowing user to fill the field and reRender it in the same time - looks not good.

Adrian your current solution looks good but I'm not sure how you handled the point I mentioned. Our workaround to hande the focus correctly is at richfaces-demo external table filtering page. And we looks for something similar built-in in  4.x instead of current one (which just sets focus so cursor lost)

[nille]

Hi,

thanks for your replies :-).

I think my explanation was a bit unclear...The user wants to edit some input fields and depending in the values (numbers) of these input fields a read-only field is rendered (with a sum of the input fields).

Adrian, next tiem I'll test your approach. But for now I don't want to use another framework. I have a bad feeling mixing different frameworks. Maybe this is not a problem but I wnat to be sure

Finally I used the above metnioned WebRemote interface to accomplish this.

Again, thanks for your replies,

Kind Regards!

[maxime_lenne]

Hi,

I have the same problem, in my case a "departement" field update (with a rerender) the sugestion list of a "ville" field.

I have resolve this issue with the jQuery code on the onComplete event :

<h:inputText value="#{formBean.departement}" required="true" id="dpt" >

          <a4j:support event="onchange" reRender="ville" oncomplete="jQuery('#villecomboboxField').focus();" ajaxSingle="true"/>

</h:inputText>

<rich:comboBox selectFirstOnUpdate="false" value="#{formBean.ville}" id="ville" name="ville" required="true">

          <f:selectItems value="#{formBean.suggestionsVilles}" />

</rich:comboBox>

Best Regards!

[ibenjes]

Hi,

I've tried Adrian's proposal and it works fine for the first Ajax request but all subsequent requests still use the ID of the first component which got the focus.

So lets say I've got input elements with the ids: idA, idB, idC, idD.

I enter something in the element with idA press tab. An Ajax request (via a4j:support) is issued. I can see that captureFieldId is set to idB and when the Ajax requests finishes the focus is set back to idB. But now when I enter something in idC (the focus should be on idC) and an Ajax request is created I can see captureFieldId being set to idB again.

Do you use the jQuery that comes with RichFaces (I am using 3.3.1)?

It seems the livequery stuff doesn't seem to work. Do you have to do anything special with it? I am just loading it with <a4j:loadScript>

Regards