JSF execute javascript after f:ajax

问题

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?

回答1:

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?

来源：https://stackoverflow.com/questions/19495468/jsf-execute-javascript-after-fajax

标签

javascript

ajax

jsf