JSF 在 f:ajax 之后执行 javascript答案

【问题标题】：JSF execute javascript after f:ajaxJSF 在 f:ajax 之后执行 javascript
【发布时间】：2013-10-30 00:01:35
【问题描述】：

在我的 JSF 2 Web 应用程序中，我使用以下代码根据 selectedStatus 显示和切换 Rich:dataTable 的内容：

<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>

dataTable 包含 a4j:commandLink ，在某些 IE 版本中更改表格内容后无意中需要双击 - 我发现执行以下 Javascript 代码（在 IE 的调试控制台上，在表格内容更改后）可以解决问题：

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

我的问题是：如何实现表格内容改变后javascript代码的自动执行？

【问题讨论】：

你能做一个测试吗？取出
我试过了，结果：如果我把这个标签去掉，firefox里一切正常，但是在IE版本出现问题，更糟：切换表格内容不起作用，表格通过单击错误的单选按钮进行切换，...
当您使用 h:selectOneRadio 时，请尝试将事件更改为 onchange 而不是单击。 click 事件发生在您选择 select 中的选项之前。

标签： javascript ajax jsf

【解决方案1】：

为了在<f:ajax>成功完成后执行JS代码，下面的内联方案就可以了：

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

或者如下外部函数解决方案（注意：onevent中不要放括号，只放函数名）：

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

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

也看看这个答案：JSF and Jquery AJAX - How can I make them work together?

另外，请仔细检查 event="click" 中 f:ajax 的需求，因为 <h:selectOneRadio> 中的默认事件是 change，我认为您最好使用它...另请参阅 What values can I pass to the event attribute of the f:ajax tag?

【讨论】：