Process onclick function after ajax call <f:ajax>

Question

I'm trying to select and focus to choosed component ID after submit a form (ajax call).

<script>
var myFunc = function() {
  document.getElementById('form:#{bean.componentId}').focus();
  document.getElementById('form:#{bean.componentId}').select();
};

$(document).ready(function() {
  myFunc();
});
</script>

<h:form id="form">
  <h:commandButton action="#{bean.save}" onclick="return myFunc();" ...>
    <f:ajax execute="@form" render="@form"/>
  </h:commandButton>
  ...
</h:form>

This solution is working, but problem is, that <f:ajax> is called AFTER onclick, so the the form is rendered after component selection, and focus is cleared.

How can I call my function AFTER the form is rendered?

update: (I've tried for example)

• add onevent="myFunc();" to f:ajax => leads to refreshing page
• add onevent="myFunc()" to f:ajax => same behaviour as onclick attribute
• next f:ajax with onevent attr. => still the same

update2 (how it should works):

• submit button is ajax called
• form is cleaned as needed
• appropriate field is focused (depended on some user choosed factors)

Solution

The onevent handler will actually be invoked three times and it should point to a function name, not the function itself. One time before the ajax request is been sent, one time after the ajax response is been arrived and one time when the HTML DOM is successfully updated. You should be checking the status property of the given data argument for that.

function listener(data) {
    var status = data.status; // Can be "begin", "complete" or "success".

    switch (status) {
        case "begin": // Before the ajax request is sent.
            // ...
            break;

        case "complete": // After the ajax response is arrived.
            // ...
            break;

        case "success": // After update of HTML DOM based on ajax response..
            // ...
            break;
    }
}

In your particular case, you thus just need to add a check if the status is success.

function myFunc(data) {
    if (data.status == "success") {
        var element = document.getElementById('form:#{bean.componentId}');
        element.focus();
        element.select();
    }
}

And you need to reference the function by its name:

<f:ajax ... onevent="myFunc" />