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调用并呈现'cities'下拉列表和'stateSelected'outputText.

此外,它调用showAlert()javascript函数.

我想要做的是在返回所有数据并调用dropdown和outputText之后调用javascript函数.

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

Answer 1

你需要挂钩状态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"));  
}