13

在我的 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 s，在某些 IE 版本中更改表内容后无意中需要双击它 - 我发现执行以下 Javascript 代码（在 IE 的调试控制台上，在表内容更改后）可以解决问题：

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

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

4

1 回答 1

30

为了在<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 together?

另外，请仔细检查event="click"您的 中的需要f:ajax，因为我认为您最好使用其中的默认事件...另请参阅我可以将哪些值传递给 f:ajax 标记的事件属性？<h:selectOneRadio>change

于 2013-10-21T14:33:35.420 回答