JSF 在 f:ajax 之后执行 javascript

Posted 2023-02-22

【中文标题】JSF 在 f:ajax 之后执行 javascript

【英文标题】：JSF execute javascript after f:ajax

【发布时间】：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 中的选项之前。

【参考方案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?