JSF execute javascript after f:ajax

Question

In my JSF 2 web application, I use the following code to display and switch the contents of a rich:dataTable according to the selectedStatus:

<h:selectOneRadio id="statusSelection" value="#{backingBean.selectedStatus}" style="width:auto; float:left;">
  <f:selectItem itemValue="AVAILABLE" itemLabel="Available" />
  <f:selectItem itemValue="INACTIVE" itemLabel="Inactive" />
  <f:ajax render="itemsDataTable" execute="#{backingBean.sortByTitel('ascending')}" />
  <f:ajax render="itemsDataTable" event="click" />
</h:selectOneRadio>

The dataTable contains a4j:commandLink s, which unintentionally need to be double clicked in some IE versions after changing table content - I found out, that executing the following Javascript code (on IE's debugging console, after table contents have changed) solves the issue:

document.getElementById(<dataTableClientId>).focus()

My question is: How can I achieve automatic execution of the javascript code after the table contents have changed?

I tried, result: If I take out this tag, everything is fine in firefox, but in the IE versions causing trouble, it gets even worse: Switching the table content won't work, the tables switch by clicking the wrong radio button,... — Mr.Radar, Oct 21 '13 at 13:53
As you are using a h:selectOneRadio try to change the event to onchange instead of click. The click event happens before you choose the option in the select. — Jorge Campos, Oct 21 '13 at 14:23

score 32 · Accepted Answer · edited Apr 26 '20 at 14:08

In order to execute JS code after the <f:ajax> is successfully completed, the following inline solution will do:

<f:ajax
    render="itemsDataTable" 
    onevent="function(data) { if (data.status === 'success') { 
        // Put your JS code here.
        document.getElementById('dataTableClientId').focus();
    }}" />

Or the following external function solution (note: do not put parentheses in onevent, only the function name):

<f:ajax
    render="itemsDataTable" 
    onevent="scriptFunctionName" />

function scriptFunctionName(data) {
    if (data.status === 'success') { 
        // Put your JS code here.
        document.getElementById('dataTableClientId').focus();
    }
}

Also take a look at this answer: JSF and Jquery AJAX - How can I make them work together?

Also, double check the need of the event="click" in your f:ajax , because the default event in <h:selectOneRadio> is change which I think you better use... See also What values can I pass to the event attribute of the f:ajax tag?

JSF execute javascript after f:ajax

1 Answers1