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调用并呈现'cities'下拉列表和'stateSelected'输出文本。

此外，它调用showAlert（）javascript函数。

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

但是目前在呈现元素之前调用了javascript函数，警报显示null。我们如何让javascript函数最终执行？

Answer 1

您需要挂钩状态success。这将在HTML DOM树更新后运行。在返回ajax响应后，complete的状态将直接运行。这无疑是一个误导性的状态名称，但您应该尝试在“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"));  
}

Answer 2

下面：

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

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

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

2 个答案: