jsf ajax调用：最后执行javascript函数

Question

我正在使用 JSF 2.0，这是我的表单：

<h:form id="fff" onsubmit="reloadMap();">
    <h:selectOneMenu value="#{rentCarPoolBean.state}">
        <f:selectItems value="#{rentCarPoolBean.stateList}" id="stateList" />
        <f:ajax event="change" render="cities stateSelected" onevent="showAlert"/>
    </h:selectOneMenu>
    <h:selectOneMenu  id="cities" value="#{rentCarPoolBean.city}">
        <f:selectItems value="#{rentCarPoolBean.cityList}"/>
        </h:selectOneMenu>
    <h:outputText value="#{rentCarPoolBean.state}" id="stateSelected" />
</h:form>

还有javascript函数：

<script type="text/javascript">
    function showAlert(data){
         if (data.status == "complete")
             alert(document.getElementById("stateSelected"));   
    }
</script>

上面的代码所做的是从第一个下拉列表中选择一个状态，它进行 ajax 调用并呈现“城市”下拉列表和“stateSelected”输出文本。

此外，它还调用 showAlert() javascript 函数。

我想要做的是在返回所有数据并且下拉和 outputText 都已呈现后调用 javascript 函数。

但目前在渲染元素之前调用 javascript 函数并且警报显示null。 我们到底如何让javascript函数执行？

Answer 1

这里：

alert(document.getElementById("stateSelected"));

您只指定了 JSF 组件 ID，但您需要提供完整的 clientId。这是 link 解释这一点。

Answer 2

您需要挂钩success 的状态。这将在 HTML DOM 树更新后运行。 complete 的状态在 ajax 响应返回后直接运行。这无疑是一个误导性的状态名称，但您应该尝试在“HTTP 请求”的上下文中解释它，例如 begin 状态。

另一个问题是document.getElementById() 通过 HTML 元素 ID 选择项目，而不是通过 JSF 组件 ID。您需要准确地给它提供 JSF 为 HTML 生成的 ID。您可以通过在 webbrowser 中查看页面源来确定正确的 HTML 元素 ID。

总而言之，您的新函数应该如下所示：

function showAlert(data){
     if (data.status == "success")
         alert(document.getElementById("fff:stateSelected"));  
}