4

我正在使用 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函数最终执行？

4

2 回答 2

7

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

这里：

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

您仅指定 JSF 组件 ID，但需要提供完整的 clientId。这是一个解释这一点的链接。

于 2012-05-15T17:27:58.277 回答