JSF在f:ajax之后执行javascript [英] JSF execute javascript after f:ajax

问题描述

在我的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代码的自动执行?

解决方案

为了成功完成<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和Jquery AJAX-如何使它们协同工作?

还要再次检查f:ajax中是否需要event="click"，因为<h:selectOneRadio>中的默认事件是change，我认为您最好使用... ...另请参见

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?

解决方案

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在f:ajax之后执行javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！